¿Qué es un diseño web responsive?

Un diseño web responsive que cuenta con un contenido adaptado a todo tipo de pantallas, necesita menos tiempo para cargar, por lo que capta a los usuarios más rápidamente. El aumento de los usuarios de internet que se conectan desde los teléfonos móviles Smartphone y Tabletas, motivan un cambio en el diseño de páginas web denominado “Responsive Design”.

Cuando hablamos de versión móvil nos referimos an un sitio web diseñado específicamente para dispositivos móviles teniendo en cuenta ciertos factores como el tamaño de la pantalla, las formas de interaccionar del usuario (táctil, teclado, etc.). Cuando hablamos de diseño web responsive nos referimos an una web pensada para que su visualización sea correcta en todo tipo de dispositivos ya que es capaz de detectar el tamaño de la ventana del ordenador, tablet móvil del usuario y adaptarse an este mediante el uso de unos módulos de CSS llamados media queries.

Las media queries nos permiten practicar ajustes increíblemente precisos cuando nuestras páginas cambian de forma: podemos aumentar el área clickeable de nuestros links para pantallas más pequeñas, para cumplir mejor con la Ley de Fitts en los dispositivos táctiles; mostrar esconder elementos de manera selectiva que pueden mejorar la navegación de una página; podemos incluso practicar una tipografía responsiva que gradualmente altere el tamaño y espaciado de nuestro texto, optimizando la experiencia de lectura para la pantalla correspondiente.

La misma información, datos, imágenes y videos que se ven en una desktop se ajustarán an una pantalla de dispositivos móviles con la seguridad de que la experiencia de navegación será agradable, amistosa con el usuario y con las mismas herramientas que contienen los sitios web. En lo que respecta a Google, es posible que determinemos que una página no está optimizada para dispositivos móviles debido a que se requiere este tipo de interacción en un dispositivo móvil.

A manera de conclusión, vimos que es perfectamente posible crear experiencias de navegación por sitios web multidispositivo, es decir, que se puedan usar con un diseño y unas herramientas optimizadas para diferentes tamaños de pantalla, si aprovechamos la técnica de media queries para crear esquemas tipográficos adaptables, layouts y grillas flexibles, elementos visuales como imágenes y videos líquidos, y herramientas de navegación optimizadas para el uso en pantallas táctiles.