¿Qué es el diseño responsive?

Diseño responsive: definición y origen

El término Responsive Web Design lo acuñó en 2010 el diseñador web Ethan Marcotte. La idea: en lugar de crear una versión distinta para cada dispositivo, existe un único sitio web cuya disposición reacciona de forma flexible al espacio disponible.

Hoy, el diseño responsive es el estándar. Una gran parte de las visitas se realiza desde smartphones, y Google evalúa los sitios web principalmente por su versión móvil (indexación Mobile First). Por eso, una página que solo se ve bien en el escritorio desaprovecha alcance y solicitudes.

Así funciona técnicamente el diseño responsive

La base la forman tres elementos: cuadrículas flexibles, que se dividen en unidades relativas en lugar de píxeles fijos; imágenes flexibles, que nunca superan el ancho de su contenedor; y media queries de CSS, que cambian la disposición a partir de determinados anchos de pantalla, los llamados breakpoints.

Técnicas modernas como CSS Grid, Flexbox y Container Queries hacen que los diseños sean aún más adaptables. También es importante la metaetiqueta viewport, para que los navegadores móviles no muestren la página como una versión de escritorio reducida.

• Mobile First: diseñar primero para pantallas pequeñas y después ampliar
• Botones lo bastante grandes para usarlos con el dedo
• Tamaños de letra legibles sin necesidad de hacer zoom
• Servir las imágenes en varias resoluciones
• Una navegación que siga siendo accesible con una sola mano

Ventajas y límites

Un sitio web responsive implica una sola base de código, una URL por contenido y un único esfuerzo de mantenimiento. Esto ahorra costos frente a versiones móviles separadas y evita contenidos duplicados. Los visitantes reciben la misma información en cualquier dispositivo. Además, los cambios en contenidos o funciones solo deben implementarse una vez y están disponibles de inmediato en todos los dispositivos.

Los límites aparecen cuando las situaciones de uso difieren mucho. Una tabla compleja o un dashboard extenso no se pueden comprimir sin más al ancho de un teléfono. En estos casos se necesitan soluciones móviles propias, como tarjetas desplegables en lugar de tablas, o bien una Progressive Web App como complemento.

Ejemplo práctico: cuándo importa espe­cial­mente el diseño responsive

Un restaurante recibe muchas visitas de personas que están fuera de casa: buscan el horario, la carta y el número de teléfono, casi siempre en el smartphone. Una página responsive muestra esta información en la parte superior de la versión móvil, con botón de llamada y ruta con un solo toque, mientras que en el escritorio queda más espacio para imágenes y ambiente. En las tiendas online rige el mismo principio para el carrito y el checkout: los pasos más importantes deben funcionar sin esfuerzo en el móvil.

Así se desarrolló, por ejemplo, el sitio web de Oki's Knusperhähnchen en Germersheim, optimizado para móviles. Es importante no comprobarlo solo en el simulador del navegador, sino también en dispositivos reales con distintos tamaños de pantalla. Nano Concepts desarrolla sitios web y aplicaciones web siempre de forma responsive y los prueba en los dispositivos y navegadores más habituales.