Tipos de diseño web ¿cuál utilizo?

Tipos de diseño web, ¿cuál utilizo?

A la hora de crear una interfaz web existen diferentes tipos de diseño: diseño con tamaño fijo, diseño con unidades «em», diseño mediante porcentajes, diseño que se adapta mediante puntos de ruptura o diseño definido dentro de unos márgenes predefinidos. Es importante mencionar que  estos métodos se pueden utilizar de forma combinada. Veamos cada uno de estos métodos mediante un ejemplo.

1. Diseño fijo

El diseño fijo dispone de medidas fijas que no son modificadas para los distintos dispositivos. Por lo tanto, se trata de un diseño que no cumple las normas de un diseño web responsivo o responsive web design.

0

2. Diseño elástico

En el diseño elástico se definen las dimensiones de la página con unidades «em». De esta forma el diseño se adaptará cuando el visitante del sitio cambie el tamaño del texto, pero no se adaptará en función de los cambios de tamaño de la ventana del navegador.

Tal y como vimos en el apartado “Unidades de medida en CSS” de la unidad 3, el «em» es una unidad relativa y su valor depende del tamaño de fuente definido en el navegador.

El «em» es una unidad de tipografía que mide exactamente el ancho de la letra «M» mayúscula de una tipografía dada y a un tamaño dado. Por tanto, un «em» no mide siempre lo mismo. Actualmente, el tamaño de fuente por defecto en todos los navegadores suele ser de 16 píxeles.

0

3. Diseño líquido o fluido

El diseño líquido se adapta a la ventana del dispositivo, normalmente definiendo los tamaños mediante porcentajes. Sin embargo, este método perjudica la experiencia de usuario y no permite controlar el diseño ( el diseño varía constantemente según el tamaño del dispositivo y no se puede diseñar al píxel para todos los tamaños).

0

4. Diseño web responsivo o adaptable

El diseño web responsivo o responsive web design (también llamado adaptable o adaptative) se basa en el uso de media queries. Gracias a esta técnica podemos definir estilos condicionales con puntos de ruptura o puntos de interrupción, aplicables únicamente en determinadas situaciones.

Supongamos que queremos aplicar un estilo diferente en pantallas de ancho superior a 1200px, inferior a 1200px, e inferior a 600px, tendríamos las siguientes media queries para definir los estilos del ejemplo que hemos estado viendo:

0

5. Diseño flexible

Consiste en utilizar las propiedades CSS «min-width» y «max-width» para que las anchuras de los bloques puedan adaptarse dentro de unos mínimos y máximos.

0

6. ¿Qué tipo de diseño debo utilizar?

Crear un sitio web adaptable exige, en muchos casos, combinar algunas de las técnicas anteriores. Lo más habitual es declarar más de una media query para adaptar el diseño a múltiples dispositivos. Pero el número de puntos de interrupción y cómo se implementan estas técnicas depende del diseño específico del sitio web.

Así pues, lo ideal es utilizar un diseño web responsivo, preferentemente no elástico y con mezcla de diseño flexible y líquido según el contenedor. De este modo ofreceremos la mejor experiencia de usuario y podremos considerar las distintas medidas de los dispositivos utilizando tan solo HTML y CSS.

Comprueba tu aprendizaje