Conecta con nosotros

Prácticos

¿Cómo sobrevivir al «Mobilegeddon» de Google?

Publicado

el

mobile-google

Google modifica su algoritmo hoy, 21 de abril de 2015,  para ofrecer a sus usuarios los mejores resultados en sus búsquedas. En esta ocasión, el gigante reta a todas las páginas web a asumir el reto de adaptarse a la interfaz del móvil. Si aún no te has puesto manos a la obra, aquí tienes las claves para que adaptar tu web a un diseño responsivo.

El 26 de febrero, Google volvió a abrir la “caja de Pandora” para anunciar que un nuevo algoritmo llegaría a su buscador el día 21 de abril, y que todos aquellos sitios optimizados para los dispositivos móviles serán considerados para figurar en los primeros puestos del SERP o rankings del buscador. Esta información puso a todos los webmasters en alerta, sobre todo a aquellos que trabajan en proyectos internacionales y que no tienen que cambiar solo un site, sino varios.

Los developers del proyecto Cupones Mágicos, una plataforma online de cupones de descuento con presencia en varios países nos dan las claves para modificar nuestro site y estar a punto para la nueva actualización de Google. Aquí una pequeña guía:

¿Cómo optimizar tu web para dispositivos móviles?

Héctor Rivas, principal developer de Cupones Mágicos señala que: “para empezar con la optimización hay que usar siempre el viewport. Este es el método más fácil para crear un diseño responsivo». Para que tu website tenga un buen aspecto en un smartphone se puede utilizar la etiqueta “meta name=”viewport”, la cual es apta para todos los dispositivos. En este caso, necesitaríamos añadir:

<meta name=»viewport» content=»width=device-width»>

Device-with señala al buscador que el área de visión debe ser igual al área del dispositivo. De esta forma, el buscador no aplicará las dimensiones estándares de 980px. Si indicamos una anchura específica propia de un Smartphone específico, la imagen aparecería distorsionada en otros dispositivos ya que no todos están programados para las mismas dimensiones, por ello lo mejor sería añadir: initial-scale = 1.0, entonces en el lenguaje aparecería de esta forma:

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

“Esta etiqueta es relativamente nueva, por lo que no es soportada por dispositivos más antiguos. De todas formas, si lo que necesitas es optimizar tu página web lo más rápido posible, es una buena solución.” señala Rivas.

Gabriel Gambarini , responsable Frontend Developer de Cupones Mágicos: “Con la ayuda de CSS media queries se puede crear un diseño adaptable o responsivo. Para llevar a cabo esta tarea, Google te da todas las pautas a seguir en su web destinada a developers».

«Nosotros hemos usado el atributo max-width, el cual se utiliza para un navegador con una anchura menor (de pantalla) que la especificada inicialmente. De esta forma, no es necesario cambiar todo el contenido para optimizar la web. Para ser más claros, CSS media queries filtra y cambia el contenido en base a las características del dispositivo, como el tipo de contenido, la anchura, la resolución o la orientación de la pantalla. Teniendo en cuenta estos parámetros, nosotros hemos utilizado» explica el desarrollador.

cupones

Stefan Nolte, CEO de Global Leads Group explica que “si quieres crear un proyecto nuevo, existen varias razones por las cuales debes usar una infraestructura de Front-end como por ejemplo Bootstrap o Foundation».

  1. El enfoque estaría estandarizado acorde a las mejores prácticas de la industria. Un ejemplo de ello, sería la optimización del rendimiento de la web o la optimización de etiquetas a la hora de describir el contenido.
  2. Estas infraestructuras están ya diseñadas para ser responsivas en dispositivos móviles de donde llega prácticamente el 30% del tráfico de una web (dependiendo de la audiencia de tu portal).
  3. Por último, existen diferentes soluciones integradas que ayudan a no tener que construir otros componentes estándar como las galerías de imágenes deslizantes o las ventanas modulares.

Recomendaría este tipo de infraestructuras no solo para las aplicaciones software más grandes, sino también para la creación de landing pages, puesto que se pueden obtener resultados de una manera bastante rápida.

Herramientas útiles utilizadas por el equipo de Global Leads Group:

– Web Developer Tools de Google Chrome

Esta herramienta se utiliza para depurar CSS y Java Script. El emulador de Chrome te permite probar los cambios en el navegador de tu ordenador, así como en el dispositivo móvil. Podéis descargar la extensión desde este enlace.

– Brackets, editor de texto para HTML, CSS y Java Script

Este editor de texto de Adobe es muy fácil de usar y además pone a disposición de los usuarios una gran oferta de plugins. Más información y descarga en su web oficial.

– Sublime, editor de texto para C++ y Python

Editor básico de código que también ofrece una gran cantidad de plugins y extensiones que facilitan el trabajo. Se pueden instalar las extensiones muy fácilmente, lo que permite personalizar el editor de texto con opciones casi ilimitadas. Podéis descargarlo en este enlace.

Cómo comprobar que tu website es “responsive”

optimizacion

Después de realizar los cambios oportunos, puedes comprobar si tu página web es responsiva o no mediante una herramienta especial lanzada por Google que te permite visualizar si tu web se adapta o no a los dispositivos móviles. La encontrarás aquí https://www.google.com/webmasters/tools/mobile-friendly/.

El pasado enero, Google envió un aviso a todos los webmasters que aún no contaban una página web optimizada para dispositivos móviles. Si tú no has recibido tal advertencia, te aconsejamos que compruebes en esta herramienta para asegurarte de que todo está en orden. ¡Buena suerte!

Lo más leído