Web responsive: aumenta tu visibilidad online

Desde abril de 2015, Google penaliza el posicionamiento de las páginas web que no se adaptan a tabletas y móviles. Una página web que se adapta se denomina responsive (en inglés). ¿Tu página web se adapta a tabletas y móviles? Te decimos cómo hacerlo.

Si quieres saber si tu página web es o no responsive, Google ha puesto a tu disposición una prueba: Pincha aquí para hacer la prueba.

En menos de dos minutos, tendrás la respuesta a tu pregunta. Si no se adapta a los móviles y tabletas, Google te explica el porqué, como en estos dos ejemplos.

 

¿Cómo un sitio web puede ser responsive?

Claves sencillas para que tu página se adapte:

  • Para crear tu página web, no uses Wix, ya que se basa en Flash. Es mejor utilizar WordPress.
  • Si usas WordPress para crear tu página web, instala una plantilla responsive. Pincha aquí para conocer algunas de estas plantillas. Si usas una plantilla gratuita, puede ser que no se adapte a todos los dispositivos.
  • Antes de instalar una plantilla en tu web, mira en todos los dispositivos que puedas cómo queda en una web de prueba. Es importante mirar desde un Iphone y un Android.
  • Vigila el tamaño y peso de las imágenes que subas. Si pesan mucho, tu sitio web tardará en cargarse, lo que desanima a la persona que navega con su móvil. Puedes disminuir el tamaño de tus imágenes, pinchando aquí.
  • página web responsiveMenús: el uso de los menús hamburguesa se está extendiendo cada vez más. Permiten ahorrar espacio. Ver imagen a la izquierda.

 

  • Tienes que pensar que para que tu página web sea responsive deben desaparecer los elementos que tardan mucho en cargarse o que no se van a ver bien; en ambos casos, no se verán en la versión móvil.

 

Para profundizar:

  • No uses Flash: La mayoría de navegadores móviles no reproducen el contenido basado en Flash.

Para que tu página web se adapte a todos los dispositivos, tus páginas deberían especificar una ventana gráfica mediante la etiqueta “meta viewport” para poder ajustar el tamaño y la escala de la página y adaptarla al dispositivo.

  • Configura la ventana gráfica para que no tenga un ancho fijo

Puedes configurar la ventana gráfica para que coincida con el ancho y la escala correspondientes del dispositivo.

  • Adaptando el contenido a la ventana gráfica

Para ello, tenemos que asegurarnos de que las páginas utilicen valores de posición y ancho relativos para los elementos CSS y que las imágenes puedan escalarse.

  • Instala un tamaño de fuente lo suficientemente grande

Si el tamaño de la fuente es demasiado pequeño, la web no es legible y obligará a las personas visitantes a “hacer zoom” para poder leerla.

  • No sitúes elementos táctiles demasiado próximos entre sí

Si tienes botones para pinchar y vínculos de navegación demasiado  cerca los unos de los otros, impediránn que las-os usuarias-os de dispositivos móviles puedan tocar un elemento con el dedo sin tocar también el que hay al lado. Puedes consultar más información al respecto en Aplicar el tamaño adecuado a los elementos táctiles.

En el marco de los talleres prácticos para Emprendedor@s que el Ayuntamiento de Hoyo de Manzanares organiza cada mes, trabajamos aspectos como la adaptación de los móviles a todos los dispositivos mediante WordPress.

Aprende más con esta bibliografía:

  • Test para saber si tu página web es responsive.
  • Si quieres profundizar para crear menús hamburguesa, pincha aquí.