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 2

Ejemplos: páginas web sensibles

http://thinkvitamin.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 imagen muestra la página web en una pantalla grande:

La página web mantiene una estructura fija centrada hasta los 1050px, pero con algunos bloques con posición fluida (notar que el logo de facebook "cae" abajo por falta de espacio a 1050px):

A partir de 1050px toda la estructura del web se mantiene pero los menús se comprimen a la derecha del logo, dejando espacio para que la página se comprima para resoluciones menores:

A medida que la resolución disminuye de 1050px a 595px, algunos bloques se mantienen con posición y ancho fijos (menús, logo,…), otros se mantienen con posición fija pero ancho líquido (Boques de texto: notar como el texto automáticamente se presenta en diferentes líneas en función del ancho disponible), y algunos bloques mantienen su ancho fijo pero su posición fluida (los iconos redondos se resitúan en función del ancho disponible).

También, alrededor de los 800px, el titular We're Hiring New Teachers! se presenta a un tamaño de letra más pequeña.

A partir de los 595px, el web mantiene el mismo aspecto, pero la estructura se modifica ligeramente: Logo más pequeño, menú debajo el logo, algunos textos ya no se presentan (texto debajo Learn with Treehouse), los menús de la columna derecha dejan de presentarse, los bloques de texto se presentan de un lado a otro de la pantalla...:

Disminuyendo la resolución a partir de los 595px, los menús mantienen el ancho fijo pero su posición fluida, los campos de texto mantienen un ancho fluido y algunas de sus imágenes dentro se reducen en función de la resolución de la página (por ejemplo foto del autor):

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