Responsive Web Design y SEO

Responsive Web Design

¿Qué es el Responsive Web Design?

Debemos entender por Responsive Web Design como una forma de diseñar webs basada en el diseño fluido de capas.

En este post trataré de analizar las ventajas para cada parte implicada en la publicación de un sitio web diseñado bajo esta técnica. También explicaré por qué es altamente recomendable su utilización desde el punto de vista del SEO.

La técnica del Responsive Web Design combina CSS, algo de CSS3 y Java Script con el objetivo de conseguir páginas web que se adaptan al dispositivo desde el que se ven. El objetivo del Responsive Web Design es conseguir una experiencia de usuario satisfactoria independientemente del dispositivo desde el que se consulte la web.

No es la intención de este post entrar en detalles de como funciona este tipo de diseños a nivel de programación o de código. Simplemente apuntaré que utiliza las @media queries de CSS3 para que, dependiendo del ancho del dispositivo de salida se aplique un código CSS u otro.

A pesar de que estamos preparando un artículo introductorio para abordar estos aspectos, os invito a que ampliéis información al respecto del post de referencia sobre Responsive Web Design que publicó su creador Ethan Marcotte (un genio todavía infravalorado). También os recomiendo encarecidamente que os hagais con una copia del libro que dio origen a todo esto “Responsive Web Design” del mismo autor. Lamentablemente solo está disponible en inglés, pero no tiene desperdicio. Además, lo podeis encontrar en formato digital en todas las plataformas. Que como es ‘Responsive’ se le genial en todos los dispositivos 😉

Siempre que aparece CSS3 aparece algún Pepito Grillo recordando que algunos navegadores no soportan CSS3. Cierto, todavía quedan amantes de IE antiguos (inexplicable pero cierto) a los que hay que tener en cuenta. Para ellos existen varios hacks que funcionan a la perfección. Os recomiendo un artículo (de tantos) de CristalLab “Cómo hacer CSS3 compatible con Internet Explorer 6, 7 y 8” que os puede ayudar al respecto.

Así, si vemos una página web con diseño ‘responsive web design’ desde un ordenador de sobremesa con un ancho de navegador de 1200px, la página mostrará un tamaño de fuentes, de imágenes y una disposición de sus elementos distinta a la que se mostrará si se ve la página en un Smartphone o en un Tablet en modo panorámico o en modo portrait.

Ventajas del Responsive Web Design para el usuario

Las ventajas del Responsive Web Design para el usuario son evidentes: la experiencia de usuario siempre será satisfactoria, sea cual sea el dispositivo desde el que se conecte. (Se acabó lo de hacer zoom en el Smartphone para poder pulsar el botón ☺.)

Las ventajas del Responsive Web Design para el diseñador Web

La alternativa a realizar una página con Responsive Web Design que se pueda usar correctamente en diferentes dispositivos pasa por generar una versión de la misma web para cada tipo de dispositivo y alojarlas en distintos dominios a los que se redirigirá al usuario dependiendo del dispositivo desde el que se conecte.

Esto es por una parte mucho más trabajo de diseño (se multiplicará el trabajo por el número de webs a diseñar). Por otra parte habrá que mantener en cada sitio generado los cambios que se realicen en contenido. Esto supone un trabajo extra que crea resistencias a la ampliación o actualización de la página.

Con una web diseñada bajo los estándares del Responsive Web Design diseñamos una web que se adaptará a todas las resoluciones. Una vez diseñada la web sabemos que se ‘verá bien’ en cualquier dispositivo. Si se ha de actualizar algo, se hace una sola vez, puesto que la página es la misma.

Ventajas del Responsive Web Design para el propietario de la Web

Por una parte (lo más importante) se asegura una usabilidad de su web “todo terreno” bajo una sola dirección.

Por otra parte, al encargar una web ‘responsive’ se está ahorrando dinero, pues encarga una sola web. Es obvio que está web es un poco más elaborada que una página ‘tradicional’ basada en un ancho fijo de, por ejemplo, 960px. Por lo tanto es lógico pensar que será también más cara. Pero siempre será más rentable si consideramos que al encargar un diseño para midominio.com adaptable nos evitamos encargar también la web movil.midominio.com y ipad.midominio.com,… y cada día más. Además, a la hora de costear un mantenimiento será mucho más fácil y económico mantener una sola web.

¿Por qué el Responsive Web Design ayudará a mi SEO?

Todas las acciones necesarias que tomará el SEO para posicionar una web serán mucho más fructíferas si las efectúa sobre un solo site que si lo tiene que hacer con varios (uno para cada dispositivo)

Aunque el concepto es bastante sencillo lo ilustraré con un ejemplo.

CASO A:
Se encarga el diseño de la web midominio.com a un profesional que genera 3 páginas:
  • midominio.com (preparado para resoluciones de un ordenador estándar
  • movil.midominio.com (preparada para resoluciones menores a 480px de ancho)
  • ipad.midominio.com (preparada para resoluciones propias de este dispositivo en modo panorámico)

Siendo benévolo supondré que la gran mayoría de usuarios solo se conecta a la página desde estos 3 tipos de dispositivos.

CASO B:
Se encarga el diseño de la web midominio.com a un profesional que genera 1 sola web bajo el dominio midominio.com
Esta web es adaptable a todos los dispositivos existentes (y por existir) no viéndose afectada la experiencia del usuario en ningún caso.

Trabajando el SEO de ambos casos

Análisis inicial, estudio de palabras clave, análisis de la competencia, optimización de contenido y motores de búsqueda,… entre otros serán procesos comunes en ambos casos.

El problema le surge al SEO que le toca posicionar el caso A cuando llega a la fase de linkbuilding. Los enlaces entrantes de calidad cuentan y han contado siempre mucho para que Google determine la relevancia de una página con respecto a la competencia.
En el CASO B, (con Responsive Web Design) cada referencia en las redes sociales, cada enlace desde otras webs contará a favor de la página ante los motores de búsqueda.

Sin embargo, en el CASO A se produce lo que yo llamo Canibalismo de Recursos SEO. Si alguien comparte un contenido de nuestra web en Facebook, por ejemplo, no lo hará hacia el mismo sitio si lo hace conectándose desde un iPhone que desde un PC. En el primer caso, el enlace lo recibirá movil.midominio.com, mientras que en el segundo lo recibirá midominio.com

Ahora supongamos que la página ya tiene 5 enlaces entrantes:

  • 3 enlaces en midominio.com
  • 1 enlace en movil.midominio.com
  • 1 enlace en ipad.midominio.com

La página del CASO B (con Responsive Web Design) contará con 5 enlaces entrantes.

Sin embargo, la página del CASO A se habrá repartido los enlaces entre las distintas URLs. El esfuerzo ambos SEOs habrá sido el mismo, pero el diseño es el factor determinante.

Las webs con diseños adaptables se llevarán las mejores posiciones en las SERP, venderán más y los SEOs de estas páginas serán los más populares de la discoteca (… bueno, esto último tal vez no).

¿Que dice Google del Responsive Web Design?

Como siempre, habrá que escuchar a Google. Al fin y al cabo es el que tiene la última palabra en estos temas.

Me remitiré a un comunicado que Pierre Far publicó el pasado 6 de junio en el Webmaster Central blog sobre las Recomendaciones Para Construir Sitios Optimizados Para Smartphone (en inglés)

En este post se resumen las recomendaciones de Google al respecto y deja meridianamente clara la preferencia de Google por los sitios desarrollados con Responsive Web Design. El argumento para recomendar este tipo de diseño frente a otros no es más que el que venimos señalando en este post: bajo una misma URL, y con un mismo código HTML se muestra la misma página a todos los dispositivos.

Tener una única URL será lo más apropiado para:

  • Facilitar la indexación por Google
  • Es más fácil para los usuarios interactuar con una sola URL que hacerlo con una para cada dispositivo.

Si bien es cierto, que en el mismo documento reconoce la posibilidad de otras dos alternativas (páginas que redirigen a la url de versión móvil de forma dinámica o distintas url para cada dispositivo) Asegura que es capaz de administrar siempre y cuando se cumplan ciertos requisitos a implementar en el código en cuanto a indicar cual es la página alternativa y las redirecciones a la página principal, pero las desaconseja siempre y cuando sea posible aplicar diseños ‘Responsive’

Conclusión

Estoy seguro de que tras este breve análisis muchos seguirán empeñados en seguir empezando sus diseños web con un <wrapper” style=”width=960px”>, pero no creo que se puedan argumentar motivos objetivos (… o si?) La resistencia al cambio es una condición humana que también se dará en este sector. Es más fácil continuar con lo que sé hacer y me siento cómodo que aprender a cambiar.

Sin embargo el cambio es sumamente sencillo de aprender y las ventajas son enormes para todos:

  • usuario: ganará una experiencia más satisfactoria
  • webmaster: simplifica el trabajo al realizar una sola página, y además, (al menos por ahora), estos diseños están más cotizados
  • propietario del sitio: reduce costes de diseño y mantenimiento al tratarse de un solo site para todos los dispositivos
  • SEO: que verá como el linkbuilding resulta más efectivo pues “la unión hace la fuerza”

Por otra parte, Google se ha pronunciado y a dicho que esta es su opción favorita. Si analizamos el pasado para tratar de prever el futuro podremos suponer que, como en otras ocasiones, Google acabará premiando a las webs que cumplan con este estándar frente a otras que no lo hagan.

Artículos Relaccionados:

About The Author

Related Posts