Cuando se profundiza en el ámbito del diseño web y todo aquello que guarda relación con el mismo, resulta cada vez más necesario conocer entre otros múltiples conceptos, qué es el diseño web responsive.
En referencia al diseño web responsive, se trata de un diseño caracterizado por la adaptabilidad del propio diseño de la página o sitio web para lograr una visión adecuada en diferentes tipos de dispositivos tecnológicos. Dentro de esta amplia variedad de dispositivos tecnológicos encontraríamos algunos como son los siguientes:
- Diversidad de teléfonos móviles de última generación.
- Tabletas
- Ordenadores de sobremesa.
- Otros dispositivos tecnológicos que cuentan con capacidad de conectarse a Internet, como televisores, e-books, etc.
La principal diferencia entre estos dispositivos a la hora de mostrar el contenido de una página web, es el tamaño de la ventana de visualización. Cada dispositivo posee un tamaño distinto, así como una resolución distinta, lo que hace que cada uno tenga unas necesidades para que la web se visualice correctamente sin perder funcionalidad ni usabilidad.
Una razón fundamental
Puede gustar más o menos a los diseñadores, pero lo cierto es que cada vez resulta más habitual acceder a una gran variedad de páginas en Internet desde todo tipo de dispositivos electrónicos ajenos al clásico ordenador de sobremesa, que hasta hace no tantos años era prácticamente el único dispositivo con el que se accedía a Internet. Esta es la razón fundamental por la que se debe contar con un diseño web responsive en cuanto a todo sitio web. Así, una gran cantidad de usuarios podrán tener acceso a la web en las mejores condiciones desde por ejemplo, teléfonos móviles o tabletas, sin empeorar la experiencia de usuario.
¿Cómo se logra un diseño web responsive?
La posibilidad de lograr un diseño web responsive resulta mucho más sencilla de lo que puede parecer. Simplemente se debe realizar unos cuantos ajustes para un redimensionamiento y colocación de acuerdo a todos aquellos elementos que permitan adaptar la web a las medidas de los dispositivos tecnológicos para conseguir una visualización adecuada a las necesidades de estos dispositivos. Esto se consigue apoyándose en la web semántica, es decir, cada elemento dentro de la etiqueta HTML que le corresponda. Con la llegada de HTML5 ha crecido el número de etiquetas que describen la naturaleza de cada elemento, facilitándole la vida a los navegadores para aplicar estilos y saber separar las partes de una página web. Hoy en día la mayoría de navegadores ya soportan HTML5, aunque hay que tener en mente que habrá usuarios (pocos) que todavía usen alguna versión antigua del navegador que no soporte HTML5. El otro componente que será útil para una web responsive será las hojas de estilo CSS, donde se puede definir distintos estilos dependiendo del medio donde se muestre. De esta manera, se obtiene un efecto líquido, es decir, como si los componentes de la web fueran un líquido, como el agua, y se adapten a la forma y dimensiones del contenedor, como bien se ilustra en esta imagen, aunque de momento todavía no se puede navegar por Internet desde una botella o una jarra :).
Así, no solamente se ganará en visibilidad en cuanto a tráfico, sino que se proporcionará a los diversos usuarios una experiencia favorable cuando visiten la web. De hecho, recientemente (concretamente desde el pasado 21 de abril) el motor de búsqueda de Google cambió su algoritmo para dar preferencia a las páginas web responsive que se adapten bien a los dispositivos móviles en las búsquedas que se realicen desde estos dispositivos. Para comprobar si una web cumple con los requisitos, Google ha habilitado la siguiente web de Prueba de optimización para móviles.
La web responsive podría parecer una moda en sus inicios, pero con pasos como este por parte de Google, se aprecia la importancia que tiene para un Internet cada vez más global, con cada vez más dispositivos de todos los tamaños capaces de navegar por webs, de manera que no conviene cerrarse puertas para los usuarios que puedan llegar desde cualquier dispositivo. Y tú, ¿has adaptado ya tu web?