El auge de los dispositivos móviles ha hecho imperativo la implementación de un diseño adaptable o 
adaptativo en nuestro sitio web. El diseño adaptable (también denominado responsive, responsivo o receptivo, según a quien preguntes) es aquel que muestra el mismo diseño en cualquier tamaño de pantalla, es decir, que muestra el mismo código HTML mediante una sola URL y consulta de medios CSS que modifican la presentación de la página determinando cómo se muestra el contenido en el dispositivo.En otras palabras, el número de columnas de la página se adapta a la resolución de la pantalla.
Esta es la configuración recomendada por Google, ya que el diseño adaptable elimina los posibles fallos de detección de los user-agents y se evitan los redireccionamientos y problemas derivados de tener varias versiones para una sola URL canónica (ahora solo se indexaría una única versión de la URL), además de ayudar a Google a rastrear mejor su contenido. También se evitarían errores al acceder al sitio web en concreto desde los enlaces que los usuarios comparten en medios sociales tales como Facebook, Twitter, etc y que pueden acabar en error dependiendo de qué enlace se copió, desde qué dispositivo se copió y desde qué dispositivo se accede.Como beneficios adicionales, obtendremos una menor tasa de rebote de los usuarios al mejorar la experiencia de navegación y una mayor tasa de conversiones al facilitar las acciones del usuario. Todas estas mejoras en la usabilidad y accesibilidad del sitio, redundará en un mejor SEO.
Esencialmente, un buen diseño adaptable es aquel que:
– Se adapta a las pantallas de cualquier dispositivo
– Permite que las páginas se van bien en todos los navegadores
– Permite que sus páginas de lean con claridad a cualquier resolución
– Hace innecesario el uso de una de scroll horizontal
– Posee imágenes flexibles en contraposición a las imágenes de ancho fijo
– Carga rápidamente sin perder calidad en sus imágenes.
Algunas consideraciones respectoa al SEO para la implementación de diseños web adaptables
– Si tienes otra versión de tu URL para móviles retira, si los tienes, los redireccionamientos y el encabezado HTTP «Vary: user-agent« que tengas en la URL para ordenadores.
– Si tienes direcciones URL para móviles, redirecciona las URL específicas para móviles a las URL para ordenadores; para hacerlo, utiliza los redireccionamientos HTTP 301 del lado del servidor (pero no utilices redireccionamientos de JavaScript).
– Utiliza la siguiente consulta de medios CSS: @media only screen and (max-width: 640px) {…}.
– Una vez establecido el diseño adaptable para nuestra página, es muy importante destacar que el acceso a los archivos de imágenes, CSS y JavaScript no deben estar bloqueados en el archivo robots.txt ya que los bots de Google deben acceder a ellos para que puedan procesar todo el contenido del modo adecuado.
– Si utilizas WordPress, puedes utilizar el plugin Simple Responsive Images para convertir tus imágenes en flexibles.
– Utiliza el comprobador de rastreo de las herramientas para webmasters de Google para comprobar que todo está correcto.