Guía para diseñadores gráficos

Guía para diseñadores gráficos > Adaptación de la estructura... > Ejemplos: páginas web sensibles > Ejemplo 4

Ejemplos: páginas web sensibles

http://3200tigres.wwf.fr

 

NOTA: Todos las medidas en pixeles son aproximadas. Algunas medidas pueden ser diferentes si el usuario amplia o disminuye el tamaño de la tipografía con Ctrl+ o Ctrl- .

La página web mantiene una estructura fija centrada hasta los 1000px. La imagen de fondo del tigre se mantiene centrada pero queda cortada a resoluciones inferiores a 1200px, sin que la calidad del diseño se vea afectada:

A partir de los 1000px, toda la estructura de la página se vuelve de tamaño fluido, estrechándose hasta los 850px. En concreto, los menús se acercan unos a los otros y los bloques de texto y algunas imágenes se vuelven más estrechos. En cambio, el titular de la página y la imagen de fondo se mantienen con ancho fijo y centradas en la página:

A partir de 850px se reestructura la página. Los bloques laterales se resitúan más abajo, el campo de texto se ensancha de lado a lado de la pantalla, el menú se pone en vertical a la derecha, los logos de la cabecera disminuyen ligeramente de tamaño… En cambio, los tamaños de tipografía e imagen de fondo se mantienen igual:

A partir de los 850px, toda la estructura de la página sigue con un tamaño fluido, estrechándose hasta los 590px. Algunos bloques tienen un tamaño fluido y otros un tamaño fijo manteniéndose centrados o alineados a la izquierda:

A partir de los 590px el diseño se simplifica mucho, desapareciendo la imagen de fondo, reduciendo tamaño de logos, resituando menús de lado a lado de la pantalla...:

El web sigue manteniendo una estructura fluida hasta un ancho mínimo de 207px, cuando no se puede reducir más porque las dos imágenes de la cabecera no se pueden estrechar más:

JAVAJAN [somos maquetadores y programadores web]. Webs for designers & you. www.javajan.com © 2012 | Avís legal
TwitterFacebookRSSe-mail