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 3

Ejemplos: páginas web sensibles

http://bostonglobe.com

 

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 1230px. Naturalmente, a resoluciones grandes el web es capaz de presentar gran cantidad de información:

A medida que la resolución disminuye de 1230px a 800px, se mantiene la estructura de 3 columnas pero todas mantienen un ancho fluido. La mayoría de las fotos disminuyen su ancho en función del espacio disponible (excepto anunció y cabecera, que mantiene bloques de ancho fijo pero posición fluida, unos alineados a la derecha, otros centrados y otros alineados a la izquierda). El texto mantiene el mismo tamaño en todas las resoluciones:

A partir de los 800px, la estructura del web cambia a 2 columnas (las imágenes se vuelven a adaptar al ancho disponible) y se simplifica la cabecera del web y menús:

A medida que la resolución disminuye de 800px a 635px, se mantiene la estructura de 2 columnas pero todas mantienen un ancho fluido, con las mismas características descritas anteriormente:

A partir de los 635px, la estructura del web cambia a 1 columna y por primera vez se cambia el logo de la cabecera:

Se mantiene la misma estructura hasta 470px:

Al disminuir la resolución a partir de los 470px, la cabecera se modifica, presentando un logo que irá disminuyendo el tamaño en función de la resolución:

El web sigue visualizándose correctamente hasta las mínimas resoluciones de 265px. En cualquier resolución, casi todas las tipografías mantienen el tamaño y formato, facilitando la lectura:

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