¿Diseño responsivo o adaptativo? Tu proyecto visible en cualquier dispositivo

El diseño web responsive (RWD) es una de las mejores prácticas para hacer tu web más accesible.

Es la práctica de crear sitios web que ofrecen una experiencia óptima de visualización y navegación en una amplia variedad de dispositivos y tamaños de pantalla. La idea principal es que un sitio web responda y se adapte automáticamente a las características del dispositivo en el que se está visualizando, ya sea un ordenador de escritorio, una tablet, un teléfono móvil u otros dispositivos.

Esto que voy a decir puede sonar raro pero desde hace tiempo todo es responsive por defecto. Podemos hacer la prueba abriendo un archivo HTML y probando a reducir o aumentar la ventana del navegador. Veremos que responde al ancho del navegador, ya sabeis, cuando pinchas en el marco de la derecha y te pones a estirar y a estrechar la ventana del navegador. El texto se adapta por si solo sin contar con CSS ni estilos incrustados.

Somos nosotros al aplicar estilos quienes delimitamos ese responsive.

Este método busca proporcionar una experiencia de usuario óptima en una variedad de dispositivos y tamaños de pantalla. En lugar de tener un diseño fijo, el diseño responsivo se adapta dinámicamente al ancho de la pantalla del dispositivo en el que se está visualizando.

Este tipo de diseño es el más utilizado ya que responde a ciertas normas comunes en las que más o menos todos estamos de acuerdo en la industria.

Sus principales características son:

Flexibilidad.

Los elementos del diseño se ajustan proporcionalmente al tamaño de la pantalla, evitando así la necesidad de desplazamiento horizontal. Esto se consigue utilizando unidades de medida relativas como em o %.

Las unidades de medida.

Las unidades de medida son la piedra angular sobre la que gira un buen diseño responsive. Podemos encontrarlas de dos tipos:

Absolutas

Estas son invariables, si indicamos que un elemento tiene 300 píxeles de alto, lo tendrá en todos los dispositivos. Esto las hace totalmente contrarías a una filosofía responsiva. Las más importantes son:

• Puntos (pt)
• Píxeles (px)

Relativas

Estas medidas no tienen un tamaño fijo. Son proporcionales a una medida de referencia. Esto las hace ideales para el diseño responsivo. Estas son:

• Em quad, el ancho de la letra M (em)
• Root em (rem)
• Porcentaje (%)

Cual sería la “mejor” depende de multiples factores, ya que cada unidad tiene sus ventajas y desventajas. Muchos diseñadores y desarrolladores combinan estas unidades según las necesidades del diseño y la estructura del sitio web. Por ejemplo, puedes usar “rem” para el tamaño de fuente global y dimensiones de diseño general, mientras que utilizas “%” para diseños de cuadrícula o grid. La clave es comprender cómo cada unidad funciona y elegir la más adecuada para cada situación específica dentro del diseño responsive.

Media Queries.

Se utilizan consultas de medios (media queries) o también llamados “breakpoints”en las hojas de estilo CSS para aplicar estilos especificos según las características del dispositivo, como el ancho de la pantalla, la resolución, etc. Esto define un “punto de ruptura” desde el cual tu diseño cambia, se “rompe”, para verse mejor en otro dispositivo.

Los breakpoints más cómunes son:

• 1920 x 1080 – Ordenador de escritorio
• 1366 x 768 – Portatil
• 768 x 1024 – Tablet vertical
• 720 x 1280 – Smartphone vertical