¿Qué es el Diseño Responsivo?

No hace mucho tiempo que los diseñadores no necesitaban preocuparse por cómo se veían los sitios web en teléfonos móviles y tabletas. Los teléfonos aún no eran realmente prácticos para la visualización web y, antes del iPad, las tabletas eran más una novedad que una necesidad.

Obviamente, todo eso ha cambiado, y la mayoría de los expertos en tecnología predicen que en los próximos años, probablemente más temprano que tarde, la navegación móvil superará a la navegación de escritorio como la forma dominante de ver la Web.

Con una gama en constante evolución de dispositivos y tamaños de pantalla, incluidas consolas de videojuegos y televisores con Internet, las viejas formas de diseño web simplemente ya no están a la altura. Y dado que las empresas se dan cuenta de la necesidad de optimizar su experiencia en línea para los usuarios móviles, los diseñadores que no se adapten se quedarán atrás.

Nota del editor: la siguiente es una introducción para principiantes al diseño receptivo que no está destinada a diseñadores web más experimentados.

Los componentes principales del diseño receptivo

Ahí es donde entra el Responsive Web Design, contenido y/o maquetación que se adapta automáticamente al tamaño de la pantalla en la que se visualiza. En su forma más básica, los tres elementos principales de Responsive Design son una cuadrícula flexible, imágenes flexibles y Media Queries, este último introducido como parte de CSS3s. Más sobre esos en un momento.

Rejillas Flexibles

Las cuadrículas flexibles son básicamente temas y plantillas en los que los elementos de diseño se establecen en porcentajes en lugar de píxeles. Con porcentajes como unidad de medida, eso significa que un elemento diseñado al 50% siempre ocupará la mitad de la pantalla, sin importar cuán grande o pequeña sea la pantalla.

Imágenes flexibles

En su forma más básica, las imágenes flexibles no podrían ser más fáciles de crear escribiendo una regla simple que establece:

 img { max-width: 100%; }

Esencialmente, esto significa que si un elemento es más grande que su contenedor, la regla lo obliga a coincidir con el ancho de ese contenedor. Y dado que los navegadores modernos cambian el tamaño de las imágenes proporcionalmente, la relación de aspecto de la imagen también se conserva. Además, la regla del 100% también se puede usar para casi todos los demás elementos, como videos incrustados.

La consulta de los medios

Desde la introducción de tipos de medios en CSS 2.1, las hojas de estilo han sido mucho más inclusivas para dispositivos móviles y otros dispositivos. Los tipos de medios esencialmente permiten diseñar para apuntar a clases específicas de dispositivos web, con esos tipos que incluyen dispositivos portátiles, de pantalla y de televisión. Pero con poca estandarización entre dispositivos y poco apoyo de los fabricantes de dispositivos, los tipos de medios nunca estuvieron a la altura de su potencial.

Las consultas de medios están a la altura de ese potencial y algo más. Pero en lugar de preocuparse por el tipo de dispositivo como lo hacen los tipos de medios, las consultas de medios analizan las capacidades del dispositivo.

Una consulta de medios simple podría verse así:

Los dos componentes de la consulta son el tipo de medio, establecido como pantalla, y luego la consulta real (max-device-width: 480px) , que básicamente pregunta si el ancho del dispositivo es de 480 px o menos. Si ese es el caso, el dispositivo carga generic.css. De lo contrario, se ignora el vínculo, al igual que los demás, hasta que se identifica la resolución correcta y se carga la hoja de estilo adecuada.

Más que solo resolución

Pero la resolución no es de ninguna manera el único elemento de diseño que se puede controlar mediante el uso de Media Queries. El ancho y la altura de la ventana del navegador, la orientación horizontal y vertical, incluso el diseño, son algunos de los otros parámetros que se pueden configurar.

Por ejemplo, si Media Query detecta que un dispositivo es un teléfono inteligente, un diseño que puede cargarse mostrando tres columnas con un área de texto y dos barras laterales verticales en la pantalla de una computadora podría cargarse en la pantalla del teléfono inteligente como un área de texto de ancho completo con el dos barras laterales como elementos horizontales debajo.

Una mentalidad flexible

Por supuesto, un requisito clave para el diseño flexible son los diseñadores con una mentalidad de diseño flexible. Desafortunadamente, la mayoría de las páginas web aún no son tan amigables en los dispositivos móviles, principalmente porque la mayoría de los diseñadores aún diseñan solo para el escritorio con teléfonos inteligentes y tabletas como una idea de último momento. Pocos diseñadores abordan el diseño con múltiples plataformas en mente.

Si bien hay una curva de aprendizaje al incorporar Media Queries en las hojas de estilo, es la transición de diseñar con píxeles a diseñar con porcentajes lo que detiene a algunos diseñadores web. En realidad, sin embargo, no hay mucha diferencia en el diseño con porcentajes, y también es más fácil.

Considere, por ejemplo, la diferencia entre asignar anchos de 100% y 100 píxeles a dos elementos idénticos. En uno, puede estar seguro de que el elemento llenará la pantalla, ya sea la pantalla de una computadora de escritorio, una computadora portátil o un iPhone. Pero un elemento de 100 píxeles de ancho sería grande en una pantalla de iPhone de 480 píxeles, pero comparativamente pequeño en una pantalla de escritorio con una resolución de 1600 × 900.

Diseño receptivo significa negocio

Para las empresas, la razón principal para implementar un diseño receptivo es obvia. Cuanto más fácil sea para los clientes potenciales navegar y encontrar lo que buscan, mayor será la tasa de conversión. Pero para muchos diseñadores, el diseño receptivo para un sitio web comercial generalmente significa simplemente reducir el tamaño del contenido para que se ajuste a una pantalla más pequeña. Cualquiera que haya pasado algún tiempo desplazándose y acercándose y alejándose para encontrar la información que busca sabe que una versión en miniatura de un sitio web no es la respuesta.

Otra forma en que las empresas y los diseñadores han abordado el tema del diseño para un dispositivo móvil ha sido crear un sitio separado para diferentes dispositivos con redireccionamientos automáticos según el dispositivo. Esto permite proporcionar la mejor interfaz y evitar la carga lenta causada por JavaScript e imágenes grandes.

Pero hay varios inconvenientes en este enfoque. Ciertamente, uno de ellos es el costo de crear y mantener múltiples sitios y coordinar el contenido entre esos sitios. Y, por supuesto, hay otro nuevo sitio que se construirá cuando salga un nuevo dispositivo. Afortunadamente, el diseño receptivo, si se realiza correctamente, puede abordar casi todos los problemas del diseño para dispositivos móviles.