Una web responsive es aquella que se adapta al tamaño de la pantalla desde la que se visita. Cada vez nos conectamos más a internet desde dispositivos que no son ordenadores y debemos facilitar una buena experiencia.
En España, el 94% de las personas mayores de 14 años se conectan a internet desde el móvil.
Estudio General 2020 de AIMC
Responsive es un anglicismo y lo podemos ver traducido como diseño web adaptable, diseño web adaptativo, incluso diseño web responsivo. El diseño responsive se basa en que los elementos que forman parte de la página, cambian de tamaño, posición o visibilidad; dependiendo de la pantalla. También afecta a los efectos aplicados a estos elementos. Hay efectos que se ejecutan dependiendo de la posición del ratón y otros basados en la pantalla táctil.
En los últimos años el diseño web ha sido mobile-first. Se diseña pensando primero en la pantalla del móvil. La pantalla es más pequeña y la manera de navegar con móvil es diferente. Debemos ser cuidadosos con cada elemento que aparezca en pantalla.
Indice de contenidos
¿Por qué necesitamos que nuestra web sea responsive?
Mejor accesibilidad
El concepto de accesibilidad está relacionado con el uso universal de la web. La accesibilidad trabaja el acceso de personas con cualquier discapacidad y el acceso desde cualquier lugar y cualquier dispositivo.
Mejor usabilidad
Una web responsive facilita su uso desde cualquier dispositivo y adapta su funcionamiento a este.
Para facilitar el acceso a los usuarios de móvil
La visita de páginas web desde el móvil es la más elevada y sigue creciendo. Debemos hacer que el usuario lo pueda hacer sin problemas.
Se mejora la experiencia de usuario
Supongo que tú también te has encontrado páginas web que no se adaptan, que no son responsive. Haces la búsqueda en Google, accedes y encuentras que todo es diminuto. Tienes que hacer zoom y desplazarte por la pantalla para encontrar cualquier cosa.
Se mejora nuestra imagen de marca
En un mundo con tanta competencia, tu diferencia puede ser que el usuario tenga una buena experiencia. Pon ese factor a tu favor.
Mejor velocidad de carga
Si pensamos en el móvil a la hora de diseñar, tenemos que tener en cuenta que la velocidad de la red en móvil es más lenta.
Ayuda al SEO
El resultado de todo lo anterior, nos ayudará en el posicionamiento. Google valora tu trato al usuario.
Mejores resultados
No deja de ser una consecuencia de todo lo anterior. Si mejoramos la accesibilidad, tendremos más visitas. Incrementando la usabilidad, daremos mejor experiencia al usuario, navegará más y puede que vuelva. Cuando Google sabe esto, nos mostrará en las primeras posiciones.
Es evidente que nadie va a comprar nada en una web que es difícil de usar. El visitante huirá con una mala imagen nuestra y, evidentemente, ni comprará hoy ni volverá.
Cómo hacemos que una web sea responsive
Esto se consigue con CSS (Cascading Style Sheets) u Hojas de Estilo en Cascada. El contenido de la web se estructura con HTML. La apariencia visual se define con CSS.
Con la tercera versión de CSS, se crearon las llamadas media-queries y W3C recomienda su uso desde 2012.
Las media-queries son una serie de condiciones que se añaden en el código CSS de la web para definir diferentes estilos, dependiendo de varios factores como si es para pantalla o imprimir, tamaño de pantalla, orientación de la pantalla y otros.
Como puedo hacer mi web responsive
Lo más probable es que tu web esté creada con un CMS. La mayoría de temas actuales ya son responsive, busca un tema que te guste y actualízate.
Cambiar de tema no es tan sencillo como elegir otro, tendrás que adaptar tu contenido actual al nuevo tema.
Si eres un valiente, empóllate CSS, aprende el uso de media-queries y disponte a modificar tu código. ¡Ánimo!
Un poco de historia de las web responsive
En los primeros tiempos, solo había un tipo de web. Con la llegada de los smartphones, hubo una transición en que hubo varias tendencias. Una de ellas era la creación de sitios diferentes para móvil u ordenador.
A partir de la recomendación de las media-queries, se desarrolló el concepto de diseño responsive tal como he explicado. Una única web que se adapta al dispositivo.
Parece que es algo que ha llegado para quedarse y si no tienes ya una web responsive, prepárate para actualizarla o verás como tu relevancia online va descendiendo.
