Diseño Web Responsive y Adaptativo

Diseño Web Responsive Bilbao

Diseño de páginas web responsive y diseño adaptativo

 

Webs adaptadas a dispositivos móviles y tabletsAbrelink prioriza en sus proyectos el concepto de diseño web responsive, o diseño web adaptativo (en inglés, Responsive Web Design). Esto quiere decir que mediante una combinación de media queries y hojas de estilos CSS adaptamos los sitios web al entorno del usuario. El cada vez mayor uso de dispositivos móviles, de tablets y smartphones, nos obliga a un diseño más inteligente y flexible que se adapte al tamaño de la ventana de cualquier navegador y de cualquier terminal para una correcta visualización, sin necesidad de hacer zoom para leer bien el texto. Es lo que se conoce también como diseño multidispositivo. Adaptando un único diseño a diferentes escalas y resoluciones conseguimos obtener una web mucho más navegable y funcional.

Las principales ventajas de tener una web optimizada para smartphones y tablets son:

  • Diseño adaptado a las dimensiones de nuestra pantalla.
  • Comodidad a la hora de navegar por la interfaz y al leer los textos al no tener que hacer zoom.
  • Contenido más limpio y depurado, sin elementos innecesarios.
  • Mayor velocidad de carga.

Diseño web responsive y SEO

Entre otros muchos beneficios, el diseño web responsive y adaptativo también favorece el posicionamiento web SEO. Por un lado, aumenta la velocidad de carga, lo que se conoce como el WPO (Web Performance Optimization); y por otro lado, mejora las métricas de usuario (promedio de tiempo en página y duración media de la sesión, páginas/sesión, dwell time, porcentaje de rebote, etc.). No en vano, si un usuario entra en una web no responsiva desde su dispositivo móvil (pocas deben de quedar ya, pero alguna habrá por ahí perdida), lo normal es que salga pitando y vuelva a Google, lo que se conoce como pogo sticking, una métrica muy negativa. Así pues, un diseño responsive implica también un diseño UX.

Por añadidura, desde la implantación del mobile-first index y del AMP (Accelerated Mobile Pages), el diseño web responsive es más necesario que nunca.

Herramientas para desarrolladores web

El diseño responsive se consigue mediante los CSS media queries y la etiqueta meta viewport. Si quieres ver cómo se adapta tu página a los diferentes tamaños de pantalla y dispositivos móviles, necesitarás utilizar las herramientas para desarrolladores de Google Chrome (botón derecho del ratón/inspeccionar o Ctrl+Mayús+I) y clicar en el segundo icono, Toogle device toolbar, y lo mismo en Firefox, en Vista de diseño adaptable, que además de mostrarte varias resoluciones te permite estirar y reducir el max-width y min-width en píxeles y hacer una captura de pantalla.

También hay extensiones de Chrome como Window Resizer que con un solo clic te redimensionan el navegador a la pantalla de un iPhone, de un iPad o de un laptop.

Responsive Design. Webs para móviles y Tablets