El móvil es ese dispositivo que no descansa ni en vacaciones.

En España, el móvil es el dispositivo más utilizado para acceder a internet, un 94,6% de los españoles lo utilizan.

A nivel mundial, más de la mitad de las consultas que se hicieron en el 20 16 a Google, procedían de dispositivos móviles.

Buscamos información, comparamos características, compramos productos… y para realizar estas acciones, utilizamos ordenadores, tabletas y cada vez más, utilizamos dispositivos móviles.

Los estudios indican que 9 de cada 10 usuarios españoles utilizan el móvil durante el proceso de compra.

Ante esta situación… ¿está tu página web lista para afrontar el reto móvil?

En otras palabras, ¿está tu sitio web preparado para ofrecer al usuario una buena experiencia de navegación independientemente del dispositivo que utilice?

¿Qué es una página web responsive?

Una página web responsive es un sitio web que ha sido diseñado con una técnica llamada diseño web responsive o diseño responsive.

El diseño responsive es una técnica de diseño web que adapta el contenido a la pantalla desde la que se esté navegando, con el objetivo de optimizar la experiencia del usuario.

Esto se consigue mediante las hojas de estilo CSS y las media queries, siendo éstas las responsables de redimensionar (ajustar el tamaño al dispositivo) y adaptar el contenido a la pantalla para que el usuario pueda navegar e interactuar con él.

Se debe tener presente que los ordenadores, las tabletas y los teléfonos móviles tienen pantallas con diferentes tamaños y resoluciones, y que además, en algunas pantallas, el contenido se puede rotar visualizándose en horizontal o en vertical (móviles y tabletas).

La páginas web responsive permiten la visualización del contenido y la navegación en todas estas circunstancias.

Ejemplo:

Si una pantalla de ordenador tiene una resolución de 1024x768 px y el contenido está organiza en un layout de 5 columnas, al pasar a una resolución de móvil de 320 x 480 px el contenido se deberá reorganizar y reducir de tamaño para adaptarlo a 3 columnas.

Para ello, el contenido debe fluir automáticamente recolocándose en la pantalla y modificando su tamaño para adaptarse a las características de cada dispositivo.

A veces que me dicen,  ” mira, mi web se ve en el móvil”… y me enseñan una pantalla donde el texto es mínimo, los botones y las imágenes están amontonadas y los formularios son ilegibles.

Está claro que, en ese caso, la web no es responsive.

Por ello, se debe distinguir entre ver el contenido y navegar por el contenido.

Una página web es responsive cuando su navegación está adaptada a todo tipo de dispositivos y de pantallas, siendo capaz el usuario de interactuar con el contenido de manera adecuada.

 

Página web responsive ejemplos

¿Cómo saber si tu página web es responsive? 

1. La prueba de optimización para móviles de Google

Es una herramienta gratuita de Google para detectar si las páginas web están adaptadas a móviles o no.

A esta prueba de optimización, también se le conoce con el nombre de Test Mobile Fiendly.

Los pasos para realizar esta prueba son los siguientes:

  • Haz clic aquí.
  • Introduce la url de la web cuya optimización deseas probar.
  • Haz clic en el botón de “Ejecutar prueba”.

Al finalizar el proceso, el test te ofrece una pantalla con el resultado, siendo la información que proporciona la siguiente:

  • Te dice si el sitio web es apto o no para móviles.
  • Te indica si se han producido errores en la carga y cuáles son.
  • Te presenta una imagen con el contenido que ve el usuario que accede a dicha página a través del móvil.

Ejemplo

Prueba optimización para móviles

2. La prueba real en un conjunto de dispositivos

Este es un test multidispositivo y consiste en invitar a un amplio conjunto de personas a que accedan a un determinado sitio web a través de sus dispositivos móviles.

Por ejemplo, esta prueba se puede realizar con:

  • El equipo de ventas de una empresa.
  • Los miembros de un determinado departamento.
  • Un grupo de amigos o personas afines…

Es muy probable que con un grupo de 10 personas consigas probar cómo se comporta una página web en una cantidad que oscilará entre 15 y 20 dispositivos diferentes.

Si además consigues que te envíen impresiones de pantallas con las cosas que no vean bien, o con los contenidos a los que no se haya podido acceder, la prueba será un éxito.

Una vez finalizada esta prueba, te recomiendo agradecer la participación en el test y el feedback a los participantes.

3. Las extensiones de Google Chrome

El navegador Google Chrome permite añadir extensiones que te posibilitan hacer funcionalidades extras.

Window Resizer es una extensión que se puede añadir al navegador Chrome y que cambia el tamaño de la ventana de navegación en función del tipo de pantalla que se elija, pudiendo así comprobar la visualización del contenido de alguien que acceda con una pantalla de ese tamaño.

Esta extensión tiene predefinidos 10 tamaños de pantalla diferentes, que van desde la de un móvil 320x480, a la pantalla grande de un ordenador de sobremesa 1680x1050.

Además, si el tamaño de pantalla que necesitas no está en la lista predefinida, puedes incorporarla y comprobar cómo se adapta el contenido de una determinada página web.

Existen otras extensiones parecidas, pero ésta es muy completa ya que también te permite probar rotando la pantalla, es decir, comprobar que pasa cuando el usuario cambia la pantalla de vertical a horizontal.

Ésta es extensión muy útil.

Ejemplo

Ejemplo window resizer

4. El informe de usabilidad

La herramienta de Google Serch Console tiene una opción que se llama Usabilidad móvil y sirve para analizar la usabilidad de un sitio web para usuarios que acceden a través del móvil.

Este análisis controla y detecta los siguientes errores:

El uso de flash: los navegadores de dispositivos móviles no detectan la tecnología Flash, luego si el contenido de una página web incluye animaciones flash, lo más recomendables es que sean eliminadas o sustituidas por otras realizadas con una tecnología más moderna.

Ventana gráfica no configurada: si una página no incluye la etiqueta meta viewport, dará error ya que es la etiqueta que indica a los navegadores cómo ajustar el tamaño y la escala de la página para adaptarla al dispositivo de navegación.

Ventana gráfica de ancho fijo: error que aparece cuando el desarrollador utiliza una ventana de ancho fijo en lugar de adaptarla a cada tipo de dispositivo.

El contenido no se adapta a la ventana: esto sucede cuando el texto o las imágenes se desbordan y sobresalen del ancho de la ventana.

Tamaño de la fuente pequeña: si el tamaño de letra es ilegible y obliga al usuario a utilizar el zoom en repetidas ocasiones, este se cansará y cerrará la página. Para que esto no suceda, se recomienda como un tamaño de texto mínimo de16 px.

Elementos táctiles demasiado próximos entre sí: botones que se solapan, enlaces que se montan unos con otros, contenido amontonado…

Te recomendamos ejecutar este test en tu página web y, si te salen errores, procede a corregirlos.

5. El análisis de las métricas y otras pistas

Es imprescindible analizar las métricas de tu sitio web, para comprobar el tráfico que obtienes, las conversiones, etc.

Y muy recomendable hacer este análisis segmentado por tipo de dispositivo (ordenador, tableta y móvil), ya que te ayudará a detectar posibles problemas en la navegación procedente de los dispositivos móviles.

Por ejemplo, te recomendamos analizar y tomar medidas cuando tienes:

  • Una tasa de rebote (Bounce rate) alta en los usuarios procedentes de  móviles.
  • Unas tasas de conversión bajas del tráfico móvil.
  • Un volumen de suscriptores procedente de móviles.
  • Un promedio de páginas vistas por sesión menor en móviles que en otro tipo de dispositivos…

Idea: Crea alertas en Google Analytics que te avisen cuando alguno de estos parámetros tiene un valor excesivamente alto o bajo, según proceda.

Los beneficios de una página web responsive

Los beneficios que aporta utilizar el diseño web responsive en un sitio web son los siguientes:

  • Rapidez en la carga de las páginas : los tiempos de carga se reducen. Las pantallas se aligeran de contenidos, y no se requieren redireccionamientos para adaptar el contenido a los distintos dispositivos.
  • Mejora la usabilidad de la página: esto produce una mejora la experiencia de usuario lo cual repercute positivamente en el ranking, en un mejor precio PPC por las palabras clave
  • Mejora la indexación y el rastreado de la página por parte Google.
  • Mejora el posicionamiento.
  • Más tráfico, más conversiones y más ventas, ya que la navegación es adecuada y el usuario encuentra lo que busca.

Si tu página web no es responsive y a pesar todos los beneficios aquí citados todavía no te lanzas a rediseñarla, lee atentamente el siguiente punto.

Mobile-first Index de Google

Google indica en su web que la mejor solución para adaptar las páginas web a todo tipo de dispositivos es el Responsive Web Design.

Pero, da un paso más allá.

Google está cambiando su algoritmo para dar prioridad a las páginas adaptadas a dispositivos móviles.

En el 2018, esta empresa tiene previsto lanzar el Mobile-first Index, es decir, un índice adaptado y optimizado para la experiencia de navegación móvil.

Esto es un cambio radical, ya que hasta ahora, las arañas de Google al rastrear páginas, simulaban la navegación de un usuario desde un ordenador.

Haces esto, es bastante complejo a día de hoy.

Es más, un artículo publicado en Search Engine Land  revela que incluso Google no tiene claro cómo va a funcionar este índice ni qué va a hacer para evitar la catástrofe de todos aquellos sitios web no adaptados a móviles.

En fin, pase lo que pase, está claro que necesitas una página web responsive ya.

Conclusión

Hemos visto lo que es una página web responsive, cómo saber si tu sitio web está adaptado a todo tipo de dispositivos y pantallas, y hemos hablado de los beneficios de una página web responsive frente a otra que no lo es.

Y una cosa nos ha quedado clara, el diseño web responsive mejora el posicionamiento de tu página.

Ahora es el momento de pasar a la acción.

¿Es tu página web responsive? ¿Conoces algún otro beneficio del diseño responsive que te parezca interesante comentarnos?

¡Cuéntanos tu experiencia! Nos encantará escucharte.

¡Buena suerte y mucho Inbound!

Un saludo,

Ana

GUÍA GRATIS

Cómo aumentar las ventas con tu página web

Tácticas, trucos y ejemplos para transformar tu página web en el comercial más rentable.

Ana Fernandez de Casadevante

CEO de Creando Ideas

Marketing, carretillas elevadoras e ilusión es lo que encontrarás en mi trayectoria profesional. Ahora, sueño con revolucionar el Marketing Industrial.

¿Te ha gustado el artículo?
[Total: 0 Promedio: 0]

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies