El SEO detrás del “Responsive Design”

El Responsive Web Design – o traducido el “diseño web adaptativo” – es una técnica de diseño y desarrollo web que permite mostrar un diseño adaptado para cada dispositivo (escritorio, tablet, smartphone) mantenidendo una única URL mediante CSS 3.

Google ya recomendó esta técnica hace más de medio año y por lo que se va viendo, es positivo para el SEO. Junto con otras cosas, parece que el RWD va a ser uno de los puntos fuertes de ahora en adelante.

El incremento de usuarios web a través de móviles y tables es cada vez más importante, por lo que cada vez es más necesario mostrar la “versión móvil” y la “versión tablet” para optimizar el marketing online y mejorar la experiencia del usuario.

La idea detrás es simple: se divide el contenido en bloques independientes y en función del dispositivo se ordenan de una u otra forma.

microsoft-responsive-design
(ejemplo de responsive design de Microsoft)

El Responsive Design es bueno para el SEO

EL diseño web adaptativo no solo es una solución simple y elegante para un problema bien definido, sino que también es una técnica beneficiosa para el SEO:

  • Usabilidad – El usuario obtiene el contenido de una forma clara y ordenada desde cualquier dispositivo
  • Simplificación y reducción de costes – Se pasa a trabajar en un solo diseño y código y un solo posicionamiento. Mismo código, mismo diseño, mismo SEO.
  • Contenido duplicado – La versión móvil de una web no cuenta como contenido duplicado, pero ya nos lo podemos ahorrar.
  • Analítica – Una sola web, un solo seguiemiento.
  • Rankings para móviles – La web pasa a estar optimizada para móviles, por lo que rankeará bien, como si fuera la versión móvil.
  • Link Building – El enlace a cualquier versión tiene la misma url.

Lo negativo del Responsive Design

Estamos empezando con esta técnica, pero de momento no hay demasiados puntos negativos:

  • Tiempo de carga – El tiempo de carga aumenta por la necesidad de cargar HTML/CSS innecesario
  • Imágenes – Las imágenes simplemente cambian de tamaño, pero no de peso.
  • El cambio – El cambio inicial a este sistema será una carga adicional para el equipo de desarrollo. Pero una vez dado el paso, las futuras actualizaciones serán más sencillas.
  • Mucho contenido – Aunque la forma de mostrar los bloques cambie, el contenido es el mismo para todas las versiones, por lo que la versión móvil tendrá el mismo contenido que la de escritorio, lo que puede ser un problema.

¿Necesito cambiar al diseño web adaptativo?

Para saber si nuestra página se vería beneficiada del responsive design, basta con mirar las estadísitcas:

  1. Mirar las principales “resoluciones de pantalla” de nuestras visitas
  2. Mirar si los usuarios obtienen lo que quieren en cada una de estas resoluciones: rebote, tiempo en página, etc.
  3. Repetir el punto anterior una vez realizado el cambio
  4. ¿Son mis usuarios suficientemente móviles?

Algunos consejos a la hora de realizar el cambio

El mejor consejo es ir comprobando paso a paso cómo se ven afectados todos los aspectos web haciendo las cosas poco a poco: cambios en la versión principal, en los usuarios móviles, en la publicidad.

  • Colocar un enlace bien visible en todo momento de “ver versión completa”. Hay muchos usuarios que no qiuieren ni en pintura una versión distinta a la principal.
  • Mostrar siempre todo el contenido – La idea es que cualquier versión es igual de importante.
  • Optimizar para el uso al tacto – Tener presente que los dispositivos móviles se usan con el dedo. Tema de menús onmouseover js y navegación en general.
  • Usar imágenes comprimidas – Siempre es importante la optimización de las imágenes, pero con las versiones móviles es casi imprescindible.
  • Hay infinitas resoluciones – Tenemos todos tipo de resoluciones en móviles y tablets. Empezar con la pantalla pequeña e ir expandiendo.
  • Y navegadores – tener en cuenta todos los navegadores: IE, Firefox, Chrome, Safari, Dolphin, Opera, Default Android Browser.

Algunos recursos:

¿Has cambiado o piensas cambiar al responsive design? Cuéntanos tu experiencia.

7 opiniones en “El SEO detrás del “Responsive Design””

  1. Muy buen post! Enhorabuena! :)

    En varios foros SEO siempre se abre el debate si el Responsive es más beneficioso para el SEO o no.
    En el caso de mi empresa si que nos hemos pasado a un diseño Web Responsive.
    El trabajo que realices a nivel de SEO podrá aplicarse en ambas versiones reduciendo el tiempo invertido. El trabajo en generación de links de calidad hacia tu web, optimización onsite, etc, se optimiza :)

    Lo que si que notamos es que en soporte móvil el tiempo de carga se alarga y pierdes un poco de calidad en cuanto a experiencia de usuario.

    También hay que decir en contra que la cantidad de texto colocada en un site, transformado en responsive tras consultarlo en móvil a veces se hace pesado, o incluso excesivo.

    Como hace poco que hemos hecho el cambio queremos monitorizar como afecta este diseño adaptativo y sus contras en la calidad de las visitas que tenemos hasta el momento.

    A ver qué tal! :)

    Un saludo!

  2. Sin duda es una gran ventaja diseñar websites de esa manera y como todo en la vida tiene desventajas, este tema no sera la excepción.

    Pero en uno de los puntos negativos dices que puede haber “Mucho contenido” debido a que “el contenido es el mismo para todas las versiones” Esto no es cierto. Con “CSS” y “Media Queries” que es lo que usamos para hacer un diseño “responsive” puedes mostrar o no mostrar contenido del sitio dependiendo del dispositivo.

    Saludos!

  3. Buen post, aunque necesita puntualizaciones.

    Primero, a @Helmer Galvis, no es así, porque realmente aunque ocultes un contenido con CSS el contenido está, y éste carga ;-) Otra cosa es que en el navegador del usuario lo ocultes.

    Respecto al post, puntualizaciones:

    Haces alusión a 4 problemas, Tiempo de carga, Imágenes, El cambio, Mucho contenido.

    De las cuales, solo estoy de acuerdo 100% en “El cambio”, pero las otras pueden no ser tal cual las reflejas.

    “Tiempo de carga”: Utilizando la técnica “mobile-first” (que desde mi punto de vista es la más idónea), no tienes porque perder tiempo de carga, ya que todo el contenido “adicional” lo puedes cargar mediante js/ajax en función del dispositivo, teniendo una versión que sea realmente rápida, y a medida que “sabes” que el usuario tiene mejor conexión, pantalla, y demás, ir mostrando más contenido (evidentemente todo este contenido extra es eso, extra… y todo lo que quieres que realmente tenga el SEO será lo primero que cargue).

    “Las imágenes”: Realmente tampoco es así 100%. Ya que sí son diferentes imágenes, lo más lógico es que guardes (o generes mediante script de servidor) diferentes tamaños de imágenes, y por supuesto, con diferentes pesos y tamaños.

    “Mucho contenido”: Es lo mismo del punto “Tiempo de carga”. Utilizando un buen mobile-first no hay tanto problema en eso. Utilizar RWD para simplemente, “ocultar” contenido es una muy mala práctica.

    Saludos, ¡y gracias por el post!

  4. Muchachos, el Responisve Design es algo que ha surgido de la necesidad de adaptar las paginas web a los moviles y aunque tenga sus desventajas, ya existen millones que lo usan… a como dicen: nada es perfecto.

    Me gustaría aportar un recurso que ha sido recomendado en muchos sitios web para probar sitios con Responsive Design: http://herramientas-online.com/responsive/responsive-design-test-online.php

    Es una herramienta bastante util y sencilla de usar… y lo bueno es que está en español.

Deja un comentario

Tu dirección de correo electrónico no será publicada.