Tipos de diseño web CSS ¿cuál utilizo?
En este artículo vamos a ver los tipos de diseño web según dos tipos de enfoques: según su adaptación a los distintos dispositivos y según las propiedades CSS que se utilicen.
1. Tipos de diseño web CSS y HTML según su adaptación al dispositivo
A la hora de crear una interfaz web existen diferentes tipos de diseño según su adaptabilidad a los distintos dispositivos: 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.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
1.2. Diseño elástico (em)
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
1.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
1.4. Diseño web responsivo o adaptable (media queries)
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
1.5. Diseño dentro de unos mínimos y máximos (min-width/max-width)
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
1.6. ¿Qué tipo de diseño web 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, que puede mezclar 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.
2. Tipos de diseño web según las propiedades CSS utilizadas
Veamos otro enfoque de los tipos de diseño web según las propiedades CSS que se utilicen:
2.1. Diseño convencional con bloques y floats
Este es el enfoque tradicional de diseño en CSS, donde los elementos se colocan en el flujo normal del documento y se posicionan utilizando propiedades como float, position, display, entre otras. Aunque este enfoque todavía se utiliza, puede ser complicado y difícil de mantener para diseños más complejos y responsivos. Esta forma de diseño convencional es la que hemos estudiado en el tutorial de CSS Inicial.
2.2. Diseño con Flexbox
Flexbox es un modelo de diseño unidimensional que permite organizar los elementos en una sola dirección (fila o columna). Con Flexbox, es más fácil alinear y distribuir elementos de manera flexible, lo que facilita la creación de diseños responsivos y complejos.
2.3. Diseño con CSS Grid
CSS Grid es un modelo de diseño bidimensional que permite organizar los elementos en filas y columnas, creando así diseños más complejos y estructurados. Con CSS Grid, se puede lograr un mayor control sobre la posición y el tamaño de los elementos en el diseño.
Cada enfoque tiene sus ventajas y desventajas, y el mejor enfoque dependerá de los requisitos específicos del diseño y de las preferencias del desarrollador. En muchos casos, una combinación de varios enfoques puede ser utilizada para obtener el mejor resultado en términos de flexibilidad y responsividad en el diseño web.
Test