Bien, si estas leyendo esto, presumo que estas mirando un monitor (excepto que hallan impreso este articulo). Este monitor esta mostrando pixeles, pequeños “cuadraditos” que forman las imágenes y básicamente todo lo que puede llegar a mostrar tu monitor.
Pero… y cuantos pixeles esta mostrando tu monitor? Ha! Eso depende de la resolución de pantalla, y eso se determina en las opciones del sistema operativo que estés usando.
Sin ir demasiado profundo en el tema, podemos establecer que existen resoluciones comunes y que éstas pueden ser clasificadas según la relación entre el ancho y la altura del monitor, como pueden ser 4:3, 16:10, 5:4, etc.
Cuando uno nombra una resolución, generalmente especifica el ancho y el alto, por ejemplo: 800×600, 1024×768, 1440×900, 1280×960, 1680×1050, etc. (unas cuantas mas)
Pero a la hora de ver una página web, el dato que mas nos importa es el ancho en pixeles. Si bien el alto determina cuanto vamos a poder ver en determinado momento, siempre podemos scrollear hacia abajo y es algo a lo que estamos acostumbrados. A lo que generalmente no estamos tan acostumbrados, y no resulta para nada satisfactorio, es a scrollear horizontalmente (hacia la derecha)
En algunos casos se excusa, por ejemplo en páginas que están diseñadas para ser scrolleadas horizontalmente (el contenido no fluye hacia abajo sino que hacia la derecha). Es muy normal ver esto en páginas de fotógrafos. Pero en general las páginas están diseñadas de tal forma que su contenido fluya hacia abajo.
Ahora que ya sabemos que no todas las personas tienen el mismo espacio en pixeles para ver una página, podemos tener la duda “¿Como hace una página para saber cuanto espacio tiene para mostrar su contenido?” Responder esta pregunta nos lleva al tema de los…
Tipos de layout
Estas son las formas en las que las páginas presentan su contenido teniendo en cuenta el espacio horizontal que tienen disponible:
Ancho flexible
La página se adapta a la resolución del usuario. Esto puede suceder de varias formas. En algunos casos un layout de dos columnas tiene una de ellas con ancho fijo (generalmente navegación) y otra ancho flexible. En otros casos la página se adapta al ancho de usuario pero solo hasta un ancho máximo, evitando estiramientos excesivos (lineas de texto demasiado largas son malas para la legibilidad). En algunas ocasiones podemos encontrar elementos modulares que cambian su posición según el ancho que tengan para llenar, como mi página personal.
Elegir diseñar usando un layout flexible tiene sus pro y sus contra, pero es una opción definitivamente poderosa. Si te interesa el tema, dos artÃculos muy interesantes en A list apart son Flexible Layouts with CSS Positioning y Fluid Grids
Ancho fijo
En este caso la página no se adapta, simplemente presenta su contenido teniendo en cuenta un ancho fijo. El ancho en que la página presenta su contenido determina la resolución mÃnima en la cual el visitante no va a necesitar scrollear horizontalmente. Las estadÃsticas de la W3C para enero del 2009 muestra que un 36% de usuarios navega a 1204×768 y que un 57% de usuarios navega a una resolución mayor que 1024×768. Esto significa que si uno diseña con un ancho fijo de tal forma que un usuario a 1024×768 pueda ver la página, se asegura que el 93% de sus visitantes pueden ver correctamente su página.
Y que pasa con el 7% restante? Este 7% esta compuesto por un 3% de resoluciones desconocidas (podemos ignorar este dato) y un 4% de resoluciones de 800×600.
Con los datos que tenemos es fácil asumir que la opción a seguir es diseñar para un publico de resolución 1024×768. En la gran mayorÃa de los casos, esto es cierto y es un estándar que se esta estableciendo. 1024×768 es el nuevo 800×600. Pero siempre es sabio tener en cuenta el público objetivo de nuestra página y el alcance de nuestro contenido, pueden haber casos en los que quizás el porcentaje de usuarios con resoluciones de 800×600 no sea para nada despreciable y se tendrÃa que diseñar teniendo en cuenta esto.
Navegando a 800×600
Uno juega con las cartas que se le reparten, y quizás estés en la situación de tener que explorar la internet con una resolución de 800×600, o puedas llegar a estarlo en un futuro (situación laboral, casa de la abuela, etc)
En esas circunstancias es probable que te encuentres con muchas páginas con layout fijo en el cual no vas a poder ver todo el contenido horizontalmente. Leer de forma continua se torna imposible, no ves todo el contenido, la situación no es buena. Que se puede hacer al respecto?
Pues si el contenido es demasiado grande para mi ventana, entonces tendremos que achicar el contenido.
Como podemos hacer esto? Primero tenemos que asegurarnos de que estemos usando alguno de estos tres exploradores:
Nótese que lo que describiremos a continuación NO funciona con Internet Explorer 6 o inferior. Probablemente existan otros exploradores que también soporten esta función, si conoces alguno publicalo en los comentarios.
Con estos exploradores podemos fácilmente cambiar el tamaño de la página que estemos viendo, tanto layout como texto. Como hacemos esto?
- Para agrandar el layout
- presionar [CTRL] + rueda del mouse hacia arriba
- presionar [CTRL] + botón “+” a la derecha del teclado
- Para achicar el layout
- presionar [CTRL] + rueda del mouse hacia abajo
- presionar [CTRL] + botón “-” a la derecha del teclado
- Para volver al tamaño original
- presionar [CTRL] + 0 (cero)
Nótese que es probable que en el caso de imágenes puede llegar a aparecer pixelación, ya que se estan “estirando” las cosas más alla de su tamaño original. También puede aparecer efecto moiré en algún tipo de imágenes. Estos efectos no son permanentes, al volver al tamaño original la posible pixelación desaparece.
Asi que si en 800×600 vemos que el contenido sobrepasa los limites horizontales de nuestra ventana y tenemos scroll horizontal, podemos simplemente achicar el layout. O, como suelo hacer, si el texto es demasiado pequeño podemos agrandar el layout y leer desde una mayor distancia del monitor. El control es nuestro. 
[...] Estás viendo: Blog « 800×600, resoluciones de pantalla y el ancho de la Internet [...]