Diseño Responsive

Kiwi standing on oval

 

El diseño web responsive es un diseño que es sensible a la resolución del usuario, es decir responde automáticamente modificandose su layout (disposición en pantalla) adaptado a todas las resoluciones y terminales, desde equipos de escritorio, tabletssmartphones, cambiando el diseño incluso al mostrarse en horizontal y vertical en tables y smartphones. No se trata de varios diseños, sino de un único diseño que se adapta a la resolución del usuario, pero no escalando su tamaño, sino modificando la estructura y el contenido.

De este modo, el diseño de la web se divide en regiones o bloques, y éstos se cambian de lugar o tamaño, incluso desaparecen, en función de la resolución del usuario. Si el usuario ve la web en un Ipad o Iphone, la web se muestra diferente en cada caso, incluso si pone horizontal o vertical estos dispositivos, el diseño en tiempo real cambia adaptándose a la nueva resolución.

El diseño web adaptado a la resolución, mejora la experiencia de usuario notablemente, lo cual influye directamente en el posicionamiento en buscadores del sitio web o SEO.

Es la recomendación de Google para optimizar SEO, en lugar de diseñar un segundo site para móviles. Además, desde el punto de vista del posicionamiento SEO, si se utilizan dos dominio, por ejemplo un .com para la web normal y un .mobi para la web de móviles, el page rank (índice de popularidad de una web de Google) se divide entre los dos dominios. Mientras que si se utiliza el diseño responsive, todos los enlaces apuntan al mismo dominio, aunando fuerzas para posicionar un único dominio y urls.

Ahorro de coste de registro de un dominio para móviles y tiempo y coste de gestión, ya que no se tienen que modificar dos webs, sino que se trata de una sola web con un único gestor de contenidos. Es la programación del diseño responsive la que se encarga de ubicar el mismo contenido en función de la resolución.

Es importante que los menús se adapten a los terminales móviles, sobre todo cuando se visualizan en vertical. En este caso, se suele rediseñar el menú completamente, que además debe ser de fácil uso táctil.

El uso de tablets y smartphones actualmente se encuentra por encima del 50% en el tráfico a webs corporativas, incrementando cada día. Facebook ya supera un 60% de uso desde smartphones.

Ejemplo de diseño responsive: casaolea.com

Para comprobar la validación de diseño responsive puede utilizar esta herramienta: responsinator.com  Si introduce www.casaolea.com comprobará uno de nuestros proyectos cambiando el layout (disposición de los elementos) y el menú en smartphones.