El diseño responsive describe el enfoque de desarrollar un sitio web que se muestre de manera óptima en diferentes dispositivos finales. El término diseño receptivo es tan antiguo como la web móvil y ganó notoriedad alrededor de 2013
Diseño responsive de un vistazo
Antes de la llegada de la web móvil, el panorama de los dispositivos habilitados para Internet era muy homogéneo: había computadoras de escritorio o portátiles que eran bastante similares en términos de medios de entrada y salida. Ambos tipos de dispositivos tenían teclado y mouse o trackpad, y una pantalla de aproximadamente 1,000 a 2,000 píxeles de ancho.
En aquel entonces, no se necesitaba un esfuerzo excesivo para desarrollar un sitio web que se mostrara correctamente en la mayoría de los dispositivos utilizados. La solución más simple fue limitar el ancho de los lados al mínimo común denominador.
Un enfoque popular ha sido hacer que las páginas tengan 800 píxeles de ancho y estén centradas o alineadas a la izquierda. Podría haber habido un poco más de espacio en blanco en una pantalla más grande, pero las páginas eran legibles en todos los dispositivos.
Con la llegada de los dispositivos móviles, la situación cambió y hubo una profunda diversificación de dispositivos finales. Las pantallas de los teléfonos móviles y las tabletas se diferencian en varios aspectos: por un lado, las dimensiones de los píxeles juegan un papel, por otro lado, con la aparición de las pantallas retina, también llegó la resolución física (“píxeles por pulgada”,).
Además, estos dispositivos no se manejan con un ratón, sino con el dedo. Hoy en día, se agregan monitores grandes y de alta resolución, por lo que un sitio web moderno debe funcionar en anchos de pantalla de 320 píxeles a más de 4000 píxeles.
Una web responsive se adapta al espacio disponible en pantalla. Esto también se conoce como “bienes inmuebles de pantalla“. El sitio web debe verse bien en todos los dispositivos y ofrecer una experiencia de usuario (UX) óptima.
El diseño web receptivo abarca una variedad de técnicas y enfoques que se combinan para crear un sitio web totalmente receptivo. Estos incluyen en particular:
- Elementos HTML5 como imagen y atributos como srcset y tamaños
- Consultas de medios CSS
- Unidades CSS
- El uso de múltiples activos de un recurso.
- El enfoque móvil primero
¿Por qué un sitio web debe ser responsive?
El desarrollo de un sitio web responsivo ofrece varias ventajas. El foco está en la experiencia del usuario. En principio, una buena experiencia de usuario también se puede implementar sin un diseño receptivo.
Sin embargo, esto requiere su propio sitio móvil o el uso de JavaScript. En general, esto suele ser mucho más complejo que el enfoque de diseño web receptivo basado en CSS y lleva a un mayor esfuerzo para mantener las diferentes versiones del sitio.
Diseño web receptivo para un diseño óptimo
El diseño de un sitio web es uno de los factores clave que influyen en cómo un visitante del sitio web percibe la información presentada. Un buen diseño refleja la identidad de la organización detrás del sitio web y ayuda a vincular al visitante con la marca.
El visitante del sitio debe sentirse cómodo en el sitio web y tener una experiencia positiva. Veamos dos ejemplos de cómo el diseño web receptivo contribuye a una experiencia de usuario óptima:
- Digamos que un título ocupa toda la pantalla en un dispositivo móvil. Sin embargo, el título en la versión de escritorio con el mismo tamaño de fuente apenas se nota. En el escritorio, el título debe ser más grande para captar la atención del visitante.
- Otro ejemplo: imagina un blog donde se muestra una barra lateral a la derecha del artículo. La barra lateral contiene enlaces a otros artículos con pequeñas imágenes de vista previa. En la versión de escritorio, la barra lateral ayuda a limitar el ancho del artículo y, por lo tanto, contribuye a la legibilidad. Sin embargo, en un dispositivo móvil, la barra lateral cubriría casi la mitad de la pantalla. El diseño debe alternarse en dispositivos móviles para que el contenido de la barra lateral aparezca debajo del artículo.
Diseño web receptivo para una experiencia de usuario óptima (UX)
En principio, un sitio web que no responde se muestra en la pantalla pequeña de un dispositivo móvil de la misma manera que en el escritorio, solo que mucho más pequeño. Esto obliga al usuario a hacer zoom en áreas individuales de la página. Así que es mejor ofrecer una versión optimizada. Algunos ejemplos:
- Se hace clic en un botón en un sitio web en el escritorio con el mouse. Sin embargo, un dispositivo móvil se maneja con el dedo. Por lo tanto, el botón debe ser más grande para la versión móvil y tener más distancia con respecto a otros elementos.
- Imagine un formulario en una página. Normalmente se le asigna un espacio interior (relleno) a través de CSS, para que el texto contenido sea fácil de leer y no toque los bordes del formulario. Un relleno de 20 píxeles a izquierda y derecha es normal y se ve bien en pantallas grandes. Pero en un dispositivo móvil con un ancho de pantalla de solo 320 píxeles, se pierden 40 de 320 píxeles: una octava parte. Si el formulario también tiene un margen, digamos 20 píxeles adicionales por página, se pierde el 25 por ciento del espacio disponible en el dispositivo móvil. Para evitarlo, se deben reducir las distancias en el dispositivo móvil.
¿Cuáles son los peligros de no hacer un sitio web responsivo?
Un gran porcentaje de usuarios hoy en día accede a contenidos web a través de dispositivos móviles. Hay desventajas reales y serias de no tener un sitio web totalmente receptivo. Estos incluyen en particular:
- Tasa de conversión deficiente y tasa de rebote alta causada por un diseño subóptimo y una experiencia de usuario disruptiva
- Mala clasificación en los motores de búsqueda, porque Google reconoce cuando los elementos están demasiado juntos
- Bajo rendimiento debido a la carga de recursos no optimizados, especialmente en dispositivos móviles
¿Qué aspectos del desarrollo web están influenciados por el diseño receptivo?
El diseño receptivo abarca diferentes enfoques y tecnologías. Por lo general, hay varias soluciones para los diferentes escenarios. El desarrollo todavía está en proceso de cambio.
Disposición Responsive
La implementación de diseños complejos en sitios web ha sido una ciencia en sí misma desde el comienzo de la World Wide Web. HTML conoce diferentes tipos de elementos que se comportan de manera diferente en relación con su diseño. En particular, existen los tipos de elementos block, inline e inline-block.
Los elementos de bloque ocupan todo el ancho disponible y se colocan apilados. Los elementos en línea solo ocupan el ancho realmente requerido por su contenido y se colocan uno al lado del otro.
Para implementar un diseño, generalmente debe colocar elementos de bloque uno al lado del otro. Para ello se utilizan varios métodos. Antes de la llegada de CSS, los diseños basados en tablas eran estándar y con CSS llegaron los diseños basados en flotantes.
Hoy en día, CSS Flexbox se usa para diseños simples basados en filas o columnas, y el módulo CSS Grid se usa para diseños complejos. En todos los casos, las dimensiones CSS relativas se utilizan para variar la cantidad de elementos que se muestran uno al lado del otro.
Para ilustrar esto, imagine una página con cuatro elementos de vista previa de artículos de blog. Cada uno de los elementos de vista previa contiene una miniatura, un título, un adelanto y el botón “Leer más”. Flexbox facilita la implementación del siguiente diseño receptivo:
- Visualización en pantalla grande: todos los elementos de vista previa uno al lado del otro en una fila. Cada uno de los elementos ocupa el 25 por ciento del espacio disponible.
- Visualización de la pantalla central: dos elementos de vista previa uno al lado del otro en dos filas. Cada uno de los elementos ocupa el 50 por ciento del espacio disponible.
- Visualización en pantalla pequeña: los cuatro elementos de vista previa en una línea uno debajo del otro. Cada uno de los elementos ocupa el 100 por ciento del espacio disponible.