Responsive Web design - sitio responsive

Antes de desarrollar el tema de la compatibilidad móvil, es importante señalar que el término «móvil» designa únicamente los smartphones (tipo iPhone, Samsung Galaxy...) y no las tablets (iPad, Surface...).

De igual modo, hay que observar que desde un punto de vista técnico existen 3 formas posibles de acoger a los visitantes que navegan desde el móvil.

En este artículo abordaremos los 3 métodos, pero nos centraremos en especial en el Responsive Web design que Google ha recomendado oficialmentee para una mejor optimización del posicionamiento natural o SEO.

¿Qué es el Responsive Web design o sitio responsive?

Un sitio responsive (o sitio adaptativo, sitio con diseño web adaptable, responsive web design o sitio RWD) es un sitio cuyas páginas se adaptan de forma automática a cualquier tamaño de pantalla (smartphone, tablet, pantalla de ordenador).

Independientemente del tipo o tamaño de la pantalla del dispositivo utilizado para llegar a tu sitio, los visitantes podrán leer y navegar con comodidad.

¿Por qué realizar un sitio responsive?

Para optimizar su posicionamiento natural (SEO en inglés), Google recomienda oficialmente desarrollar sitios responsive. A partir de la actualización del día 21 de abril de 2015, los sitios responsive aparecen más arriba en los resultados de búsqueda de Google y por lo tanto consiguen más tráfico natural.

Google se apoya en los siguientes motivos para justificar esta actualización:

  • El tráfico web que proviene de dispositivos móviles se encuentra en pleno crecimiento.
  • Una gran parte de la población dispone de teléfono móvil y de un acceso rápido a Internet desde el móvil.
  • Al mismo tiempo, la mayor parte de los sitios web no está optimizada para los móviles. Los dispositivos móviles a menudo están limitados por el tamaño de visualización –en comparación con los ordenadores y tablets-.
  • Estudios recientes muestran que los usuarios de Internet móvil son más susceptibles de volver a sitios adaptados a los móviles.

¿Cuáles son las características de un sitio responsive?

Antes de hablar del impacto de un sitio responsive sobre el posicionamiento natural (SEO), debemos entender con más precisión qué es un sitio responsive.

  • La ventana de visualización se ajusta al tamaño del dispositivo utilizado.
  • El contenido ofrecido llena de forma automática la ventana de visualización, sin que el usuario necesite desplazarse horizontalmente o agrandar la página.
  • Los tamaños de fuente se adaptan de forma automática al tamaño de la pantalla.
  • Los botones de acciones o cualquier otro elemento táctil son fácilmente accesibles.

Aquí tienes un ejemplo simplificado de un sitio web responsive:

Los esquemas de abajo son una versión simplificada de la visualización de los contenidos en un sitio adaptativo. Evidentemente, hay elementos propios de cada sitio con los que será necesario componer: navegación, contenidos multimedia, barra de búsqueda...

  • Visualización simplificada en un ordenador:
  • Visualización simplificada en una tablet:
  • Visualización simplificada en un móvil:

Impacto de un sitio responsive sobre el posicionamiento natural o SEO

Además de reducir los gastos de creación de contenido y los gastos de mantenimiento ligados a gestionar un sitio web y un sitio móvil distinto, el paso a un sitio responsive presenta asimismo una serie de ventajas concretas para la mejora de tu posicionamiento natural, el SEO sobre el móvil.

1. La comodidad de navegación (usability) de un sitio responsive influencia el posicionamiento natural

El objetivo de Google es presentar a los internautas los sitios que responden a sus expectativas.

En efecto, cuando un internauta llega a tu sitio pero lo abandona pronto, sin leer el contenido ofrecido o sin visitar otras páginas del sitio, Google detecta este comportamiento y deduce a partir de ahí que tu sitio no es pertinente para la búsqueda realizada.

Si tu sitio móvil presenta menos contenidos o es demasiado diferente de tu sitio web, tus visitantes «fieles» podrían frustrarse y abandonar tu sitio para ir a otro.

Perderías entonces visitantes interesantes, tu porcentaje de rebote se vería afectado y en definitiva perderías posiciones en los resultados de búsqueda de Google.

2. La búsqueda móvil favorecida por el sitio responsive

Google ha anunciado oficialmente que los sitios que no sean compatibles con los móviles experimentarán un deterioro en su posicionamiento natural.

No aparecer en los resultados móviles podría reducir tu tráfico global, podrías perder una parte de los clientes potenciales que comienzan a explorar desde el móvil.

3. Los backlinks compartidos para optimizar el SEO móvil

Si tienes un sitio móvil y un sitio web que coexisten, entonces la inmensa mayoría de los backlinks (enlaces entrantes) se dirigirán al sitio web. Tu sitio móvil podría experimentar un déficit de popularidad, lo que podría afectar a tu SEO en el móvil.

Desarrollar un sitio responsive permitiría compartir todos tus backlinks, lo que serviría para tu posicionamiento natural en los resultados móviles.

4. Sacar ventaja en el SEO móvil

Más de la mitad de los sitios web no son compatibles con dispositivos móviles. Ofrecer un sitio responsive ante tus competidores te dará más oportunidades de alcanzar la primera posición y conservarla gracias a tu historial.

¿Qué maneras hay de ofrecer un sitio móvil?

Hay 3 métodos distintos para adaptar tu sitio web a los móviles y hacer de este modo que sea «mobile friendly».

Google reconoce los tres métodos de creación de sitios móviles y es compatible con ellos, pero recomienda el sitio responsive.

1. Responsive web design

El Responsive Web Design, también conocido con las siglas RWD, es una configuración en la que tu servidor envía el mismo código HTML a todos los dispositivos (ordenadores, tablets y móviles). La adaptación de la visualización de las páginas en función del dispositivo se realiza gracias al lenguaje CSS.

Para que Google detecte de forma automática la configuración del Responsive Web Design, evidentemente hay que autorizar a los users-agents Googlebot a explorar tu sitio, así como todos los elementos que lo componen (archivos CSS, javascript e imágenes).

Esto implica que los archivos CSS, javascript y las imágenes no se le prohíben al crawling en el archivo robots.txt

Desde el 21 de abril de 2015 Google recomienda este método.

2. Dynamic serving (publicación dinámica)

El Dynamic serving (en español, publicación dinámica) es una configuración en la que tu servidor difunde un código HTML y CSS diferente en la misma URL. Esta diferencia en la visualización se define en función del user-agent que solicita acceder a la página.

El User Agent es una firma que todos los navegadores envían (ya sea desde móvil, tablet u ordenador). Por lo tanto, esto le permite saber al servidor web que alberga el sitio web en cuestión qué contenido apropiado debe reenviar.

Si se trata de un user agent para ordenador que viene a explorar tu sitio, entonces se ocultará la versión móvil.

Cuando la visualización es dinámica, los user-agents no pueden saber de antemano que el sitio adapta el código HTML en relación con sus solicitudes.

Si optas por este método, Google recomienda (para facilitar su comprensión) configurar el servidor con el fin de que envíe una indicación clara al user-agent de smartphone para que este último explore eficazmente el contenido móvil.

Utiliza el encabezado HTTP «Vary» para indicar tus modificaciones en función del user agent.

3. Utilización de URL distintas para el sitio móvil.

En esta configuración, cada URL del sitio (ejemplo: www.misitio.com ), que se puede consultar a través de un ordenador, posee una URL equivalente (m. misitio.com) que permite mostrar contenido optimizado para los móviles.

¿Cómo hacer que mi sitio sea Mobile Friendly?

Si has diseñado tu sitio web con un CMS (sistema de gestión de contenido) y sabes con qué software se ha diseñado tu sitio web, consulta entonces los consejos que ofrece Google:

¿Cuáles son los errores que se deben evitar?

Para ofrecer un sitio mobile-friendly y mejorar de este modo el posicionamiento natural de tu sitio en los resultados de búsqueda móvil, estos son los errores que se deben evitar:

1. Archivos JavaScript, CSS e imágenes bloqueadas por el archivo robots.txt.

Asegúrate de que Googlebot pueda acceder a los archivos JavaScript, los CSS y las imágenes que constituyen tu sitio.

Si tu archivo robots.txt impide que Googlebot explore los archivos JavaScript, los CSS y las imágenes, esto perjudicará la exploración y la indexación de tu contenido en los resultados de búsqueda móviles.

2. Contenidos inaccesibles a través de los dispositivos móviles

Algunos tipos de vídeos o animaciones Flash no pueden verse en los dispositivos móviles. Para garantizar una accesibilidad total de los contenidos ofrecidos en tu sitio es preferible utilizar las etiquetas HTML 5.

3. Redirecciones incorrectas

Si has elegido utilizar URL distintas para la versión móvil de tu sitio, entonces asegúrate de que haya una correspondencia perfecta entre las urls web y las urls móviles.

La página web A debe redirigir hacia la página móvil A.

4. Generación de errores 404 únicamente en los móviles

Si detectas que un visitante accede a una página para ordenador desde un dispositivo móvil, si tienes el equivalente en una url móvil específica, redirige entonces de forma automática al internauta hacia esta última.

Asegúrate de que la página móvil ofrece adecuadamente el contenido que busca el visitante.

5. Carga lenta en los móviles

El tiempo de carga es un criterio importante para el posicionamiento natural de un sitio web.

Este criterio es aún más importante cuando los internautas usan el móvil en movimiento y no siempre tienen la misma calidad de conexión en su móvil que en su casa.

Para verificar el tiempo de carga de tus páginas: Page Speed