¿Qué es el diseño elástico?

Diseño elástico es el que permite crear diseños que se adaptan a distintos dispositivos. Este diseño se basa en el tamaño del texto y sus posibilidades son limitadas.

En el diseño elástico el ancho de la página no es fijo. El tamaño de la página y sus elementos está declarado en relación con el tamaño del texto, que se suele especificar en em. La principal ventaja de este diseño es que cuando se aumenta el tamaño del texto, este se reajusta perfectamente a la estructura, sin desbordamientos.

¿Cómo se realiza un diseño elástico?

Para el body, es decir para toda la página, se define un ancho fijo, y luego se define un ancho para cada una de las columnas que componen la página. La suma del ancho de las columnas es igual al ancho total.

Para que esto sea verdad es muy importante poner a cero el margen de la página y de las columnas.

La anchura de los distintos bloques de la página tendrás que definirlas con la unidad de medida em. De este modo toda la estructura de la página aumenta de forma proporcional al aumentar el tamaño del texto.

Con este diseño sigue existiendo el problema de qué ocurre con resoluciones pequeñas, ya que aunque se trabaja con unidades de medida relativas, en el fondo sigue siendo un diseño fijo.

Y cuando se aumenta el tamaño de la página, puede llegar un momento en que aparezca la desagradable barra de desplazamiento horizontal.

Para evitar esto no definiremos el ancho de la columna con el contenido principal. El ancho de esta columna será el espacio que haya disponible en la página una vez restado el ancho del menú principal y del contenido secundario.

En este diseño, el ancho de la página no está limitado. Las columnas menú principal e información adicional tienen definido un ancho fijo, pero el contenido principal no tiene un ancho definido. El ancho del contenido principal se adapta al espacio disponible.

al aumentar el tamaño del texto, las columnas con el menú principal y el contenido secundario aumentan de tamaño, mientras que la columna con el contenido principal disminuye. Y al reducir el tamaño de la ventana del navegador para simular una resolución de pantalla pequeña, la página se adapta correctamente a la nueva resolución. Ahora sí que tenemos un diseño para un ancho no fijo.  

 

 Fuente: Activate, Google España

 

 

Este estilo de diseño resuelve algunos problemas, pero no funciona correctamente en resoluciones extremas, ya sean resoluciones pequeñas o resoluciones grandes.