¿Qué es el diseño re­s­po­n­si­vo?

El diseño re­s­po­n­si­vo, también diseño re­s­po­n­si­ve, es un tipo de de­sa­rro­llo de páginas web que permite su óptima vi­sua­li­za­ción en distintos tipos de di­s­po­si­ti­vos finales. El término diseño re­s­po­n­si­vo es tan antiguo como la web móvil y se ge­ne­ra­li­zó en torno a 2013.

Antes de la llegada de la web móvil, el panorama de los di­s­po­si­ti­vos finales con acceso a Internet era re­la­ti­va­me­n­te homogéneo: existían los or­de­na­do­res po­r­tá­ti­les y los de sobremesa, que eran muy similares en cuanto a medios de entrada y salida. Ambos tipos de di­s­po­si­ti­vos 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 de­sa­rro­llar una página web que se vi­sua­li­za­ra co­rre­c­ta­me­n­te en cualquier di­s­po­si­ti­vo. La solución más sencilla era limitar el ancho de una página al mínimo común de­no­mi­na­dor. Un enfoque popular era mostrar las páginas con 800 píxeles de ancho y centradas o ju­s­ti­fi­ca­das 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 di­s­po­si­ti­vos.

Esto cambió con la llegada de los di­s­po­si­ti­vos móviles y la im­po­r­ta­n­te di­ve­r­si­fi­ca­ción de los di­s­po­si­ti­vos finales. Las pantallas de los sma­r­t­pho­nes y las tabletas difieren de las de los or­de­na­do­res de sobremesa en varios aspectos. Las di­me­n­sio­nes de los píxeles juegan ahora un papel im­po­r­ta­n­te y la re­so­lu­ció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 di­s­po­si­ti­vos se manejan con el dedo en lugar de con el ratón. Además de los teléfonos in­te­li­ge­n­tes y las tabletas, también han aparecido en el mercado grandes monitores de alta re­so­lu­ció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 re­s­po­n­si­va se ajusta al espacio di­s­po­ni­ble en una pantalla. A menudo se habla de “espacio en pantalla” en este contexto. Una página web debe verse bien en todos los di­s­po­si­ti­vos y ga­ra­n­ti­zar una ex­pe­rie­n­cia de usuario óptima (UX).

El diseño re­s­po­n­si­vo abarca una amplia gama de te­c­no­lo­gías y enfoques que se combinan para de­sa­rro­llar una página web to­ta­l­me­n­te re­s­po­n­si­va. 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 re­s­po­n­si­va ofrece varias ventajas. La principal co­n­si­de­ra­ción es la ex­pe­rie­n­cia del usuario (UX). En teoría, se puede im­ple­me­n­tar una buena UX sin diseño re­s­po­n­si­vo, pero eso re­que­ri­ría una página móvil propia o el uso de Ja­va­S­cri­pt. En de­fi­ni­ti­va, este tipo de enfoque sería mucho más complejo que un diseño adaptable basado en CSS y re­que­ri­ría más ma­n­te­ni­mie­n­to.

El diseño de una página web desempeña un papel im­po­r­ta­n­te en la forma en que los vi­si­ta­n­tes perciben la in­fo­r­ma­ción pre­se­n­ta­da en la página. Un buen diseño refleja la identidad de la or­ga­ni­za­ción que está detrás de la página web y ayuda a conectar al usuario con su marca. Los vi­si­ta­n­tes deben tener una ex­pe­rie­n­cia positiva al visitar su página web. Veamos dos ejemplos de la im­po­r­ta­n­cia del diseño re­s­po­n­si­vo para la ex­pe­rie­n­cia del usuario:

• Ima­gi­ne­mos que un título llena toda la pantalla en un di­s­po­si­ti­vo móvil. Sin embargo, en la versión de es­cri­to­rio, el mismo en­ca­be­za­mie­n­to con el mismo tamaño de letra no destaca en absoluto. En la versión de es­cri­to­rio, el en­ca­be­za­do debe mostrarse más grande para captar la atención del visitante.
• Ima­gi­ne­mos 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 mi­nia­tu­ras. En la versión de es­cri­to­rio, la barra lateral limita el ancho de los artículos, fa­ci­li­ta­n­do la lectura de la página. En un di­s­po­si­ti­vo móvil, la barra lateral ocuparía casi la mitad de la pantalla. Por tanto, el diseño debe ser diferente en los di­s­po­si­ti­vos móviles y la barra lateral debe aparecer debajo de los artículos.

En general, una página web no re­s­po­n­si­va se mostrará en la pequeña pantalla de un di­s­po­si­ti­vo móvil exac­ta­me­n­te igual que en un ordenador de sobremesa, solo que más pequeño. Esto obliga al usuario a ampliar las partes in­di­vi­dua­les de la página. Por lo tanto, es mucho mejor ofrecer una versión op­ti­mi­za­da. Un par de ejemplos:

• En la versión de es­cri­to­rio, un botón de una web se clica con el ratón. Pero en los di­s­po­si­ti­vos 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.
• Ima­gi­ne­mos que tenemos un fo­r­mu­la­rio en nuestra página web. No­r­ma­l­me­n­te, el texto contenido en el fo­r­mu­la­rio está acomodado para que se pueda leer fá­ci­l­me­n­te 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 di­s­po­si­ti­vos 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 di­s­po­si­ti­vos móviles.

Cada vez son más los usuarios que navegan por Internet en di­s­po­si­ti­vos móviles. Decidirse por una página web re­s­po­n­si­va tiene im­po­r­ta­n­tes de­s­ve­n­ta­jas. Algunos ejemplos notables son:

• Malas tasas de co­n­ve­r­sión y altas tasas de rebote, debido a un diseño desop­ti­mi­za­do y una mala ex­pe­rie­n­cia de usuario.
• Mal po­si­cio­na­mie­n­to 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 re­n­di­mie­n­to, debido a los largos tiempos de carga de los recursos que no han sido op­ti­mi­za­dos.

El diseño re­s­po­n­si­vo incluye varios enfoques y te­c­no­lo­gías. Suelen existir varias so­lu­cio­nes para los di­fe­re­n­tes es­ce­na­rios que puedan surgir. El de­sa­rro­llo todavía está en proceso de cambio.

Desde los inicios de Internet, im­ple­me­n­tar 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 pa­r­ti­cu­lar los tipos de elementos block, inline e inline-block. Los elementos de bloque ocupan todo el ancho di­s­po­ni­ble 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 re­le­va­n­tes en el diseño re­s­po­n­si­vo.

La im­ple­me­n­ta­ción de un diseño suele requerir que los elementos del bloque se coloquen uno al lado del otro. Hay varias formas de co­n­se­gui­r­lo. 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 di­me­n­sio­nes 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: ima­gi­ne­mos 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 im­ple­me­n­tar fá­ci­l­me­n­te el siguiente diseño re­s­po­n­si­vo:

• 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 di­s­po­ni­ble.
• Vi­sua­li­za­ció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 di­s­po­ni­ble.
• En una pantalla pequeña: todos los elementos aparecen uno debajo de otro en una línea. Cada elemento ocupa el 100% del espacio di­s­po­ni­ble.

Este es un ejemplo de im­ple­me­n­ta­ción con clases del marco CSS re­s­po­n­si­vo Tachyons. Para cada co­n­te­ne­dor de vista previa definimos las clases “w-100 w-50-m w-25-l”. Los cuatro co­n­te­ne­do­res de vista previa están en un co­n­te­ne­dor eti­que­ta­do como “flex-wrap”.

A veces tiene sentido mostrar un elemento solo en pantallas de un de­te­r­mi­na­do tamaño. Por ejemplo, los datos tabulados se muestran como una tabla en HTML uti­li­za­n­do la etiqueta <table>. Sin embargo, de­pe­n­die­n­do del tamaño de la tabla, puede ser difícil adaptarla co­rre­c­ta­me­n­te para una pantalla pequeña. Ahí es donde entra en juego un sencillo truco: indicar al usuario que gire su di­s­po­si­ti­vo para crear el espacio su­fi­cie­n­te para que se muestre la tabla. Este texto, por supuesto, solo debe aparecer en los di­s­po­si­ti­vos de pantalla pequeña cuando el di­s­po­si­ti­vo se mantiene ve­r­ti­ca­l­me­n­te.

Los elementos pueden ocultarse fá­ci­l­me­n­te uti­li­za­n­do la propiedad CSS display: none. Con una Consulta de medios CSS especial, se puede consultar tanto el ancho de la pantalla como la orie­n­ta­ción del di­s­po­si­ti­vo. 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 ex­pe­rie­n­cia 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 re­s­po­n­si­vo para im­ple­me­n­tar esto.

El in­gre­die­n­te básico es el elemento CSS rem (“root element” o “elemento raíz”), que vincula el tamaño de la fuente de un elemento pro­po­r­cio­na­l­me­n­te 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”, es­ta­ble­ce­re­mos los tamaños de las fuentes para las pantallas pequeñas:

A co­n­ti­nua­ción, aju­s­ta­re­mos el tamaño de la fuente del elemento HTML para pantallas más grandes. Dado que el tamaño de los en­ca­be­za­dos H1 se define mediante rem, se escalará au­to­má­ti­ca­me­n­te:

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 im­ple­me­n­tar puntos de in­te­rru­p­ción se­le­c­ti­vos o utilizar la función CSS calc para es­ta­ble­cer un tamaño de fuente mínimo.

Para optimizar los en­ca­be­za­dos que llenan toda la pantalla en di­s­po­si­ti­vos pequeños, hay un enfoque que no utiliza CSS. Se supone que los en­ca­be­za­dos atraen la vista hacia ellos. Esto facilita que el usuario entienda rá­pi­da­me­n­te el contenido de una página. Sin embargo, esto a veces puede dar lugar a problemas de vi­sua­li­za­ción, es­pe­cia­l­me­n­te cuando se trata de palabras más largas. Con las in­di­ca­cio­nes 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 ti­po­gra­fía, las imágenes ada­p­ta­ti­vas son una parte im­po­r­ta­n­te del diseño re­s­po­n­si­vo. Ob­via­me­n­te, 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, uti­li­za­n­do una buena cantidad de potencia de cálculo. Además, el tamaño del archivo de la imagen aumenta cua­dri­cu­la­da­me­n­te con el tamaño de su lado más largo.

Una imagen con di­me­n­sio­nes 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 di­s­po­si­ti­vo móvil. Con todo esto, está claro que las imágenes no ada­p­ta­ti­vas tienen un efecto muy negativo en el re­n­di­mie­n­to y la usa­bi­li­dad de una web.

La in­tro­du­c­ció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 de­no­mi­na­dos “activos”. Cada archivo in­di­vi­dual se adjunta a la consulta de un elemento mu­l­ti­me­dia CSS. De este modo, el navegador puede cargar una imagen de la lista de activos di­s­po­ni­bles que sea óptima para el di­s­po­si­ti­vo 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 de­te­r­mi­na­do mediante tamaños que la imagen de 480 píxeles debe uti­li­zar­se en pantallas con una anchura de hasta 600 píxeles. En caso contrario, el navegador debería cargar la imagen de 800 píxeles.

Tra­di­cio­na­l­me­n­te, las pantallas eran más anchas que altas. Hoy en día, las pantallas de los sma­r­t­pho­nes son más altas que anchas. Las imágenes en formato apaisado aparecen re­la­ti­va­me­n­te pequeñas en las pantallas de los sma­r­t­pho­nes 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 im­ple­me­n­tar con el elemento HTML5 <picture>. El elemento <picture> permite definir varias imágenes equi­va­le­n­tes para diversos casos de uso.

Veamos un ejemplo. El siguiente código HTML define un elemento <picture> que establece varios activos para el formato ho­ri­zo­n­tal y vertical. En ambos casos, hay di­fe­re­n­tes versiones op­ti­mi­za­das para varios tamaños de pantalla:

Tra­di­cio­na­l­me­n­te, la na­ve­ga­ción de una página web se muestra en la parte superior de la página, no­r­ma­l­me­n­te como una lista ho­ri­zo­n­tal de menús con submenús que se abren al pasar el ratón. Este tipo de na­ve­ga­ción es cla­ra­me­n­te inade­cua­do para los di­s­po­si­ti­vos móviles: no hay su­fi­cie­n­te espacio y no hay ratón.

Hay varios enfoques para abordar la na­ve­ga­ción en los di­s­po­si­ti­vos móviles. Todos ellos ahorran espacio y no requieren un ratón. La atención del usuario suele dirigirse a la na­ve­ga­ción con una animación. Los enfoques más populares para la na­ve­ga­ción re­s­po­n­si­va incluyen:

• El icono “hamburger menu” (tres líneas ho­ri­zo­n­ta­les paralelas): este elemento se toca para activar el menú.
• Na­ve­ga­ción “Off canvas”: el menú se desliza desde el borde de la pantalla y empuja el contenido actual de la pantalla hacia un lado.