Google recomienda el uso del diseño web sensible

Google en la última entrada publicada en su Webmaster Central Blog recomienda el uso del diseño web sensible para la construcción de sitios web optimizadas para teléfonos inteligentes (smartphones).

Entre sus recomendaciones indica que sólo se debe emplear código CSS para optimizar la visualización del sitio web a los dispositivos móviles, y en el caso en el que no sea posible emplear exclusivamente CSS para ello, que se generen distintas versiones del código HTML de forma dinámica o distintas URLs para obtener los mismos resultados, tener diferentes versiones del sitio web en función del dispositivo donde se visualiza.

Google incluso ha llegado a publicar una serie de recomendaciones para que los desarrolladores web realicemos nuestro trabajo lo más adecuadamente posible a sus propósitos. Donde nos muestran ejemplos prácticos de cómo utilizar las distintas tecnologías a nuestro alcance para poder a utilizar el diseño sensible en nuestros trabajos.

Los ejemplos que publican son:

• CSS:
Copiar al portapapeles
Syntax Highlighter@media only screen and (max-width: 640px) {...}
• Cabeceras HTTP:
Copiar al portapapeles
Syntax HighlighterGET /page-1 HTTP/1.1 Host: www.example.com (...rest of HTTP request headers...) HTTP/1.1 200 OK Content-Type: text/html Vary: User-Agent Content-Length: 5710 (... rest of HTTP response headers...)
• El uso de la etiqueta LINK en la versión de escritorio de la página web y de la versión móvil de la mismas, así como del archivo sitemap.xml:
Copiar al portapapeles
Syntax Highlighter<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" >
Copiar al portapapeles
Syntax Highlighter<link rel="canonical" href="http://www.example.com/page-1" >
Copiar al portapapeles
Syntax Highlighter<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"> <url> <loc>http://www.example.com/page-1/</loc> <xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" /> </url> </urlset>

Aunque existen otras formas de realizar este tipo de actuaciones, Google sólo nos muestra estos sencillos y simples ejemplos, y nos da unas importantes aclaraciones sobre el uso de las redirecciones, para no caer posibles penalizaciones.

Por último publica un completo listado de enlaces a distintos sitios web con información sobre los distintos estándares web publicados, validadores, emuladores y distintos recursos que nos pueden ser de gran ayuda.

Google de esta forma apuesta definitivamente por el uso del diseño web sensible y por su gran aportación a la usabilidad de nuestros sitios web.