comparte el articulo 

Diseñar una página web para varias resoluciones de pantalla

Actualizado el 27/01/2010 < > 6 Cometarios

Resumen: La amplia gama de resoluciones de pantalla existentes nos dificulta realizar diseños de páginas web con dimensiones fijas. Aquí veremos algunas atlernativas.

Una de las dificultades más importantes a la que se enfrentarán los diseñadores web es la cantidad de resoluciones de pantalla diferentes que emplean los usuarios de Internet. El diseñador empleará un monitor y un navegador que se encuentran adaptados a sus necesidades y posibilidades, pero esto no debe ser motivo para interpretar que todos los usuarios pueden llegar a emplear la misma resolución.

Muy por el contrario, los usuarios de Internet emplean una gama bastante amplia de resoluciones de pantalla. Las resoluciones pueden ser 640 x 480, 800 x 600, 1024 x 768, 1280 x 1024 o superiores. Se podría suponer que bastaría con tomar la resolución de pantalla más empleada y diseñar nuestra página web para que se vea bien en esta resolución. Sin embargo, el tema no es tan sencillo. La siguiente estadística muestra la evolución del empleo de las distintas resoluciones de pantalla desde el año 2000 hasta el 2010.

Estadística de uso de resoluciones de pantalla

Fecha Superior 1024×768 800×600 640×480 Desconocido
enero 2010 76% 20% 1% 0% 3%
enero 2009 57% 36% 4% 0% 3%
enero 2008 38% 48% 8% 0% 6%
enero 2007 26% 54% 14% 0% 6%
enero 2006 17% 57% 20% 0% 6%
enero 2005 12% 53% 30% 0% 5%
enero 2004 10% 47% 37% 1% 5%
enero 2003 6% 40% 47% 2% 5%
enero 2002 6% 34% 52% 3% 5%
enero 2001 5% 29% 55% 6% 5%
enero 2000 4% 25% 56% 11% 4%

Como puede apreciarse en la tabla anterior, el uso de resoluciones de pantalla de 640 x 480 es en la actualidad nulo o un valor muy cercano a ello, mientras que la tendencia a emplear una resolución de 800 x 600 viene descendiendo y los usuarios que la emplean ya son muy poco más del 1%. La tendencia general es de un aumento del empleo de resoluciones de pantalla superiores a 1024 x 768. Teniendo en cuenta esto, podríamos pensar que lo correcto sería diseñar páginas web para que se vean bien en este tipo de resoluciones. Sin embargo, no es posible despreciar a los millones de usuarios (más del 20%) que todavía emplean la resolución de pantalla 1024 x 768, aunque si es despreciable las cifras de usuarios con resoluciones menores.

El objetivo de una página web debe ser alcanzar a conformar a la mayor cantidad de usuarios posibles, por lo que dejar de lado al 20% de los usuarios parece una medida poco recomendable. El diseñador web deberá hacer su trabajo de forma tal que le permita llegar con un buen diseño a los usuarios con diferentes resoluciones de pantalla.

Posibles soluciones

Una de las soluciones posibles, aunque no la mejor, es realizar la página para la menor de las resoluciones de pantalla (en la actualidad, teniendo en cuenta que puede despreciarse el número de usuarios que emplean resoluciones menores, sería de 1024 x 768) y dejar márgenes auto en CSS.

Con este código CSS, el contenedor principal de la página web que estaremos diseñando tendrá un ancho de 800 píxeles y se ubicará en el centro, mientras que el espacio restante de la pantalla, cuyo tamaño dependerá de la resolución de pantalla del usuario, estará ocupado con el fondo que hayamos establecido para toda la página a uno y otro lado del contenedor. Esta solución, si bien es bastante sencilla y efectiva, no siempre resulta del agrado de los diseñadores, debido a que en resoluciones de pantalla muy grandes, los espacios que quedan a ambos lados del contenedor principal son muy grandes, pudiendo perjudicar la estética general del sitio. A continuación se verá un ejemplo donde una página web que emplea este método se ve en dos resoluciones de pantallas diferentes. La primera captura de pantalla corresponde a una resolución de 1024 x 768 pixeles, mientras que la segunda corresponde a una resolución superior:

Diseño fijo con margenes auto

Existe otra solución, la que si bien es la más efectiva, puede resultar algo complicada, sobre todo para los principiantes. Sin embargo, la efectividad de su empleo hace que sea necesario que todo aspirante a diseñador web conozca el funcionamiento y consiga, mediante la práctica, el dominio de este sistema. Se trata de los denominados diseños elásticos. Tal como su nombre indica, este tipo de diseños tiene la capacidad de adaptarse a diferentes resoluciones de pantalla.

El principio de funcionamiento es bastante sencillo, aunque llevarlo a la práctica puede resultar bastante más complicado. Se trata de basar las dimensiones de los diferentes elementos en porcentajes. Esto quiere decir que si le damos a una caja un ancho de 20%, esta ocupará un espacio igual al referido porcentaje. De esta forma, cada uno de los elementos podrá verse en el mismo lugar sea cual sea la resolución de la pantalla. La siguiente captura de pantalla pertenece a un sitio web que emplea este tipo de diseño:

Diseño fijo con margenes auto

Pasos básicos a seguir para hacer un diseño elástico

El primer paso es seleccionar la resolución de pantalla mínima para la cual se diseñará la página web. Teniendo en cuenta los datos estadísticos presentados más arriba, lo conveniente es que se diseñe para 1024 x 768 pixeles. Una vez realizado el layout, comenzamos a proceder tal como haríamos para realizar un diseño de dimensiones fijas, solo que debemos establecer las dimensiones de las cajas y las imágenes en porcentajes. Esta es el secreto de los diseños elásticos. Sin embargo, queda un aspecto importante para resolver: las fuentes.

El problema de las fuentes es que no es posible o muy dificultoso el empleo de porcentajes para establecer su tamaño. En este caso, lo conveniente es el uso de una unidad llamada “em” cuya medida está relacionada con la altura de la fuente empleada. Como 1 em es igual a la altura de la fuente, su dimensión real dependerá del tamaño del elemento padre. Por ejemplo, si establecemos en el “body” un tamaño de fuente, 1 em será igual a al tamaño determinado, mientras que 1.2 em será un 20% mayor y 0.8 em será un 80% del tamaño de la fuente original. Esta unidad de medida, puede ser empleada en otros elementos, aunque su uso más frecuente está relacionado con el tamaño de las  fuentes.

Conclusión

Siempre debemos pensar en nuestros futuros usuarios a la hora de comenzar un diseño web. Esto implica necesariamente pensar que no todos emplean los mismos ordenadores ni los mismos monitores, lo que hace que no todos puedan ver del mismo modo un sitio diseñado con parámetros fijos. Es bastante frustrante abrir un sitio y ver que no se encuentra diseñado para que nuestro equipamiento lo muestre en forma correcta. Un visitante conforme puede volver.

Publicado el 27/01/2010, última actualización 27/01/2010.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

6 Cometarios

  1. Vicente Reyes

    me parecio muy bueno el punto del diseño elástico solo que con un ejemplo codificado se pudiera ver mejor ya que no se dice mucho de como hacerlo!…..

    Miércoles, 26 de enero 2011

  2. Andrés Fernández

    Hola Vicente:
    La idea de este artículo era tratar el tema de las resoluciones de pantalla. Sobre diseños elásticos te sugiero que leas los siguientes artículos:

    http://www.lawebera.es/comunidad/articulos/diseno-web/ni-fijo-ni-liquido-elastico.php

    y para hacer elementos elásticos:

    http://www.lawebera.es/como-hacer/ejemplos-css/fondos-elasticos-para-titulos-y-menus.php

    Muchas gracias por la lectura.

    Sábado, 29 de enero 2011

  3. Daniel

    se agradece muchisimo la ayuda hacen un trabajo excelente, sigan asi

    Viernes, 29 de abril 2011

  4. Lorena

    Hola, primero gracias por tu aportación, en mi caso, estoy trabajando con un diseño para un portfolio donde la riqueza visual está, sobretodo en el caso de la home y páginas con menor contenido, en las imágenes de fondo que ocupan gran parte de la pantalla, en este punto, y probando diferentes soluciones creo que además de la maquetación elástica lo mejor será emplear dos diseños y que el navegador interprete “cual emplear” dependiendo de la resolución de la pantalla, existe algún post donde se hable de esto? Gracias!

    Lunes, 16 de mayo 2011

  5. maria belen

    Muy buen y revelador post! :D

    Lunes, 26 de noviembre 2012

  6. Isaac Silverio Gomero (Peru)

    Pues para lo que no entendieron, el diseño elástico es que cambies el entorno principal no a pixeles sino a porcentaje, el entorno principal debe tener 100% en horizontal y vertical, entonces tu pagina web se adecuara a cualquier pantalla en la que se active tu pagina, en pantallas CRT, Plasma, HD o celulares, ipad, iphone o celulares antiguos con pantalla pequeña, yo he probado con Pantallas HD, CRT, Tablet y con Blackberry, Iphone, Smartphone y con mi nokia antiguito con conexión a internet y la web se adecua a la pantalla, sin bajar el tamaño de letra. muy buena solución, felicitaciones.

    Lunes, 9 de diciembre 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras