El documento habla sobre diseño web responsivo (RWD). Explica conceptos clave como usar una sola URL y código para múltiples dispositivos, optimizar el contenido y diseño para dispositivos móviles primero, y usar media queries y breakpoints para adaptar el diseño a diferentes anchos de pantalla. También recomienda usar unidades relativas como em y rem en lugar de pixeles para la tipografía, y hacer que las imágenes y elementos sean proporcionales y fluidos.
9. Arturo Marimón | @arturomarimon
Queventajastiene RWD
• Una única URL.
• Un único contenido.
• 1 millón de dispositivos. Un solo código.
Welcome back totheweb
11. Arturo Marimón | @arturomarimon
• Diciembre 2011
Google publica el lanzamiento de
sus botsmobile
http://googlewebmastercentral.blogspot.com.es/2011/12/intro
ducing-smartphone-googlebot-mobile.html
• Mayo 2012
Google recomienda el RWD
http://googlewebmastercentral.blogspot.com.es/2012/04/responsive-
design-harnessing-power-of.html
• Antes de Diciembre 2012
¿Qué creéis que pasará?
12. Arturo Marimón | @arturomarimon
2009 - $141 millones
2010 - $750 millones
2011 - $4.000 millones
http://venturebeat.com/2012/01/10/paypals-mobile-payments-4b-2011/
13. Arturo Marimón | @arturomarimon
Made in Spain
http://www.starbucks.com/static/reference/styleguide/
25. Arturo Marimón | @arturomarimon
em
el ancho de la M
h1 { font-size: 1.75em; /* 28px/16px */}
p { font-size: .875em; /* 14px/16px */}
pspan { font-size: 1.2857em; /* 18px/14px */ }
Contexto del elemento es complicado
39. Arturo Marimón | @arturomarimon
Performance
Aplica las mismas normas que la web y
algunas nuevas como:
• Tamaño imágenes según dispositivo
• Reduce el número de elementos DOM
• Dividir cssmobile/desktop no ayuda