Ventajas del RWD:

- Una unica URL

- Un único contenido

- 1 millón de dispositivos, un sólo código

Dic 2011 Google publica el lanzamiento de sus bots mobile

http://googlewebmastercentral.blogspot.com.es/2011/12/introducing-smartphone-googlebot-mobile.html

May 2012 Google recomienda el RWD

http://googlewebmastercentral.blogspot.com.es/2012/04/responsive-design-harnessing-power-of.html

En España copiamos más que pensar en hacer las cosas bien, según Arturo, vamos 6 meses detrás del mercado. Cita el caso de Starbucks, elpais.com, elmundo.es….

El concepto que resalta Arturo es que RWD no es Friendly, sino Default, para continuar explicando la teoría del mobile first, sobre todo desde el prisma de priorizar en contents, seguir con diseño y después el css, recurso explicados en http://www.html5rocks.com/en/mobile/responsivedesign/?redirect_from_locale=es

Sobre las medidas  y los píxeles, ahora hablamos de ancho de divs, capas proporcionales, “la estructura fluida de toda la vida”.

En cuanto a la tipografía, tenemos que considerar los diversos dispositivos desde los que nos visualizan los usuarios, como se usan esos dispositivos, en detrimento de desktop.

Medida a tener en cuenta, “em” el ancho de la M, teniendo en cuenta el contexto de los elementos, que pueden complicar esto.

Facilitar esto? La regla del 62.5% y el rem. Aplicando ese porcentaje en el html,usando rem, que a diferencia de em, se aplicará al root, la raíz, para no caer en las complicaciones del punto anterior.

Para navegadores más peleones, usar pixeles y luego pasar a rem.

Sobre imágenes, nos comenta que existen dos problemas:

- La velocidad de carga, se redimensiona la imagen para la versión mobile y pesa bastante, algo que dificulta la navegación

- A veces hay que mostrar distintas imágenes en versión desktop y mobile, ya que podemos perder información al redimensionar. Ya sea cambiando a otra imágen, o al menos, que muestre la parte de imágen que contiene información, para que el usuario lo reciba por ambas vías.

Continua hablando sobre media queries, optimizando el css basico de mobile, usando min-width

Los breakpoints:

- El contenido marca el breakpoint, no el dispositivo

- No debe estar en px sino en em.

Frameworks recomendados:

- Foundation 3

- Cssgrid

- Goldengridsystem

- Less framework

- Gridpack

PAra acabar, a nivel WPO, recomienda tener en cuenta las mismas normas que consideramos para web como:

- Tamaño de imagenes por dispositivo

- Reduce número de elementos DOM

- Dividir css entre mobile/desktop no  ayuda.

Herramientas para testear:

- Webpagetest

- Blaze

Resumen de Clinic SEO en la web Moon y disponible toda la charla de Arturo en slideshare:

Maria José Cachón

Diplomada en Ciencias Empresariales, me zambullí en el mundo online con un Máster de Marketing Digital, seguido de otro de Introducción a Desarrollo Web. Consultora SEO, aprendiz constante de Analítica Web y asidua a todo lo Social. Adicta a la Coca Cola Zero, a Twitter, a Michael Jordan y al SEO!