Responsive Web Design

10,937 views
10,878 views

Published on

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

1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total views
10,937
On SlideShare
0
From Embeds
0
Number of Embeds
7,748
Actions
Shares
0
Downloads
83
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

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

×