A partir del 21 de Abril del 2015 Google penaliza tu Magento si no está optimizado para dispositivos móviles. A continuación vamos a mostrar algunas directrices básicas para que un Magento no responsive pueda ser adaptado. Normalmente, aunque tu Magento no sea responsive se puede ver en un dispositivo móvil, pero con los problemas típicos de navegación y usabilidad. Dependiendo del tamaño del dispositivo móvil se verá más grande o más pequeño el texto, es posible que tengas que utilizar los dedos para hacer zoom si es un dispositivo pequeño. Al realizar esta adaptación la distribución de la web y el tamaño de los elementos cambiará para que pueda ser leído sin tener que hacer zoom o scroll horizontal. Si tu Magento tiene un diseño anticuado es el momento adecuado para realizar un restyling y hacerlo optimizado para móviles. Según Google, sus resultados de búsqueda deben llevar a un contenido que cuente con las siguientes características, así que debemos trabajar en todas ellas:
- Un área de visualización definida (o ventana gráfica) que se ajuste al tamaño de la pantalla del dispositivo.
- Un contenido que fluya dentro de la ventana gráfica, para que los usuarios no tengan que desplazarse horizontalmente ni pellizcar la pantalla con los dedos para poder verla entera.
- Unas fuentes que se adaptan para una mejor lectura en pantallas pequeñas.
- Unos elementos fáciles de tocar (por ejemplo, botones) que estén bien separados de otros elementos táctiles.
- Un diseño visual y un movimiento basado en la tecnología optimizada para móviles.
Para empezar necesitaremos incluir en elde la página el metatag “viewport”, así cubrimos la característica número 1:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Esta metatag puede configurarse de muchas formas modificando los valores, pero esta es la más común. Esto hará que en nuestro dispositivo móvil se vean solamente los pixeles reales de forma que no haga falta utilizar el zoom. Ahora si nuestra web tiene 960 píxeles de ancho y nuestro dispositivo tiene 320 solo veremos los 320 primeros píxeles de nuestra web. Así que el siguiente paso para optimizar nuestro Magento para dispositivos móviles es acotar los distintos anchos. Para acotar los distintos tamaños de dispositivo necesitaremos agregar “media queries” a nuestra hoja de estilos. Para entender lo de “acotar los distintos tamaños” y qué es una “media querie” lo mejor es verlo:
@media (min-width: 481px) and (max-width: 768px){
/* css para visualizaciones con un ancho entre 481px y 768px */
}
@media (min-width: 321px) and (max-width: 480px) {
/* css para visualizaciones con un ancho entre 321px y 480px */
}
@media (max-width: 320px) {
/* css para visualizaciones con un ancho máximo de 320px */
}Para optimizar Magento para dispositivos móviles debemos agregar el css correspondiente para cada uno de los tamaños adecuando la distribución al tamaño de cada uno de los dispositivos. De esta forma podemos definir también los tamaños de las fuentes utilizadas, y una vez completado tendríamos resueltas las características requeridas por Google 2 y 3. Es importante revisar tanto la visibilidad como el tamaño de los enlaces y botones donde haremos “touch” en una pantalla táctil (lo equivalente al clic en una pantalla no táctil). No sólo para completar la características números 4 y 5, sino también para que nuestros clientes puedan utilizar fácilmente nuestro e-commerce Magento y no perder ventas. Si un usuario tiene dificultades para hacer “touch” en un botón porque tiene un tamaño reducido perderemos la venta, ya que el zoom ahora no está operativo. Otro asunto a solventar es la utilización de flash en la web, Google habla de este asunto diciendo que hay que “evitar software que no sea común en dispositivos móviles, como Flash”. Google facilita una herramienta con la que podrás validar la optimización de tu Magento para móviles, y que además ofrece una ayuda muy completa a la hora de corregir los problemas: https://www.google.com/webmasters/tools/mobile-friendly/
