Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Design and the state of the Web

Responsive Web Design and the state of the Web

More Decks by Yiannis Konstantakopoulos

Other Decks in Design

Transcript

  1. Responsive Web Design
    & the state of the Web
    porcupine.gr @yiannis_k

    View Slide

  2. “Responsive Web design is the approach that
    suggests that design and development should
    respond to the user’s behavior and
    environment based on screen size, platform
    and orientation. “
    - Kayla Knight on Smashing Magazine

    View Slide

  3. “The practice consists of a mix of flexible grids
    and layouts, images and an intelligent use of
    CSS media queries.“
    - Kayla Knight on Smashing Magazine

    View Slide

  4. As the user switches from their laptop to
    iPad, the website should automatically
    switch to accommodate for resolution, image
    size and scripting abilities. In other words, the
    website should have the technology to
    automatically respond to the user’s
    preferences.
    - Kayla Knight on Smashing Magazine

    View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. Why?

    View Slide

  16. Because this world is changing. Rapidly.
    http://www.flickr.com/photos/nasamarshall/5404263213/

    View Slide

  17. http://www.flickr.com/photos/thomashawk/76170826/

    View Slide

  18. http://www.flickr.com/photos/thomashawk/76170826/

    View Slide

  19. http://www.flickr.com/photos/nasamarshall/5404263213/

    View Slide

  20. http://www.flickr.com/photos/nasamarshall/5404263213/

    View Slide

  21. http://www.flickr.com/photos/emeryjl/520109861/

    View Slide

  22. http://www.flickr.com/photos/emeryjl/520109861/

    View Slide

  23. http://www.flickr.com/photos/jonathanharford/5217423633/

    View Slide

  24. http://www.flickr.com/photos/jonathanharford/5217423633/

    View Slide

  25. (Not so) boring numbers

    View Slide

  26. August 2011
    72.2 million Americans
    accessed social
    networking sites or
    blogs on their mobile
    device
    (+37% since 2010)
    Luke Wroblewski
    http://www.flickr.com/photos/pamhule/5709324762/

    View Slide

  27. May 2012
    79% of US smartphone
    and tablet owners have
    used their mobile
    devices for shopping-
    related activities.
    Luke Wroblewski
    http://www.flickr.com/photos/polvero/3422530445/

    View Slide

  28. May 2011
    iPad users spend 30% of their time on the
    device in front of television.
    Smartphone users spend 20% of their time on
    the device in front of the television.
    Luke Wroblewski

    View Slide

  29. What are you gonna do about it? *

    View Slide

  30. What are you gonna do about it? *
    * Romeo & Juliet - Dire Straits

    View Slide

  31. Create the best experience for your
    audience no matter the device

    View Slide

  32. WTF. RWD, FTW!

    View Slide

  33. WTF. RWD, FTW!
    What the Frak. Responsive Web Design, For The Win!

    View Slide

  34. Hicksdesign

    View Slide

  35. Andersson-Wise Architects

    View Slide

  36. Forefathers Group

    View Slide

  37. Food Sense

    View Slide

  38. Food Sense

    View Slide

  39. Food Sense

    View Slide

  40. View Slide

  41. HTML

    View Slide

  42. HTML
    Quick ’n’ dirty

    View Slide

  43. HTML
    media="screen and (max-width: 480px)"
    href="mobile.css" />
    Quick ’n’ dirty

    View Slide

  44. HTML

    View Slide

  45. HTML
    Let’s tide things up

    View Slide

  46. HTML



    Let’s tide things up

    View Slide

  47. CSS
    /*320px =iPhone portrait */
    @media only screen and (max-width: 320px){
    ...
    }
    /*480px =iPhone landscape */
    @media only screen and (min-width: 320px) and (max-width: 480px) {
    ...
    }
    /*768px =iPad portrait */
    @media only screen and (min-width: 768px) {
    ...
    }
    /*1024px =iPad landscape */
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
    ...
    }
    /*1280px =Medium screens */
    @media only screen and (min-width: 1025px) and (max-width: 1280px) {
    }

    View Slide

  48. Flexible Multimedia

    View Slide

  49. Flexible Multimedia
    img, object {
    max-width: 100%;
    }

    View Slide

  50. Flexible Multimedia
    img, object {
    max-width: 100%;
    }
    FitVid.js

    View Slide

  51. Flexible Grid

    View Slide

  52. Flexible Grid
    Golden Grid System

    View Slide

  53. Browser Support

    View Slide

  54. Browser Support

    View Slide

  55. (Far from) Browser Support

    View Slide

  56. 7 8
    (Far from) Browser Support

    View Slide

  57. 7 8
    (Far from) Browser Support
    Kill these agents

    View Slide

  58. Approaches & Techniques

    View Slide

  59. View Slide

  60. View Slide

  61. Responsive
    vs.
    Adaptive
    vs.
    Mobile
    vs.
    whatevah

    View Slide

  62. View Slide

  63. View Slide

  64. Mobile first!

    View Slide

  65. View Slide

  66. View Slide

  67. The art of
    hiding

    View Slide

  68. View Slide

  69. View Slide

  70. The designer and the
    front end developer
    must be one person:
    you

    View Slide

  71. “Good mobile user
    experience requires a
    different design than
    what’s needed to
    satisfy desktop users.
    Two designs, two
    sites, and cross-linking
    to make it all work.”
    - Jacob Nielsen

    View Slide

  72. “Good mobile user
    experience requires a
    different design than
    what’s needed to
    satisfy desktop users.
    Two designs, two
    sites, and cross-linking
    to make it all work.”
    - Jacob Nielsen
    “You never know better
    than your users what
    content they want.”
    - Bruce Lawson

    View Slide

  73. “Good mobile user
    experience requires a
    different design than
    what’s needed to
    satisfy desktop users.
    Two designs, two
    sites, and cross-linking
    to make it all work.”
    - Jacob Nielsen
    “You never know better
    than your users what
    content they want.”
    - Bruce Lawson
    Separate mobile websites?

    View Slide

  74. Kiran Prasad
    Director of Engineering Mobile at LinkedIn
    “Responsive design might
    work for uncomplicated,
    one-off websites, he said,
    but for applications or
    networks, responsive
    design is actually bad.”

    View Slide

  75. Kiran Prasad
    Director of Engineering Mobile at LinkedIn
    “Responsive design might
    work for uncomplicated,
    one-off websites, he said,
    but for applications or
    networks, responsive
    design is actually bad.”

    View Slide

  76. Kiran Prasad
    Director of Engineering Mobile at LinkedIn
    “Responsive design might
    work for uncomplicated,
    one-off websites, he said,
    but for applications or
    networks, responsive
    design is actually bad.”
    When is-no-good?

    View Slide

  77. Evaluation

    View Slide

  78. View Slide

  79. All you need
    is your good old
    CSS

    View Slide

  80. http://blog.digidave.org/2009/10/lessons-in-web-development-good-fast-and-cheap-pick-two

    View Slide

  81. One step closer to Utopia*
    * When the project is fairly simple and when
    compared with a separate mobile website
    http://blog.digidave.org/2009/10/lessons-in-web-development-good-fast-and-cheap-pick-two

    View Slide

  82. http://www.flickr.com/photos/lenscrack/5165225746/

    View Slide

  83. One place to focus and
    update
    http://www.flickr.com/photos/lenscrack/5165225746/

    View Slide

  84. View Slide

  85. No separate websites,
    no duplicate content

    View Slide

  86. http://www.flickr.com/photos/jfisher/3769846083/

    View Slide

  87. Still fresh.
    Things are a changin*
    Could be a Bob Dylan’s song
    http://www.flickr.com/photos/jfisher/3769846083/

    View Slide

  88. http://www.flickr.com/photos/lwr/5044331262/

    View Slide

  89. Think twice!
    http://www.flickr.com/photos/lwr/5044331262/

    View Slide

  90. Tools & Resources

    View Slide

  91. Testing

    View Slide

  92. Testing
    Aptus

    View Slide

  93. Testing
    Screenqueri.es
    Responsive.is
    Gallery
    Media Queries

    View Slide

  94. Grids & Boilerplates
    Golden Grid System
    Responsive Grid System
    320 and Up
    JavaScript & Multimedia
    Adapt.js
    Responsive Images
    Adaptive Images
    Fitvid.js
    FitText

    View Slide

  95. What’s next
    Responsive Images and Web Standards at the Turning Point
    Content Choreography
    HTML5 adaptive images: end of round one
    Articles
    Tips and best practices to develop responsive websites
    Preserving vertical rhythm with CSS and jQuery
    Responsive CSS that scales
    Build a responsive site in a week: designing responsively (part 1)
    Build a responsive site in a week: typography and grids (part 2)

    View Slide

  96. Wait, there’s more!

    View Slide

  97. Thank you!
    Wait, there’s more!

    View Slide