Definir el ancho de su sitio para diferentes resoluciones de navegador

Definir el ancho de su sitio para diferentes resoluciones de navegador

Definir el ancho de su sitio para diferentes resoluciones de navegador

VALORACIÓN DEL ARTÍCULO:
5/5


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 esto realmente significa es decidir qué tan amplio debe ser su diseño. Ya no existe el ancho estándar de un sitio web.

Por qué considerar la resolución

En 1995, los monitores de resolución estándar de 640×480 eran los monitores más grandes y mejores disponibles. Esto significaba que los diseñadores web se centraban en hacer páginas que se vieran bien en los navegadores web maximizadas en un monitor de 12 a 14 pulgadas con esa resolución.

Hoy en día, la resolución de 640×480 constituye menos del 1 por ciento de la mayor parte del tráfico del sitio web. La gente usa computadoras con resoluciones mucho más altas, incluyendo 1366×768, 1600×900 y 5120×2880. En muchos casos, el diseño para una pantalla con una resolución de 1366×768 funciona.

Estamos en un momento de 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 y 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 1.366 píxeles de ancho, es probable que su página se vea bien en la mayoría de las ventanas de los navegadores, incluso en monitores grandes con resoluciones más altas.

Ancho del navegador

Antes de que te vayas pensando «vale, voy a hacer mis páginas de 1366 píxeles de ancho», hay más en esta historia. Una cuestión que a menudo se pasa por alto al decidir el ancho de una página web es el tamaño de los navegadores de sus clientes. Específicamente, ¿maximizan sus navegadores a 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 estándar de 1024×768, dos de ellos mantuvieron todas sus aplicaciones al máximo. El resto tenía ventanas de diferentes tamaños abiertas por varias razones. Esto ilustra que si se está diseñando la intranet de esta empresa a 1024 píxeles de ancho, el 85 por ciento de los usuarios tendrían que desplazarse horizontalmente para ver la página completa.

Después de dar cuenta de los clientes que maximizan o no maximizan, 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 unos 740 píxeles o menos en resoluciones de 800×600 y alrededor de 980 píxeles en ventanas maximizadas a resoluciones de 1024×768. Esto se llama navegador «chrome» y puede quitar 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 cuando diseñe el ancho de su sitio web. También necesita decidir si tendrá un ancho fijo o un ancho de líquido. En otras palabras, ¿se va a fijar el ancho a un número específico (fijo) o a un porcentaje (líquido)?

Ancho fijo

Las páginas de ancho fijo son exactamente como suenan. El ancho está fijado a un número específico y no cambia sin importar lo grande o pequeño que sea el navegador. Esto puede ser bueno si necesita que su diseño luzca exactamente igual sin importar cuán amplios o estrechos sean los navegadores 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 anchos tendrán grandes cantidades de espacio vacío en la pantalla.

Para crear páginas de ancho fijo, simplemente utilice números de píxeles específicos para los anchos de sus divisiones de 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 dependiendo del ancho 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 del escaneo de una línea de texto es mayor de 10 a 12 palabras o menor de 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 utilice porcentajes o ems para los anchos de sus divisiones de página. También debe familiarizarse con la propiedad CSS max-width. 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 utilizar consultas de medios CSS y un diseño receptivo para crear una página que se ajuste a la anchura del navegador que la ve. Un diseño web con capacidad de respuesta utiliza el mismo contenido para crear una página web que funciona tanto si se ve a 5120 píxeles de ancho como a 320 píxeles de ancho. Las páginas de diferentes tamaños 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.

Deja un comentario

TAMBIÉN TE INTERESA

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,

GoPro-HERO11

GoPro HERO11 Black: las nuevas cámaras para los creadores de contenido

La conocida marca de videocámaras GoPro ha lanzando tres nuevas especialmente concebidas para creadores. GoPro HERO11 llega en tres modelos para satisfacer las necesidades de todo tipo de perfiles y creadores de contenidos.   Índice de contenidos1 El sensor de mayor resolución hasta la fecha2 Las tres cámaras GoPro HERO112.1 Principales tecnologías en las tres

camara-motorola-edge-30-ultra

¿200 megapíxeles? Sí, es lo que tiene el nuevo motorola edge 30 ultra

El furor por los megapíxeles parece estar de vuelta en la fotografía de los smartphones, si bien hay expertos que mantienen que más MP no quiere decir que resulte en mejores fotografías. El nuevo motorola edge Ultra llega al mercado con una barbaridad inédita en el mundo de la telefonía. Cabe destacar también que otras

nuevo-apple-watch-ultra

Un reloj inteligente solo para los elegidos: Apple Watch Ultra

Apple ha lanzado en septiembre su apuesta más Premium en relojes inteligentes: el nuevo Apple Watch Ultra. Este nuevo dispositivo rompe con la línea de los anteriores, especialmente en lo que se refiere a la pantalla, e incluye prestaciones para deportes extremos. Sin duda es el reloj más ambicioso de su sector, tanto por lo