Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Web Design

11,811 views

Published on

La ponencia que hemos dado en el ClinicSEO sobre Responsive Web Design, puedes verla comentada en http://moon.es/uhf/

Responsive Web Design

  1. 1. Arturo Marimón | @arturomarimon RESPONSIVE WEB DESIGNBe water my friend
  2. 2. Arturo Marimón | @arturomarimonOptimizadopara …
  3. 3. Arturo Marimón | @arturomarimon 3.997 dispositivos AndroidA dia de hoy http://opensignalmaps.com/reports/fragmentation.php
  4. 4. Arturo Marimón | @arturomarimonRWD: Logical
  5. 5. Arturo Marimón | @arturomarimonhttp://moon.es
  6. 6. Arturo Marimón | @arturomarimonhttp://moon.es
  7. 7. Arturo Marimón | @arturomarimonhttp://moon.es
  8. 8. Arturo Marimón | @arturomarimonhttp://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 | @arturomarimonGoogle y el RWD
  11. 11. Arturo Marimón | @arturomarimon• Diciembre 2011Google publica el lanzamiento de sus botsmobile http://googlewebmastercentral.blogspot.com.es/2011/12/intro ducing-smartphone-googlebot-mobile.html• Mayo 2012Google 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 milloneshttp://venturebeat.com/2012/01/10/paypals-mobile-payments-4b-2011/
  13. 13. Arturo Marimón | @arturomarimonMade in Spain http://www.starbucks.com/static/reference/styleguide/
  14. 14. Arturo Marimón | @arturomarimonMade in Spain
  15. 15. Arturo Marimón | @arturomarimon Responsive Web Designno es mobilefriendlyes default
  16. 16. Arturo Marimón | @arturomarimon Mobile firsthttp://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 | @arturomarimonMismojuego / más variables
  20. 20. Arturo Marimón | @arturomarimonEstoya no son 20 píxeles
  21. 21. Arturo Marimón | @arturomarimon•Ancho de divs•Tipografía•Ancho de lasimágenes• Media QueriesTodoesproporcional
  22. 22. Arturo Marimón | @arturomarimon<div>proporcionalesLa estructurafluidade todala vida. 22.9% 70.83% 680px / 960px = 70.83%
  23. 23. Arturo Marimón | @arturomarimon Tipografía: Hazlofácilhttp://informationarchitects.net/blog/responsive-typography-the-basics/
  24. 24. Arturo Marimón | @arturomarimonpx, em o rem
  25. 25. Arturo Marimón | @arturomarimonemel ancho de la Mh1 { 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 | @arturomarimonPERO ¿ HAYALGUIENMAS?
  27. 27. Arturo Marimón | @arturomarimon62.5% +
  28. 28. Arturo Marimón | @arturomarimonrem Firefox 3.6 +, Chrome, Safari 5, y IE9html { 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 | @arturomarimonFluid images /* adaptables al dispositivo */ img{max-width:100%;} Las imágenes tienen 2 problemas http://bit.ly/responsive-img
  30. 30. Arturo Marimón | @arturomarimonMediaQueries
  31. 31. Arturo Marimón | @arturomarimonCSS3 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 firstCSS 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 | @arturomarimonBreakpoints mágicos
  34. 34. Arturo Marimón | @arturomarimonhttp://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 pxsino en em
  37. 37. Arturo Marimón | @arturomarimonFrameworksFoundation 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 | @arturomarimonEL WPO es clave
  39. 39. Arturo Marimón | @arturomarimonPerformanceAplica las mismas normas que la web yalgunas 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 | @arturomarimonPerformance tools Ahora para móvil Blaze.io/mobile/
  41. 41. Arturo Marimón | @arturomarimonThe man from the moon ARTURO MARIMÓN http://moon.es http://bit.ly/clinic-rwd

×