La primera cosa que la mayoría de los diseñadores consideran cuando construyen su página web es para qué resolución diseñar. Lo que realmente significa es decidir cuán amplio debe ser su diseño. Ya no existe tal cosa como un ancho de página web estándar.
Por qué considerar la resolución
En 1995, los monitores de resolución estándar de 640x480 fueron los más grandes y mejores monitores disponibles. Esto significó que los diseñadores web se enfocaron en hacer que las páginas se vieran bien en los navegadores web maximizados en un monitor de 12 pulgadas a 14 pulgadas a esa resolución.
En estos días, la resolución de 640x480 representa menos del 1 por ciento de la mayoría del tráfico del sitio web. La gente usa computadoras con resoluciones mucho más altas, incluyendo 1366x768, 1600x900 y 5120x2880. En muchos casos, el diseño para una pantalla de resolución de 1366x768 funciona.
Estamos en un punto en la historia del diseño web en el que no tenemos que preocuparnos mucho por la resolución. La mayoría de las personas tienen monitores grandes de pantalla ancha y no maximizan la ventana de su navegador. Por lo tanto, si decide diseñar una página que no tenga más de 1366 píxeles de ancho, su página probablemente se verá bien en la mayoría de las ventanas del navegador, incluso en monitores grandes con resoluciones más altas.
Ancho del navegador
Antes de que empieces a pensar "bueno, haré que mis páginas tengan 1366 píxeles de ancho", hay más en esta historia. Un problema que a menudo se pasa por alto cuando se decide el ancho de una página web es el tamaño de los clientes que mantienen sus navegadores. Específicamente, ¿maximizan sus navegadores en un tamaño de pantalla completa o los mantienen más pequeños que la pantalla completa?
En una encuesta informal de compañeros de trabajo que utilizaron una computadora portátil con una resolución de 1024x768 estándar de la empresa, dos mantuvieron todas sus aplicaciones maximizadas. El resto tenía ventanas de diferentes tamaños abiertas por varias razones. Esto ilustra que si está diseñando la intranet de esta compañía con 1024 píxeles de ancho, el 85 por ciento de los usuarios tendría que desplazarse horizontalmente para ver toda la página.
Después de dar cuenta de los clientes que maximizan o no lo hacen, piense en los bordes del navegador. Cada navegador web tiene una barra de desplazamiento y bordes en los lados que reducen el espacio disponible de 800 a alrededor de 740 píxeles o menos en resoluciones de 800x600 y alrededor de 980 píxeles en ventanas maximizadas a 1024x768 de resolución. Esto se denomina "chrome" del navegador y puede quitarle el espacio utilizable para el diseño de su página.
Páginas de ancho fijo o líquido
El ancho numérico real no es lo único en lo que debe pensar al diseñar el ancho de su sitio web. También debe decidir si tendrá un ancho fijo o un ancho de líquido. En otras palabras, ¿va a establecer el ancho en un número específico (fijo) o en un porcentaje (líquido)?
Ancho fijo
Las páginas de ancho fijo son exactamente como suenan. El ancho se fija en un número específico y no cambia, no importa cuán grande o pequeño sea el navegador. Esto puede ser bueno si necesita que su diseño se vea exactamente igual sin importar qué tan ancho o estrecho sea el navegador de sus lectores, pero este método no tiene en cuenta a sus lectores. Las personas con navegadores más estrechos que su diseño tendrán que desplazarse horizontalmente, y las personas con navegadores amplios tendrán grandes cantidades de espacio vacío en la pantalla.
Para crear páginas de ancho fijo, simplemente use números de píxeles específicos para los anchos de las divisiones de su página.
Ancho del líquido
Las páginas de ancho líquido (a veces llamadas páginas de ancho flexible) varían en ancho según la anchura de la ventana del navegador. Esto le permite diseñar páginas que se centran más en sus clientes. El problema con las páginas de ancho líquido es que pueden ser difíciles de leer. Si la longitud de escaneo de una línea de texto es más larga que 10 a 12 palabras o más corta que 4 a 5 palabras, puede ser difícil de leer. Esto significa que los lectores con ventanas de navegador grandes o pequeñas tienen problemas.
Para crear páginas de ancho flexible, simplemente use porcentajes o ems para los anchos de las divisiones de su página. También debe familiarizarse con la propiedad de ancho máximo de CSS. Esta propiedad le permite establecer un ancho en porcentajes, pero luego limitarlo para que no sea tan grande que la gente no pueda leerlo.
Y el ganador es: CSS Media Queries.
La mejor solución en estos días es usar las consultas de los medios CSS y el diseño receptivo para crear una página que se ajuste al ancho del navegador que la ve. Un diseño web sensible utiliza el mismo contenido para crear una página web que funciona, ya sea que la vea a 5120 píxeles de ancho o 320 píxeles de ancho. Las páginas de diferente tamaño se ven diferentes, pero contienen el mismo contenido. Con la consulta de medios en CSS3, cada dispositivo receptor responde a la consulta con su tamaño, y la hoja de estilo se ajusta a ese tamaño en particular.
