Responsive Web Design: Everything has Changed

0fe2973fa8d27d96547e43322341183a?s=47 Swwweet
June 17, 2012

Responsive Web Design: Everything has Changed

Presentation by @htmlboy at Drupal Developers Day Barcelona 2012.

0fe2973fa8d27d96547e43322341183a?s=128

Swwweet

June 17, 2012
Tweet

Transcript

  1. RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN everything

    has changed Javier Usobiaga #DrupalDevDays
  2. @htmlboy @htmlboy @htmlboy I work at Swwweet.com

  3. WHAT IS responsive web design? WHAT IS responsive web design?

    WHAT IS respoNsive web design?
  4. WHAT IS THE web? WHAT IS THE web? WHAT IS

    THE web?
  5. CONTROL CONTROL CONTROL a tale of obsession

  6. 1990s 1990s 1990s the web is 800px wide

  7. 2000s 2000s 2000s the web is 1024px wide

  8. 2007 2007 2007 + the web is 1024px & 320px

    wide
  9. 2010 2010 2010 + + the web is 1200px &

    320px & 768px wide
  10. 2012 2012 2012 + + the web is 1200px &

    320px & 768px & 1800px wide +
  11. 2012 2012 2012 + + 320px? +

  12. 2012 2012 2012 the web is 256px & 320px &

    426px & 480px & 560px & 640px & 768px & 800px & 960px & 1024px & 1280px & 1440px & 1600px & 1800px… + + + +
  13. ENOUGH! ENOUGH! ENOUGH!

  14. ENOUGH! ENOUGH! ENOUGH! it’s time to accept the web’s nature

  15. THE WEB IS THE WEB IS THE WEB IS fluid

    universal multidevice
  16. first act RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN RESPoNSIVE WEB

    DESIGN
  17. 2012.dconstruct.org

  18. mediaqueri.es

  19. BUT HOW? BUT HOW? BUT HOW? flexible grids flexible media

    @media queries
  20. GRIDS GRIDS GRIDS 16% 16% 16% 16% 16% 16% 16%

    16%
  21. target context ÷ result GRIDS GRIDS GRIDS

  22. .grid_3{width:300px} 300 / 960 = 0,2340 .grid_3{width:23.40%} GRIDS GRIDS GRIDS

  23. MEDIA MEDIA MEDIA img, video{ max-width:100% }

  24. MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES @media screen and (max-width:320px){

    .side_column{ width: 100%; float: none; } }
  25. MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES change the layout change

    the styles increase the font size
  26. RESPoNSIVE challenges RESPoNSIVE challenges Responsive challenges second act

  27. Navigation Navigation Navigation

  28. Navigation Navigation Navigation menu contact work about contact work about

  29. bit.ly/rwd-nav

  30. LAYOUT LAYOUT layout 1 2 3 4 6 5

  31. 3 2 LAYOUT LAYOUT layout 1 3 1 2 4

    5 6
  32. LAYOUT LAYOUT layout

  33. IMAGES IMAGES images wide screens high-res screens small screens

  34. IMAGES IMAGES images bigger images javascript loading sever-side solutions

  35. bit.ly/rwd-images

  36. IMAGES IMAGES images CSS3 SVG icon fonts

  37. workflow workflow workflow third act

  38. WATERFALL WATERFALL WATERFALL UX / IA DESIGN VISUAL DESIGN DEV

    BOSS
  39. Hi, I want a website… WATERFALL WATERFALL WATERFALL

  40. Sure thing! WATERFALL WATERFALL WATERFALL

  41. First things first. We’ll need some wireframes to set the

    structure. WATERFALL WATERFALL WATERFALL
  42. Some color and shiny things… WATERFALL WATERFALL WATERFALL

  43. A bit of CSS, a dash of JS... And voilà,

    our job here is done! WATERFALL WATERFALL WATERFALL
  44. Er... guys... WATERFALL WATERFALL WATERFALL

  45. FAIL fail Fail

  46. responsive responsive Responsive

  47. ten tips ten tips ten tips fourth act

  48. 1. Communication Between the whole team, during the whole project.

  49. 2. Design & dev, together A lot of decissions have

    to be taken along the way.
  50. 3. Micro-deliveries Client takes part actively and makes decisions.

  51. 4. Content first Make an inventory of the content and

    find its limitations.
  52. 5. Find the critical points Navigation, images, ads, information hierarchy…

  53. 6. Mobile first The small screen is the first limit.

  54. 7. Reference sketches Make basic sketches to help with the

    hierarchy of the content.
  55. 8. Prototype fast The sooner you start coding your HTML,

    the better.
  56. 9. Design in the browser Make design decisions as you

    see the result on the browser.
  57. 10. All screens at once When developing, always think about

    all screen sizes.
  58. TO RECAP TO RECAP TO RECAP

  59. TO RECAP TO RECAP TO RECAP you can’t control the

    web
  60. TO RECAP TO RECAP TO RECAP you can’t control the

    web RWD is a viable solution
  61. TO RECAP TO RECAP TO RECAP you can’t control the

    web RWD is a viable solution if we change our mentality
  62. thanks! thanks! thanks! Javier Usobiaga · http://Swwweet.com · @htmlboy