LA IMPORTANCIA DEL DISEÑO WEB RESPONSIVE

LA IMPORTANCIA DEL DISEÑO WEB RESPONSIVE

LA IMPORTANCIA DEL DISEÑO WEB RESPONSIVE

¿PORQUE ES TAN IMPORTANTE EL DISEÑO RESPONSIVE?

Muchos se preguntarán el porqué de la importancia de un diseño web responsive, la respuesta muy posiblemente la tengas entre las manos, ya que aproximadamente un 80% de los usuarios actuales que se conectan a nuestras webs, se conectan a través de un smartphone y estos no tienen la misma resolución que una pantalla de portátil o una pantalla de un ordenador de escritorio, eso significa que no se debería ver igual, y es aquí donde arranca la magia del diseño responsive.

Que es esto del diseño responsive?

El diseño responsive fue la solución de desarrollo web al complejo panorama que se vivió debido a la proliferación de dispositivos con los que se podía navegar por la red. Como ya hemos explicado en artículos anteriores, un diseño responsive es aquél que se adapta a los diferentes tamaños del navegador con el mismo HTML. Así, a medida que ampliamos o disminuimos la pantalla, la página responsive se va adaptando a cada nueva dimensión. No debemos de olvidar, que el objetivo principal del diseño web siempre es mejorar la experiencia del usuario.

Y en que consiste?

Aquí viene lo divertido! Primero, debemos contemplar que hay que diseñar un primer wireframe o prototipado, pero esto no es tan sencillo, debemos prever el comportamiento que los elementos de este va a tener para adaptarse a las diferentes resoluciones en sus repectivos breakpoints:

  • Móviles: entre 320 y 480 píxeles.
  • Tablets: entre 768 y 1024 píxeles.
  • Pantallas grandes: más de 1200 píxeles.

(Los breakpoints son indispensables para diseñar experiencias que se adapten a los diferentes dispositivos digitales. Google premia en su posicionamiento y sitúa en el top de sus SERPs a las webs “mobile friendly”, es decir, a las páginas web adaptadas a dispositivos móviles.)

Saber que elementos se van a reordenar y como lo van a hacer, que imágenes deben ser sustituidas y que densidades deben tener, a que tamaño se deben redimensionar las tipografías que estamos usando para que sigan marcando esa jerarquía para la que se han pensado, el tamaño del logo corporativo y el menú entre otros. Pero esto aún se complica un poquito más, hay que tener en cuenta que estas dimensiones de las que estamos hablando no son tan simple como las que os he planteado, es decir, hay variaciones dentro de cada una y según su tamaño hay que tener en cuenta que hay que ajustar.

Aquí entran nuestras amigas las mediaquery’s estas son las que nos sirven para definir el comportamiento de nuestras hojas de estilos según el viewport y los diferentes breakpoint’s que van a ser usados y tendremos tantas mediaquery’s como resoluciones contemplemos y según la complejidad del diseño estas serán más densas o menos densas.

Por norma general los diseños responsive tienden a simplificar su estructura, aumentar el tamaño de sus tipografías y modificar las dimensiones o incluso cambiar las imágenes por otras con mayor densidad de píxeles a medida que disminuyen la resolución de las pantallas y en función del dispositivo.

Creo que a grandes trazos hemos visto la relevancia de un buen diseño responsive y que no solo afecta a la visualización de nuestras webs, sino también a nuestra relación con Google y en consecuencia con el SEO de nuestra web, algo realmente importante que abarcaremos en otro post.