Guía para diseñadores gráficos

Guía para diseñadores gráficos > Adaptación de la estructura... > Adaptación del bloque principal

Adaptación de la estructura en función de la resolución

Adaptación del bloque principal

Bloque principal: recuadro exterior que engloba toda la estructura de página web, es decir, no existe ningún recuadro o bloque secundario que rebase el bloque o recuadro principal.

Bloque secundario: cada uno de los recuadros que componen el bloque o recuadro principal.

 

Existen tres maneras distintas de adaptar el bloque principal en función del tamaño de la pantalla:

Fijo:

El bloque se diseña con un tamaño fijo que no se va a modificar en función del tamaño de la pantalla. Es el más fácil de diseñar y maquetar porqué los elementos del diseño o bloques secundarios siempre estarán en la misma posición y mantendrán el mismo ancho.

Ejemplo página web de estructura fija, mostrada en pantallas de distinta resolución. A resoluciones grandes aparecen muchos espacios en blanco; a resoluciones pequeñas el diseño queda cortado

Si escogemos una estructura principal fija, tenemos que pensar qué tamaño en pixeles vamos a utilizar. Según las estadísticas actuales (http://www.w3schools.com/browsers/browsers_display.asp), el 98% de usuarios tienen resoluciones igual o superiores a 1024x768, aunque empiezan a crecer el número de usuarios con pantallas inferiores a 800x600 debido a la navegación con tabletas y teléfonos.

Si diseñamos un bloque principal fijo, podría ser bueno tomar como referencia la resolución de 1024x768, aunque el ancho del bloque principal debería de ser más pequeño, pues el navegador se necesita algunos pixeles para los menús, márgenes y barras de desplazamiento. Así pues, deberíamos de diseñar un bloque principal de un ancho máximo de 990 pixeles. Si queremos que todo el contenido aparezca en la pantalla y no aparezcan barras de desplazamiento verticales, la altura máxima del diseño debería de ser entre 600 y 650 pixeles (dependerá mucho del espacio que ocupen los menús del navegador del usuario).

Normalmente, la estructura principal fija se centra en la pantalla para resoluciones grandes, aunque también se puede alinear a la izquierda o a la derecha.

Fluido o líquido:

Con independencia de la resolución de una pantalla, un bloque principal fluido ocupa un porcentaje horizontal de la pantalla, normalmente el 100% (aunque también puede ocupar el 90% centrado, o alineado a la izquierda o derecha). Normalmente, al disminuir la resolución o tamaño de una pantalla, el bloque fluido se estrecha horizontalmente pero se alarga verticalmente para poder presentar toda la información que contiene. A su tiempo, los bloques secundarios dentro de un bloque principal fluido pueden tener un ancho fijo o fluido y tener una posición fija o fluida (se verá en el siguiente punto).

Diseñar y maquetar una estructura fluida es más complejo, pues se tienen que prever cómo se van a comportar cada uno de los bloques secundarios en su interior. Bien diseñada, una estructura fluida se puede adaptar desde las resoluciones de pantalla más grandes hasta las resoluciones de pantallas más pequeñas de los teléfonos, aunque para éste último caso se recomiendan distintas estructuras, como se verá a continuación.

Ejemplo de adaptación fluida (en este caso, todos los bloques secundarios también son fluidos):

Dos buenos artículo sobre diseño fluido:
http://www.javajan.com/news.php?id=225-guia y http://www.javajan.com/news.php?id=193-guia

Estructuras distintas - Diseño sensible:

El diseño sensible (del inglés: responsive design) es una opción cada vez más utilizada en el diseño web actual es crear estructuras del bloque principal distintas, reacomodando los contenidos en función de la resolución de la pantalla. Esto puede ser muy útil cuando consideremos el acceso a nuestro web a través de teléfonos, que tienen resoluciones de pantallas muy pequeñas. Algunos navegadores para móviles reestructuran el diseño de los webs de un modo eficiente, pero si queremos asegurar la buena visualización y diseño de nuestro web a cualquier resolución, deberemos de crear varias estructuras en función de la resolución de la pantalla.

En un diseño sensible, no aparecerán barras de desplazamiento horizontales (scroll) hasta resoluciones muy pequeñas.

Podemos decidir las medidas a las cuales se presentaran las diferentes estructuras del bloque principal en función del diseño planteado, pero también podemos determinarlas consultando las pantallas más utilizadas actualmente:

Resoluciones de pantalla más utilizadas:
 http://www.w3schools.com/browsers/browsers_display.asp
Resoluciones de pantalla más utilizadas en teléfonos móviles:
http://deviceatlas.com/resourcecentre/Explore+DeviceAtlas+Data/Data+Explorer#_/

Si queremos optimizar recursos y diseñar únicamente dos estructuras de web, una posible solución sería diseñar una estructura fija para pantallas mayores a 1280 pixeles de ancho que se vuelva fluido para pantallas menores a 1280 pixeles hasta 800 pixeles (Ipad). La segunda estructura podría ser fija para pantallas mayores a 480 píxeles (iPhone) que se vuelva fluido para resoluciones menores, hasta las pantallas de los teléfonos más pequeñas (160 pixeles o menos). Es importante recordar que a todas estas medidas debemos restar 30 o 40 pixeles para que el diseño no quede recortado por barras de desplazamiento o márgenes del navegador web.

Buen artículo sobre diseño web sobre móviles:
http://www.circulodemaquetadores.com/disenando-para-moviles-diseno-para-multiples-tamanos-de-pantalla/
Ventajas del web frente las aplicaciones y análisis de los distintas posibilidades de diseño web para móvil
http://www.javajan.com/news.php?id=350-guia

Ejemplo de estructuras distintas: a 800 pixeles existe una transición que cambía de una estructura de 3 columnas a una estructura de 2 columnas (manteniendo la mayoría de contenidos):

Consultar también los diversos ejemplos web con distintas estructuras fluidas que presentamos y explicamos al final del capítulo.

Comparativa:

Ventajas y desventajas de los tres modelos de adaptación a las distintas resoluciones de pantalla:

 

 

VENTAJAS DESVENTAJAS

Ancho fijo

- El diseñador tiene más control sobre cómo se verán los bloques secundarios dentro del principal.
- Los bloques de texto secundarios son más estrechos y se mejorara la legibilidad.
- Más sencillo y económico de diseñar y maquetar.

- Las estructuras pueden aparecer muy pequeñas en grandes resoluciones, y pueden aparecer cortados en pequeñas resoluciones.
- El usuario pierde el control.

Ancho fluido

- Se adapta a las distintas resoluciones de pantalla y se visualiza de una forma controlada y correcta en más dispositivos.
- No se corta en pantallas de dispositivos pequeños.

- Si el diseño no se vuelve fijo para resoluciones grandes, el texto en los bloques secundarios se alarga y empeora su legibilidad.
- Más complejo de diseñar y maquetar. Se tiene que prever muy bien cómo se comportará la fluidez en función de las resoluciones.

Diseño sensible

- La mejor solución para dispositivos móviles. La estructura se ve siempre perfecta con indiferencia de la resolución de la pantalla del usuario.
- no aparecerán barras de desplazamiento horizontales hasta resoluciones muy pequeñas.

- Se requiere de más recursos para hacer dos o más estructuras diferentes que en general se comporten de un modo fluido.

 

Adaptación del bloque principal >>
JAVAJAN [somos maquetadores y programadores web]. Webs for designers & you. www.javajan.com © 2012 | Avís legal
TwitterFacebookRSSe-mail