1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

800 x 600 y el diseño web

Quiero toda la información de mi sitio web en el homepage, y además no quiero tener que hacer scroll...

¿Alguna vez has escuchado algo por el estilo?

Pues es una de las cosas que la gente considera como "buen diseño web". Y de hecho lo es...

...si estás diseñando un sitio para una carretilla de ceviche

Ceviche imagen de elgarydaly

Pero, generalmente es imposible mostrar toda la información de un sitio en un recuadro de 800 x 600 pixeles, claro que hay muchos sitios que lo hacen, tomemos como ejemplo el sitio web del Banco de Crédito del Perú BCP.

El diseño del BCP ha logrado introducir gran cantidad de información en su página principal, y sólo tuvieron que hacer un pequeño sacrificio: Usar el tamaño de letra más pequeño que alguien se pueda imaginar.

Sí, este sitio tiene tamaños de letra entre 9 y 11 pixeles, así que al final el usuario estará muy cómodo porque no tiene que hacer scroll (sólo tiene que pegar la nariz a la pantalla para poder leer).

Nota para el BCP: ya es hora de cambiar ese copyright 2005.

Somos diseñadores web

Somos diseñadores web, la gente nos paga no sólo para hacer un poco de HTML y CSS (a veces eso es lo de menos), nos paga, para hacer un sitio web usable, fácil de leer, ordenado, facil de navegar, atractivo y en la mayoría de casos bastante más grande que 800 x 600.

Tenemos la obligación de decir que no, de explicar por qué es mejor tener una barra de scroll o en todo caso menos información en la página principal.

No basta decirle que sí a todo lo que un cliente nos pida, en mi opinión nos contratan como expertos para darles la mejor solución posible, hay que tener en mente que en diseño web el cliente no tiene siempre la razón.

Obviamente no basta con decirles no, tienes que saber explicar por qué no es conveniente hacer tal o cual cosa, y además explicar por qué tu solución es mejor.

Ya te comentaré en el siguiente post sobre cosas como Above the fold, Liquid & Fluid Layouts y resoluciones de pantalla, todas cosas que tomar en cuenta al momento de diseñar una web que no sea de 800 x 600.

Mientras tanto...

No podemos andar por ahí haciendo sitios de 800 X 600.

Nota: Si te preguntas cuanto son 800 px de ancho, es sólo un poco más ancho de la seccion donde estás leyendo este texto.

Etiquetas:

Comentarios

deja un comentario

  1. Avatar de Javier Martínez Javier Martínez

    Germán,

    El problema que hay actualmente con el tema de las resoluciones de pantalla, es que no se ponen de acuerdo para que se utilicen medidas estándar. Entre los Netbooks, portátiles, etc... todo ésto es un lío.
    La resolución que muestras en éste post es la utilizada por el Nokia N810.

    Un saludo

  2. Avatar de natalia natalia

    Te he encontrado buscando información sobre los elementos div (estoy empezando) y te aseguro que pocas explicaciones tan claras hay por ahí como las que tú ofreces. Te sigo desde ya.

  3. Avatar de Posicionamiento web Valencia Posicionamiento web Valencia

    diseñar para 800x600 dejó de hacerse hace.. umm igual el 2005 jejej

    Lo normal es diseñar para 1024 o utilizar un diseño líquido

  4. Avatar de Alexis Bellido Alexis Bellido

    Es cierto que aún ciertos dispositivos, como las tabletas de Nokia y la primera generación de netbooks, usan 800 x 600 pero es importante saber que audiencia visitará cada sitio que diseñamos.

    Para el reciente <a href="http://ventanazul.com">rediseño de Ventanazul</a> sabía que la mayoría de visitantes serían desarrolladores web usando resoluciones con 1024 píxeles o más de ancho, gracias Google Analytics por ese dato.

    Aún así, y pensando en algunos con resoluciones menores, puse lo más importante en los primeros 800 píxeles, la barra derecha es para información opcional como publicidad así que los visitantes no estarían perdiéndose de lo que más les interesa, el contenido, si no tienen los píxeles adicionales. Y claro, siempre están las barras de desplazamiento a un clic de distancia.

    Esta opción es usada por muchos otros sitios, como por ejemplo <a href="http://alistapart.com">A List Apart</a>.

    Diseñar con lo más importante <em>over the fold</em> y en los primeros 800 píxeles es una interesante opción al uso de diseños líquidos, que en algunos casos pueden resultar complicados de implementar.

    Saludos.

  5. Avatar de Misterioaqo Misterioaqo

    No hay, ni debe haber un estandar para el tamaño en diseño, esto es de acuerdo al requerimiento, los diseños liquidos que se acomodan al tamaño de la pantalla (que son buenísimos), parecerían la mejor opción pero no siempre se dará, lo correcto es hacer lo que ya se comentó, saber para que audiencia se esta diseñando, conocer el mercado o como quieran llamarlo. Ahora lo mínimo o normal podría considerarse al 1024 pero es desconocido hasta cuando sea esto.

  6. Avatar de Carlos Espinoza Carlos Espinoza

    sabes tengo un problema con una web que he creado creo ke es de 800 x 600 y cuando la visualizo en una laptop se deforma EL DISEÑO necesito ayuda como puedo hacer para ke no me suceda esto que tengo que hacer urgente mi correo caea_1986@hotmail.com

  7. Avatar de flashreloco flashreloco

    Excelente articulo y coincido en que el cliente no tiene la razón.

    Saludos

  8. Avatar de otro disenador otro disenador

    JAJAJA Y YO PREOCUPADISIMO POR QUE ESTABA HACIENDO WEBS EN 1024.....Y ANDABA BUSCANDO COMO DIABLOS HACERLO DE 800 X 600...GRACIAS!!

  9. Avatar de Diseño web cádiz Diseño web cádiz

    Gracias por informarnos sobre este tema que es tan importante para los que queremos saber mas. Además me parece que es muy completo y conciso

  10. Avatar de Blanca Blanca

    Esta siempre será la lucha del diseñor y el cliente, creo que depende de ambos, el primero por saber justificar un diseño y el segundo porque debería tener la mente más abierta. Muy buena discusión.

Deja un comentario

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910