Google amenaza: Hora de adaptarse a móviles

En los últimos días he recibido un par de mensajes del servicio de Google Webmaster Tools en el que me insta a mejorar el soporte para móviles en algunos de mis proyectos:

Google systems have tested 88 pages from your site and found that 100% of them have critical mobile usability errors. The errors on these 88 pages severely affect how mobile users are able to experience your website. These pages will not be seen as mobile-friendly by Google Search, and will therefore be displayed and ranked appropriately for smartphone users.

(las negritas son mías)

En este caso, son dos proyectos viejos que no creo que arregle (más bien es posible que los cierre) pero el mensaje que Google nos da es claro: Estamos en el 2015. Casi el 40% de los accesos a la web se hacen con dispositivos móviles. Es hora de adaptar nuestros sitios web al uso con móviles.

A continuación os dejo algunas referencias que he ido recopilando con el tiempo sobre diseño web responsive:

El artículo ya clásico Responsive Web Design, de Ethan Marcotte, explica el concepto y es una buenísima introducción.
Un buen libro (del mismo autor) para iniciarse es el de A Book Apart: Responsive Web Design. Aunque ya tiene unos años, explica las técnicas básicas y lo hace con ejemplos, que es lo importante.
Genbeta creó una serie con varios artículos de introducción. No obstante, advertir que el viewport que recomiendan a mi no me gusta nada, ya que impide que el usuario pueda hacer zoom. Yo prefiero el siguiente:

<meta name="viewport" content="width=device-width, initial-scale=1">

Para tomar ideas e inspirarse tenemos Media Queries. Un showcase de sitios web responsive donde podemos ver cómo los distintos diseños se adaptan a las distintas pantallas.
A Simple Device Diagram for Responsive Design Planning nos ayuda a decidirnos por los puntos de corte en los que cambiar los estilos. De todas formas, hoy en día, con el gran número de dispositivos existentes, cada uno con un tamaño de pantalla, los puntos de corte son cada vez menos importantes. Hay que hacer diseños que se vean bien en cualquier resolución.
El tema de las imágenes que se adaptan a cualquier resolución y a cualquier densidad de pantalla (retina) es un mundo aparte. Un par de artículos interesantes son Responsive Images For Retina: Using HTML5’s srcset y Responsive Images in Practice.
Por último, si tienes que presentar tus diseños responsive a un cliente hay un par de herramientas que te pueden interesar: Responsinator y Demostrating Responsive Design.