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.

1. Arturo Marimón | @arturomarimon
RESPONSIVE
WEB DESIGN
Be water my friend

2. Arturo Marimón | @arturomarimon
Optimizadopara …

3. Arturo Marimón | @arturomarimon
3.997 dispositivos Android
A dia de hoy
http://opensignalmaps.com/reports/fragmentation.php

4. Arturo Marimón | @arturomarimon
RWD: Logical

5. Arturo Marimón | @arturomarimon
http://moon.es

6. Arturo Marimón | @arturomarimon
http://moon.es

7. Arturo Marimón | @arturomarimon
http://moon.es

8. Arturo Marimón | @arturomarimon
http://moon.es

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

10. Arturo Marimón | @arturomarimon
Google y el RWD

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/

14. Arturo Marimón | @arturomarimon
Made in Spain

15. Arturo Marimón | @arturomarimon
Responsive Web Design
no es mobilefriendlyes default

16. Arturo Marimón | @arturomarimon
Mobile first
http://www.html5rocks.com/en/mobile/responsivedesign/

17. Arturo Marimón | @arturomarimon
Content first
+
Design Mobile first
+
CSS Mobile first

18. Arturo Marimón | @arturomarimon
¿Que ha cambiadorealmente?

19. Arturo Marimón | @arturomarimon
Mismojuego / más variables

20. Arturo Marimón | @arturomarimon
Estoya no son 20 píxeles

21. Arturo Marimón | @arturomarimon
•Ancho de divs
•Tipografía
•Ancho de lasimágenes
• Media Queries
Todoesproporcional

22. Arturo Marimón | @arturomarimon
<div>proporcionales
La estructura
fluidade toda
la vida. 22.9% 70.83%
680px / 960px = 70.83%

23. Arturo Marimón | @arturomarimon
Tipografía: Hazlofácil
http://informationarchitects.net/blog/responsive-typography-the-basics/

24. Arturo Marimón | @arturomarimon
px, em o rem

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

26. Arturo Marimón | @arturomarimon
PERO ¿ HAY
ALGUIEN
MAS?

27. Arturo Marimón | @arturomarimon
62.5%
+

28. Arturo Marimón | @arturomarimon
rem Firefox 3.6 +, Chrome, Safari 5, y IE9
html { font-size: 62.5%/* Base 10 */ }
body {font-size:16px; font-size:1.6rem;
/* 16px/10px */}
p {font-size:14px; font-size: 1.4rem;
/* 14px/10px */}
pspan { font-size:18px; font-size: 1.8rem;
/* 18px/10px */ }

29. Arturo Marimón | @arturomarimon
Fluid images
/* adaptables al dispositivo */
img{max-width:100%;}
Las imágenes tienen 2 problemas
http://bit.ly/responsive-img

30. Arturo Marimón | @arturomarimon
Media
Queries

31. Arturo Marimón | @arturomarimon
CSS3 Media queries
<link rel="stylesheet" ...media="screen and
(max-width:480px)" href="...">
@media screen and (max-width:480px) {
// insert CSS rules here
}
http://www.w3.org/TR/css3-mediaqueries/

32. Arturo Marimón | @arturomarimon
Media queries + Mobile first
CSS Básico Mobile …
@media screen and (min-width:480px) { …. }
@media screen and (min-width:768px) { …. }
@media screen and (min-width:960px) { …. }
@media screen and (min-width:1140px) { ….}

33. Arturo Marimón | @arturomarimon
Breakpoints mágicos

34. Arturo Marimón | @arturomarimon
http://www.slideshare.net/yiibu/pragmatic-responsive-design

35. Arturo Marimón | @arturomarimon

36. Arturo Marimón | @arturomarimon
Breakpoints
• El contenido marca el breakpoint
no el dispositivo
• El breakpointno debería ser en px
sino en em

37. Arturo Marimón | @arturomarimon
Frameworks
Foundation 3 Goldengridsystem
http://foundation.zurb.com/ http://goldengridsystem.com/
CSSgrid Less Framework
http://cssgrid.net/ http://lessframework.com/
GRIDPAK
http://gridpak.com/

38. Arturo Marimón | @arturomarimon
EL WPO es clave

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

40. Arturo Marimón | @arturomarimon
Performance tools
Ahora para móvil
Blaze.io/mobile/

41. Arturo Marimón | @arturomarimon
The man from the moon
ARTURO MARIMÓN
http://moon.es
http://bit.ly/clinic-rwd