¿Qué es el diseño responsivo?

El diseño responsivo, también diseño responsive, es un tipo de desarrollo de páginas web que permite su óptima visualización en distintos tipos de dispositivos finales. El término diseño responsivo es tan antiguo como la web móvil y se generalizó en torno a 2013.

Antes de la llegada de la web móvil, el panorama de los dispositivos finales con acceso a Internet era relativamente homogéneo: existían los ordenadores portátiles y los de sobremesa, que eran muy similares en cuanto a medios de entrada y salida. Ambos tipos de dispositivos contaban con un teclado, un ratón o un trackpad, y una pantalla con una anchura de 1000-2000 píxeles.

En aquel entonces no era necesario hacer ningún esfuerzo especial para desarrollar una página web que se visualizara correctamente en cualquier dispositivo. La solución más sencilla era limitar el ancho de una página al mínimo común denominador. Un enfoque popular era mostrar las páginas con 800 píxeles de ancho y centradas o justificadas a la izquierda. En pantallas más grandes, podía haber algún espacio en blanco extra, pero las páginas eran fáciles de leer en todos los dispositivos.

Esto cambió con la llegada de los dispositivos móviles y la importante diversificación de los dispositivos finales. Las pantallas de los smartphones y las tabletas difieren de las de los ordenadores de sobremesa en varios aspectos. Las dimensiones de los píxeles juegan ahora un papel importante y la resolución física (píxeles por pulgada o ppi) también entró en escena con la llegada de las pantallas retina. Y, por supuesto, estos dispositivos se manejan con el dedo en lugar de con el ratón. Además de los teléfonos inteligentes y las tabletas, también han aparecido en el mercado grandes monitores de alta resolución, lo que significa que una página web moderna tiene que funcionar en pantallas con anchos que van desde 320 píxeles hasta más de 4000 píxeles.

Una página web responsiva se ajusta al espacio disponible en una pantalla. A menudo se habla de “espacio en pantalla” en este contexto. Una página web debe verse bien en todos los dispositivos y garantizar una experiencia de usuario óptima (UX).

El diseño responsivo abarca una amplia gama de tecnologías y enfoques que se combinan para desarrollar una página web totalmente responsiva. Esto incluye:

• Elementos HTML5 como la imagen y atributos como srcset y tamaños
• Consultas de medios CSS
• Unidades CSS
• El uso de varios activos de un solo recurso
• El enfoque mobile first

El diseño de una página web responsiva ofrece varias ventajas. La principal consideración es la experiencia del usuario (UX). En teoría, se puede implementar una buena UX sin diseño responsivo, pero eso requeriría una página móvil propia o el uso de JavaScript. En definitiva, este tipo de enfoque sería mucho más complejo que un diseño adaptable basado en CSS y requeriría más mantenimiento.

El diseño de una página web desempeña un papel importante en la forma en que los visitantes perciben la información presentada en la página. Un buen diseño refleja la identidad de la organización que está detrás de la página web y ayuda a conectar al usuario con su marca. Los visitantes deben tener una experiencia positiva al visitar su página web. Veamos dos ejemplos de la importancia del diseño responsivo para la experiencia del usuario:

• Imaginemos que un título llena toda la pantalla en un dispositivo móvil. Sin embargo, en la versión de escritorio, el mismo encabezamiento con el mismo tamaño de letra no destaca en absoluto. En la versión de escritorio, el encabezado debe mostrarse más grande para captar la atención del visitante.
• Imaginemos una página web para un blog, en el que hay una barra lateral junto a los artículos. La barra lateral contiene enlaces a otros artículos con pequeñas miniaturas. En la versión de escritorio, la barra lateral limita el ancho de los artículos, facilitando la lectura de la página. En un dispositivo móvil, la barra lateral ocuparía casi la mitad de la pantalla. Por tanto, el diseño debe ser diferente en los dispositivos móviles y la barra lateral debe aparecer debajo de los artículos.

En general, una página web no responsiva se mostrará en la pequeña pantalla de un dispositivo móvil exactamente igual que en un ordenador de sobremesa, solo que más pequeño. Esto obliga al usuario a ampliar las partes individuales de la página. Por lo tanto, es mucho mejor ofrecer una versión optimizada. Un par de ejemplos:

• En la versión de escritorio, un botón de una web se clica con el ratón. Pero en los dispositivos móviles se navega con el dedo. Por tanto, el botón debe ser más grande en la versión móvil y dejar más espacio entre los elementos.
• Imaginemos que tenemos un formulario en nuestra página web. Normalmente, el texto contenido en el formulario está acomodado para que se pueda leer fácilmente y no toque los bordes del mismo. Un margen de 20 píxeles a la izquierda y a la derecha es normal y se ve bien en pantallas grandes. Pero en los dispositivos móviles con anchos de pantalla de 320 píxeles, acabamos de perder una octava parte del espacio de la pantalla. Para evitar esto, el margen debe reducirse en los dispositivos móviles.

Cada vez son más los usuarios que navegan por Internet en dispositivos móviles. Decidirse por una página web responsiva tiene importantes desventajas. Algunos ejemplos notables son:

• Malas tasas de conversión y altas tasas de rebote, debido a un diseño desoptimizado y una mala experiencia de usuario.
• Mal posicionamiento en los motores de búsqueda, ya que Google reconoce cuando, por ejemplo, los elementos de la web están situados demasiado cerca unos de otros.
• Mal rendimiento, debido a los largos tiempos de carga de los recursos que no han sido optimizados.

El diseño responsivo incluye varios enfoques y tecnologías. Suelen existir varias soluciones para los diferentes escenarios que puedan surgir. El desarrollo todavía está en proceso de cambio.

Desde los inicios de Internet, implementar diseños complejos en las webs ha sido una ciencia. El lenguaje HTML tiene varios tipos de elementos que se comportan de forma diferente en función del diseño. Veamos en particular los tipos de elementos block, inline e inline-block. Los elementos de bloque ocupan todo el ancho disponible y aparecen uno encima de otro. Los elementos en línea solo ocupan el espacio que necesitan para su contenido y aparecen uno al lado del otro. Esta tabla debería dar una visión general de los elementos relevantes en el diseño responsivo.

La implementación de un diseño suele requerir que los elementos del bloque se coloquen uno al lado del otro. Hay varias formas de conseguirlo. Antes de la llegada de CSS, los diseños basados en tablas eran el estándar; la llegada de CSS trajo consigo los diseños flotantes. Hoy, CSS Flexbox se utiliza para diseños simples basados en columnas o filas y el CSS Grid para diseños más complejos. Las dimensiones relativas de CSS se utilizan en todos los casos, para permitir la variación del número de elementos mostrados uno al lado del otro.

Un buen ejemplo: imaginemos una página con cuatro elementos de vista previa para las entradas del blog. Cada uno de los elementos de vista previa contiene una imagen, un título, un teaser y un botón de “Leer más”. Con Flexbox, se puede implementar fácilmente el siguiente diseño responsivo:

• Se muestra en una pantalla grande: todos los elementos de la vista previa aparecen uno al lado del otro en una fila. Cada elemento ocupa el 25% del espacio disponible.
• Visualización en una pantalla de tamaño medio: los elementos aparecen uno al lado del otro en dos filas, cada una con dos elementos. Cada elemento ocupa el 50% del espacio disponible.
• En una pantalla pequeña: todos los elementos aparecen uno debajo de otro en una línea. Cada elemento ocupa el 100% del espacio disponible.

Este es un ejemplo de implementación con clases del marco CSS responsivo Tachyons. Para cada contenedor de vista previa definimos las clases “w-100 w-50-m w-25-l”. Los cuatro contenedores de vista previa están en un contenedor etiquetado como “flex-wrap”.

A veces tiene sentido mostrar un elemento solo en pantallas de un determinado tamaño. Por ejemplo, los datos tabulados se muestran como una tabla en HTML utilizando la etiqueta <table>. Sin embargo, dependiendo del tamaño de la tabla, puede ser difícil adaptarla correctamente para una pantalla pequeña. Ahí es donde entra en juego un sencillo truco: indicar al usuario que gire su dispositivo para crear el espacio suficiente para que se muestre la tabla. Este texto, por supuesto, solo debe aparecer en los dispositivos de pantalla pequeña cuando el dispositivo se mantiene verticalmente.

Los elementos pueden ocultarse fácilmente utilizando la propiedad CSS display: none. Con una Consulta de medios CSS especial, se puede consultar tanto el ancho de la pantalla como la orientación del dispositivo. El texto adicional debe aparecer solo si la anchura de la pantalla es inferior a 640 píxeles cuando se muestra en vertical. En caso contrario, el elemento debe estar oculto:

Cuando se combina con el siguiente código HTML, la función está completa:

Para que la experiencia del usuario sea óptima, el tamaño de la fuente de los elementos de texto debe adaptarse a la pantalla que se utilice. Existen varias técnicas de diseño responsivo para implementar esto.

El ingrediente básico es el elemento CSS rem (“root element” o “elemento raíz”), que vincula el tamaño de la fuente de un elemento proporcionalmente al elemento HTML “raíz”. Para escalar el texto de forma coherente, basta con adaptar el tamaño de la fuente del elemento “raíz” mediante puntos de rotura CSS.

Veamos un ejemplo. En primer lugar, de acuerdo con el enfoque “mobile first”, estableceremos los tamaños de las fuentes para las pantallas pequeñas:

A continuación, ajustaremos el tamaño de la fuente del elemento HTML para pantallas más grandes. Dado que el tamaño de los encabezados H1 se define mediante rem, se escalará automáticamente:

Otro enfoque popular es utilizar las unidades CSS vh y vw para adaptar de forma fluida el tamaño de la fuente a la altura o anchura de la pantalla. En teoría, este enfoque no requiere puntos de ruptura, pero a veces puede hacer que el texto aparezca diminuto en pantallas pequeñas. En este caso, puedes implementar puntos de interrupción selectivos o utilizar la función CSS calc para establecer un tamaño de fuente mínimo.

Para optimizar los encabezados que llenan toda la pantalla en dispositivos pequeños, hay un enfoque que no utiliza CSS. Se supone que los encabezados atraen la vista hacia ellos. Esto facilita que el usuario entienda rápidamente el contenido de una página. Sin embargo, esto a veces puede dar lugar a problemas de visualización, especialmente cuando se trata de palabras más largas. Con las indicaciones HTML “espacio no divisible” (&nbsp;) y “guión alto” (&shy;), podemos definir dónde debe dividirse una palabra.

Además del diseño y la tipografía, las imágenes adaptativas son una parte importante del diseño responsivo. Obviamente, no tendría sentido cargar una imagen de 1920 píxeles de longitud en una pantalla de solo 400 píxeles de ancho. Por un lado, la imagen grande tendría que reducirse en el navegador, utilizando una buena cantidad de potencia de cálculo. Además, el tamaño del archivo de la imagen aumenta cuadriculadamente con el tamaño de su lado más largo.

Una imagen con dimensiones de 1920 x 1080 píxeles ocupará cuatro veces más espacio que una de 960 x 540 píxeles. Además, la imagen tardará mucho más en cargarse en un dispositivo móvil. Con todo esto, está claro que las imágenes no adaptativas tienen un efecto muy negativo en el rendimiento y la usabilidad de una web.

La introducción de HTML5 trajo consigo dos nuevos atributos para la etiqueta <img>. Los atributos srcset y sizes se utilizan para definir varios archivos para una imagen, también denominados “activos”. Cada archivo individual se adjunta a la consulta de un elemento multimedia CSS. De este modo, el navegador puede cargar una imagen de la lista de activos disponibles que sea óptima para el dispositivo en cuestión.

Veamos un breve ejemplo. El siguiente código HTML define una imagen para la que hay dos activos que se han definido con srcset: uno con una longitud de 480 píxeles y otro con una longitud de 800 píxeles. También se ha determinado mediante tamaños que la imagen de 480 píxeles debe utilizarse en pantallas con una anchura de hasta 600 píxeles. En caso contrario, el navegador debería cargar la imagen de 800 píxeles.

Tradicionalmente, las pantallas eran más anchas que altas. Hoy en día, las pantallas de los smartphones son más altas que anchas. Las imágenes en formato apaisado aparecen relativamente pequeñas en las pantallas de los smartphones o cualquier otra pantalla en formato vertical. Para obtener un mejor resultado, debes utilizar una imagen cuadrada o en formato vertical que hayas recortado tú mismo. La elección de los distintos cortes de una imagen se denomina “dirección artística”. Esto se puede implementar con el elemento HTML5 <picture>. El elemento <picture> permite definir varias imágenes equivalentes para diversos casos de uso.

Veamos un ejemplo. El siguiente código HTML define un elemento <picture> que establece varios activos para el formato horizontal y vertical. En ambos casos, hay diferentes versiones optimizadas para varios tamaños de pantalla:

Tradicionalmente, la navegación de una página web se muestra en la parte superior de la página, normalmente como una lista horizontal de menús con submenús que se abren al pasar el ratón. Este tipo de navegación es claramente inadecuado para los dispositivos móviles: no hay suficiente espacio y no hay ratón.

Hay varios enfoques para abordar la navegación en los dispositivos móviles. Todos ellos ahorran espacio y no requieren un ratón. La atención del usuario suele dirigirse a la navegación con una animación. Los enfoques más populares para la navegación responsiva incluyen:

• El icono “hamburger menu” (tres líneas horizontales paralelas): este elemento se toca para activar el menú.
• Navegación “Off canvas”: el menú se desliza desde el borde de la pantalla y empuja el contenido actual de la pantalla hacia un lado.