Diseño responsive para mi web

Desde el pasado lunes 21 de abril, todas las webs deberían tener un diseño responsive.

¿Qué es el responsive y por qué debería tener mi web un diseño responsive?

El diseño responsive no es ni más ni menos que la adaptación de nuestra web a todos los dispositivos móviles, como pueden ser teléfonos o tablets. Logrando así una correcta visualización.

Algunos diréis… ”mi web ya es responsive”…¡¡¡Genial!!! Pero ojo si no es así.

El todopoderoso dios Google penalizará  a los usuarios cuyas webs no estén adaptadas a dispositivos móviles.

Esta penalización hará que nuestra página web deje de estar indexada para estos dispositivos perjudicando así en nuestro posicionamiento orgánico (SEO). Sería un error no estar presentes en móviles o tablets puesto que el 81% de los usuarios realizan búsquedas a través de dispositivos móviles. Según el  VI Estudio Anual Mobile Marketing  Sep.2014. IAB

Está acción del magnate, viene justificada por la necesidad de adaptar los algoritmos de su buscador a los nuevos patrones de uso. Tenemos que ver esta maniobra como un toque de atención a la hora de trazar nuestras estrategias online. Si partimos de la base de que 9 de cada 10 internautas tiene un Smartphone, tenemos indicios de sobra de por donde van a acceder estos usuarios potenciales.

Otro dato a tener en cuenta es, que el 31% de los usuarios utiliza el móvil como second screen . Esto quiere decir que mientras ven la televisión, utilizan sus dispositivos móviles para realizar consultas.

Una de las tendencias en Marketing Móvil para este 2015 es el llamado ”deep linking” que consiste en llevar a los usuarios a una app a través de un link que aparecerá en la web. Este tipo de acciones, la proliferación de app para todo tipo de negocios, etc hace que los usuarios, inconscientemente, pasen más tiempo conectados a través de dispositivos móviles. Además de otros patrones de comportamiento.

¿Cómo puedo saber si mi web posee un diseño responsive?

Aquí os dejamos una herramienta por cortesía de Google para dar solución a este problema del primer mundo.

Google Responsive

Herramienta para saber si la web posee un diseño responsive

 

Esta herramienta creada para desarrolladores consiste en un análisis de tu URL en el cual será confirmado, o no, si tu página tiene un diseño optimizado para móviles.

Aquí os dejamos ambos ejemplos del análisis:

Ejemplo de web no optimizada para móviles

Ejemplo de análisis web para saber si está optimizada para móviles.

En este caso, esta página web no posee un diseño adaptado para dispositivos móviles por lo que será penalizada por Google. ¡Muy mal!

Una vez adaptada tu web con un diseño responsive, este será el resultado que nos mostrará la herramienta para desarrolladores de Google:

Ejemplo web responsive

El análisis ha detectado que la web está optimizada para móviles

O lo que a efectos prácticos es…


Obtenemos un diseño adaptable evitando contenidos duplicados, una reducción en el tiempo de carga, son más fáciles de compartir los contenidos (aumenta la viralidad) y por supuesto nos hacemos accesibles a todo tipo de usuarios.

¿Cómo hago mi web responsive?

Alguno puntos a tener en cuenta son: el tiempo de carga de la página, puesto que se cargan los mismos recursos que para tu web de escritorio. El tamaño en tu diseño responsive, importa. Para evitar problemas de adapatación evitando así sobrecargar la página de elementos innecesarios,  la tendencia actual es el  mobile first como patrón.  Por último citar que debemos evitar los efectos, puesto que muchos de ellos no aparecerán en el móvil.

Próximamente, publicaremos un post en el que se explicará de forma más detallada como adaptar tu web con un diseño responsive.