“Mobilegeddon” el 21 de abril: cuenta atrás para hacer tu web responsive

In Desarrollo web
google webmaster central

Es oficial, empieza la cuenta atrás para hacer tu web responsive si no lo es aún. ¿Por qué? Porque Google ha comunicado oficialmente en su Webmaster Central Blog que -citamos textualmente-: 

“A partir del 21 de abril vamos a ampliar nuestro uso de la UX en dispositivos móviles como una señal ranking. Este cambio afectará a las búsquedas móviles en todos los idiomas en todo el mundo y tendrá un impacto significativo en nuestros resultados de búsqueda. En consecuencia, los usuarios encontrarán más fácil conseguir resultados relevantes, de alta calidad de búsqueda que están optimizadas para sus dispositivos.”

Así que si tu web no es “responsive” tienes un problema.  Según dice Google en su anuncio debemos seguir sus directrices de lo que es una buena experiencia mobile. Para ello debemos consultar nuestra cuenta de Webmaster Tools y revisar la opción:

  • Testea tu web con: Mobile Usability Report
Webmaster Tools  diseño Responsive
Webmaster Tools diseño Responsive

 

  • Importante: Google determina la usabilidad móvil para cada página no para un sitio web concreto, así que debemos utilizar cada página por separado.

Nuestros expertos en desarrollo web  nos ayudan a recordar ahora las directrices que debemos seguir en la creación de un diseño responsive, empezando desde cero. Vamos a ello 🙂 

 

¿Qué es el responsive design?

El diseño web responsive es una técnica que utiliza diseños fluidos ( “estirar” a la medida real de la pantalla como sea posible) , que aplican diferentes hojas de estilo (CSS) basado en el tamaño de la pantalla actual del dispositivo.

Es decir, con el diseño responsive la  web debe adaptarse a prácticamente a cualquier dispositivo con un navegador completo:  smartphones,  tablets y teles.

Si quieres comprobar cómo se ve en responsive tu web puedes utilizar esta aplicación: https://www.responsinator.com/

movil responsive

Todo comenzó con una teoría bastante simple de Ethan Marcotte (http://ethanmarcotte.com/) en un artículo de 2010 titulado “Responsive Web Design”. En lugar de crear una única página web de 800px de ancho que se centra en sí mismo en la pantalla, las páginas web de respuesta se componen de elementos cuyo tamaño y forma se adaptan en función del ancho de la pantalla del navegador. Elementos que determinan el tamaño de la pantalla utilizando consultas de medios CSS .

Vamos a explicar este concepto con un ejemplo sencillo en una cuadrícula utilizando 9 elementos rectangulares marcados A -I. En una pantalla pequeña, como una tablet o un ordenador antiguo con menos píxeles, los elementos se mostrarán a sí mismos en una cuadrícula de 3 x 3 como muestra esta figura:

Matriz responsive

Cuando la pantalla es más ancha , esos elementos se extienden de este modo:

Cuando es más estrecho se apilan de la siguiente forma:

matriz responsive

 

 Ventajas del Responsive Design 

  • La experiencia de usuario ( UX ): El sitio web se ajusta a cualquier tamaño de la pantalla, por lo que es una buena solución a largo plazo para UX . Elementos que no son fundamentales para los usuarios de  móviles se pueden esconder y esto ayuda al usuario a alcanzar sus metas más rápidamente.
  • Linkbuilding: Una URL de acumula todas las acciones sociales likes, tweets y enlaces entrantes.
  • SEO: Una sola URL acumula todos los enlaces, PageRank, la Autoridad de página, etc…
  • Desarrollo y mantenimiento web: Se desarrolla sobre una única versión.
  • Estructura de la información: El usuario no debe aprender a navegar dos veces como en la versión móvil o app ya que la estructura de información y navegación son iguales para todos los dispositivos.

Además, si eres programador puedes consultar aquí la guía oficial de Google para desarrolladores. Y en caso de que necesites asesoría sobre cómo adaptar tu web no dudes en contactar con nosotros. Desde Tresce estaremos encantados de echarte un cable en esto 😉

 

desarrollo web 

 

Contacta con la agencia

Mobile Sliding Menu