Google recomienda el uso del diseño web sensible

  • Google

Google recomienda el uso del diseño web sensible

Diseño 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:

  1. CSS:
    @media only screen and (max-width: 640px) {...}
    
  2. Cabeceras HTTP:
GET /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:
  • <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" >
    
    <link rel="canonical" href="http://www.example.com/page-1" >
    
    <?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.

    2017-03-27T18:07:37+02:00 Lunes, 11 de Junio de 2012|Categorías: Art Project Group|Etiquetas: , , , , , , , , |Sin comentarios

    Deje un comentario

    Comparte esto con un amigo