Successfully reported this slideshow.
Your SlideShare is downloading. ×

Responsive Web Design

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 41 Ad
Advertisement

More Related Content

Advertisement

Responsive Web Design

  1. 1. Arturo Marimón | @arturomarimon RESPONSIVE WEB DESIGN Be water my friend
  2. 2. Arturo Marimón | @arturomarimon Optimizadopara …
  3. 3. Arturo Marimón | @arturomarimon 3.997 dispositivos Android A dia de hoy http://opensignalmaps.com/reports/fragmentation.php
  4. 4. Arturo Marimón | @arturomarimon RWD: Logical
  5. 5. Arturo Marimón | @arturomarimon http://moon.es
  6. 6. Arturo Marimón | @arturomarimon http://moon.es
  7. 7. Arturo Marimón | @arturomarimon http://moon.es
  8. 8. Arturo Marimón | @arturomarimon http://moon.es
  9. 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. 10. Arturo Marimón | @arturomarimon Google y el RWD
  11. 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. 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. 13. Arturo Marimón | @arturomarimon Made in Spain http://www.starbucks.com/static/reference/styleguide/
  14. 14. Arturo Marimón | @arturomarimon Made in Spain
  15. 15. Arturo Marimón | @arturomarimon Responsive Web Design no es mobilefriendlyes default
  16. 16. Arturo Marimón | @arturomarimon Mobile first http://www.html5rocks.com/en/mobile/responsivedesign/
  17. 17. Arturo Marimón | @arturomarimon Content first + Design Mobile first + CSS Mobile first
  18. 18. Arturo Marimón | @arturomarimon ¿Que ha cambiadorealmente?
  19. 19. Arturo Marimón | @arturomarimon Mismojuego / más variables
  20. 20. Arturo Marimón | @arturomarimon Estoya no son 20 píxeles
  21. 21. Arturo Marimón | @arturomarimon •Ancho de divs •Tipografía •Ancho de lasimágenes • Media Queries Todoesproporcional
  22. 22. Arturo Marimón | @arturomarimon <div>proporcionales La estructura fluidade toda la vida. 22.9% 70.83% 680px / 960px = 70.83%
  23. 23. Arturo Marimón | @arturomarimon Tipografía: Hazlofácil http://informationarchitects.net/blog/responsive-typography-the-basics/
  24. 24. Arturo Marimón | @arturomarimon px, em o rem
  25. 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. 26. Arturo Marimón | @arturomarimon PERO ¿ HAY ALGUIEN MAS?
  27. 27. Arturo Marimón | @arturomarimon 62.5% +
  28. 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. 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. 30. Arturo Marimón | @arturomarimon Media Queries
  31. 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. 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. 33. Arturo Marimón | @arturomarimon Breakpoints mágicos
  34. 34. Arturo Marimón | @arturomarimon http://www.slideshare.net/yiibu/pragmatic-responsive-design
  35. 35. Arturo Marimón | @arturomarimon
  36. 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. 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. 38. Arturo Marimón | @arturomarimon EL WPO es clave
  39. 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. 40. Arturo Marimón | @arturomarimon Performance tools Ahora para móvil Blaze.io/mobile/
  41. 41. Arturo Marimón | @arturomarimon The man from the moon ARTURO MARIMÓN http://moon.es http://bit.ly/clinic-rwd

×