Estilos de maquetación web



Los principales estilos de diseño que existen en la maquetación de una página web son:

Sin diseño: es como se hacían las páginas web cuando nació la Web en 1990.

Diseño fijo: se realiza cuando se trabaja con un ancho fijo. Este estilo de diseño tiene un problema importante:
Cuando la resolución de pantalla es menor que el ancho definido para la página, aparece una barra de desplazamiento horizontal. Cuando la resolución de pantalla es mucho mayor que el ancho definido, se desaprovecha la pantalla de visualización.

Hay varias formas de lograr una maquetación mediante un diseño fijo. La más antigua se realizaba sin la ayuda de CSS, se empleaba una tabla que permitía dividir la página web como si fuera una cuadrícula. Con el atributo width se definía el ancho de la tabla y de las celdas.


El diseño fijo con tablas quedó obsoleto hace ya muchos años, ya que el diseño con tablas presenta muchos problemas: mezcla el contenido con la presentación, el código HTML es más complejo, las páginas son más pesadas y más difíciles de mantener y produce muchos problemas de usabilidad y accesibilidad. En la actualidad, el diseño con tablas es algo totalmente prehistórico.

Existe otra forma de realizar un diseño fijo con la propiedad float de CSS. Esta propiedad permite que los elementos de bloque, como pueden ser las etiquetas div o p, se puedan colocar en una disposición horizontal una al lado de otra.

Diseño elástico: 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.
Imagen de diferentes dispositivos (ordenador, portátil, tablet y móvil) con la interfaz de una página web perfectamente adaptada a sus dimensiones.

Existen además el denominado Diseño líquido o fluido, el diseño adaptable y el diseño responsivo. Hablaremos de ellos en un próxima entrada.









En realidad, lo normal es que en un diseño finalmente se utilice un diseño híbrido, una mezcla de todos estos diseños.


Fuente: Google Activate
   

Comentarios

Entradas populares de este blog

Códigos Hex de color

Enlaces Intradocumentales

Etiqueta header HTML5