Desarrollo
En una página web es importante no tener scroll horizontal, para tener una buena usabilidad. Por supuesto esto depende de la resolución de pantalla del usuario. Actualmente la menor resolución de pantalla es 800×600, pero cada día es menos usada. La siguiente resolución más pequeña es 1024×768, que es la más usada. De todas formas es aconsejable utilizar el menor ancho necesario para nuestra web, porque muchas veces el usuario no tiene la ventana maximizada, o accede por medio de otros aparatos pequeños, o simplemente para ayudar a la legibilidad.
Otra opción es usar plantillas flexibles, donde las columnas se adaptan al ancho de la ventana, pero el diseño debe ser apropiado para ello.
También podemos usar diferentes presentaciones para cada resolución, y cambiarlas dinámicamente. En este caso deberemos mantener dos diseños/plantillas distintas.
Este es un ejemplo usando una mezcla de plantilla flexible y plantilla dependiente de la resolución.
Testing
A continuación las herramientas/valores que uso para testar las plantillas.
Explorer window size es el tamaño real de la ventana cuando está maximizada en esa resolución. Incluye bordes y barra de tareas desbloqueada. Puedes usar Sizer para cambiarle el tamaño, y testar como funciona in una determinada resolución de pantalla, sin importar la tuya. Explorer tiene el escrollbar más ancho, así que si en Explorer se muestra bien, en el resto de exploradores también. Estas dimensiones son sólo para una configuración normal/media, porque nunca podremos saber el número de barras, posición de la barra de tareas, etc. que tiene el usuario.
Firefox fold (viewport) size es el mismo tamaño interior de ventana en Firefox que en Explorer. Puedes usar el Resize (marcando Viewport) de la Web Developer Toolbar.
CSS max width es el ancho máximo que podemos usar para evitar el scrollbar horizontal. Si ese tamaño lo aplicamos a un elemento no puede tener margins, paddings, o borders.
——–
Screen resolution: 800×600.
Explorer window size: 808×566.
Firefox fold size: 795×440.
CSS max width: 779px.
————
Screen resolution: 1024×768.
Explorer window size: 1032×734.
Firefox fold size: 1019×608.
CSS max width: 1003px.
———–
Puedes calcular el valor para otras resoluciones:
Screen resolution AxB
Explorer windows size: (A+8)x(B-34)
Firefox fold size: (A-5)x(B-160)
CSS max width: A-21px
