«Hacer una web responsive está de moda. Y como todas las modas, la mayor parte de gente lo hace sin saber exactamente porqué»
Este término hace referencia al diseño web multidispositivo. Hoy en día los usuarios acceden a los sitios web desde diferentes dispositivos, ya sean ordenadores de sobremesa, portátiles, iPads, tablets Android o smartphones. Cada uno de estos dispositivos muestra el sitio web de una forma diferente, si esto ocurre así estamos ante una Web Responsive, es decir un sitio web capaz de adaptarse al dispositivo en el que se está visualizando.
El diseño responsive permite reducir el tiempo de desarrollo, evita los contenidos duplicados y aumenta la viralidad de los contenidos ya que permite compartirlos de una forma mucho más rápida y natural.
Para que una web sea capaz de adaptarse, la estructura de la página debe ser flexible, es decir, el diseño debe permitir que los anchos de pantalla sean modificables, por lo tanto, no podemos tener un ancho fijo en tablas o columnas y además debemos permitir que el número de columnas pueda disminuirse en función del tamaño de la pantalla del dispositivo desde el que se acceda.
También debemos tener en cuenta los elementos de navegación de la página, el menú de navegación no se debe mostrar de la misma forma en la versión de escritorio que en la versión móvil. La razón es, por un lado y de nuevo, el tamaño de la pantalla, y por otro, que para hacer clic, en teléfonos táctiles, utilizamos nuestros dedos y no un puntero. En un Smartphone la pantalla es bastante más pequeña que la de un ordenador de escritorio, un portátil o una tablet. Esta diferencia de tamaños nos obliga a que, por ejemplo, si un menú de navegación se ha diseñado de forma horizontal, en este caso se muestre de forma vertical. Además, como utilizamos nuestros dedos tenemos que diseñar botones lo suficientemente grandes para que puedas hacer click con facilidad. En relación al contenido hay que señalar además que cuanto más pequeña es la pantalla más relevancia adquieren los contenidos en comparación con los elementos de navegación. Es decir, los elementos de navegación cambian de posición para dejar paso al contenido, el usuario debe encontrarse con contenido útil cuando entra en la versión móvil de un sitio web.
El diseño responsivo se caracteriza por:
- Los diseños (layouts) e imágenes son fluidos y se adaptan a cada pantalla.
- Permite reducir el tiempo de desarrollo (no es necesario crear versiones móvil y de escritorio del sitio web).
- Evita los contenidos duplicados.
- Aumenta la viralidad de los contenidos.
Puntos a tener en cuenta al momento de crear una Web Responsive.
Hay que tener mucho cuidado a la hora de diseñar. Se recomienda diseñar con el patrón mobile-first (móvil primero) para evitar tener problemas de adaptación con las pantallas y evitar sobrecargar la página de elementos inútiles. La gran cantidad de dispositivos y pantallas que existen en el mercado hace que tengamos que tener muy en cuenta tamaños de contenido fluidos y no estáticos para evitar que haya usuarios que no vean bien nuestro contenido.
Algunos de los efectos que usas en la web de escritorio no funcionarán en la web responsive. Esto es vital, ya que si no haces una comprobación multidispositivo y multiplataforma puede que te encuentres que sorprendentemente el tiempo por visita desde móvil es extrañamente bajo. Esto pasa mucho, por ejemplo, cuando el «leer más» de una noticia aparece en el hover (al pasar encima el ratón). El hover no existe en móvil por lo que el usuario no podrá continuar su visita.
No olvides medir, medir y medir continuamente para detectar posibles fugas y fallos de rendimiento en la navegación móvil. Ten en cuenta todas estas cosas antes de lanzarte, así como el diseño responsive mejora la experiencia de usuario, como hemos visto, no siempre tiene que ser así.
Ventajas de tener una Web Responsive.
Google no te penalizara, ya que en su buscador ya penaliza a aquellas webs que no cuentan con diseño adaptado.
Mejoras la experiencia del usuario ya que adaptas tu web a las características de su dispositivo.
Ahorro de costes de mantenimiento, cuando incluyes contenidos nuevos realizas una sola actualización para todas las versiones de la web.
Ahorro de costes de desarrollo, el coste de desarrollo de una web responsive adaptada a todos los dispositivos es menor que el coste de desarrollo de una versión de la web para cada dispositivo
