Guía para diseñadores gráficos

Guía para diseñadores gráficos > Adaptación de la estructura... > Adaptación de bloques secundarios

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

Adaptación de bloques secundarios

Si la estructura es fija, no tendremos que pensar cómo se van a adaptar los bloques secundarios en función de la resolución de la pantalla, pues los bloques secundarios se posicionaran en la pantalla del usuario dónde lo hagamos diseñado. En cambio, si la estructura es fluida, tendremos que definir cómo se van a comportar cada uno de los bloques secundarios. Metafóricamente, si tenemos una casa cuyas medidas y estructura pudiera modificarse, tendríamos que decidir cómo se deberían de adaptar y posicionar los muebles (o bloques) a cada posible medida de la casa.

Muestra de webs muy bien diseñados que adaptan los bloques secundarios en función de la resolución de la pantalla: http://mediaqueri.es

Webs que permiten ver una página web en diferentes resoluciones: http://testsize.com/,
http://www.infobyip.com/testwebsiteresolution.php y http://quirktools.com/screenfly/

Cada bloque puede estar integrado por sub-bloques más recuadros, de los cuales también tendremos que prever cómo se comportaran. Tenemos que pensar muy bien cómo se van a adaptar porque si un bloque o conjunto de bloques no cabe dentro de otro bloque, se producirá un error (los navegadores lo intentarán representar con resultados imprevistos). En general, debemos definir el comportamiento en anchura y posición de cada bloque secundario en función de la resolución de pantalla (o en función del ancho del bloque que lo contiene).

 

Comportamiento en anchura:

Fija

El contenido que diseñamos dentro (texto, imágenes, animaciones,…), será el mismo con independencia de la resolución de la pantalla. La altura del bloque también se mantendrá.

 

Fluida

En este caso, la anchura del bloque se adaptará (como un porcentaje) en función del ancho de la pantalla o del bloque que lo contiene. Como su anchura es fluida, tendremos que definir o prever cómo se van a comportar cada uno de los elementos en su interior (otros bloques, o imágenes, texto, animaciones, video…):

  • El elemento reduce o amplia su tamaño en función del acho del bloque. La altura del elemento y del bloque también se reducirá o ampliará. Ideal para imágenes.
  • El elemento mantiene fijo su tamaño con indiferencia del ancho del bloque.
    • Si el elemento es una imagen, la altura del bloque se mantendrá fija. Pueden aparecer espacios en blanco si la resolución es grande y la imagen se puede cortar en resoluciones pequeñas.
    • Si el elemento es texto, los saltos de línea se generarán automáticament en función del ancho del recuadro y el bloque aumentará o disminuirá la altura.
    • (Ver en el siguiente capítulo, el comportamiento de imágenes y textos en un mismo bloque).
  • El elemento se comporta diferente en función de la resolución de la pantalla. Por ejemplo, podemos definir que el elemento tenga el mismo tamaño para resoluciones grandes, pero se reduce para resoluciones pequeñas, hasta un límite en el cual su tamaño vuelve a ser fijo.
  • El elemento a presentar es diferente en función del tamaño de la pantalla. Por ejemplo podemos presentar un logo con eslogan para pantallas grandes, otro logo sin slogan para pantallas medianas, otro logo simplificado para resoluciones más pequeñas y dejarlo de presentar en las resoluciones aun más pequeñas. En estos casos, la altura del bloque variará en función del elemento a presentar.

Comportamiento en posición:

Fluida

Podemos diseñar que dos o más bloques se representen o posicionen de lado para resoluciones de pantalla grandes pero se posicionen uno debajo del otro (o definir que desaparezcan) para resoluciones más pequeñas.

 

Fija en la estructura

Si definimos un bloque con una posición fija en la estructura este de mantendrá donde lo hagamos definido, con independencia del comportamiento de los otros bloques.

 

Fija en la pantalla

Ocasionalmente, podemos definir que algunos bloques queden fijos en la pantalla con independencia que el usuario se mueva arriba o debajo de la página web con las barras de desplazamiento. Esta opción puede ser útil para presentar menús de navegación en la parte superior del web (o al lado) que queramos que estén siempre visibles para facilitar la navegación del web. Los demás bloques sin una posición fija en la pantalla pasaran por debajo de los bloques fijos, quedando ocultos a no ser que definamos alguna transparencia al bloque fijo.

 

Superposición

Con independencia de su comportamiento en anchura y posición, es posible situar bloques unos por encima de otros. Además es posible definirles transparencias (ver más adelante).

 

Ejemplo de una estructura principal fluida y sensible:

bloques con ancho fijo

bloques de ancho fluido

espacios en blanco no ocupados por ningún bloque

 

 

Reestructuración si la resolución de la pantalla fuera menor. Las imágenes A y B se hacen más pequeñas; la imagen 5 se va debajo, el texto se divide en más líneas; aparecen espacios en blanco (la opción que el texto rodea la imagen 1 se explica más adelante):

 

Si la resolución sigue disminuyendo, vamos a suponer que el boque del logo se modifica volviéndose fluido; el bloque del menú y el pie de página también se reestructuran, adaptando el texto al nuevo espacio disponible; desaparecen el bloque del slogan y alguna de las imágenes; todos los bloques se redistributen uno debajo del otro.

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