$30 off During Our Annual Pro Sale. View Details »

Responsive Web Design Recap

14islands
October 01, 2015

Responsive Web Design Recap

Responsive Web Design has been around for a while. How about a recap?

14islands

October 01, 2015
Tweet

More Decks by 14islands

Other Decks in Design

Transcript

  1. View Slide

  2. RESPONSIVE
    WEB
    DESIGN RECAP

    View Slide

  3. WHAT

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. Design and development should respond to
    the user’s behavior and environment based
    on screen size, platform and orientation.

    View Slide

  8. WHY

    View Slide

  9. There are more devices
    connected than people in
    the world today.
    http://www.bizjournals.com/prnewswire/press_releases/2014/10/06/NY30877

    View Slide

  10. http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets
    More people have access
    to mobile than to running
    water and toothbrushes.

    View Slide

  11. Get your content ready to
    go anywhere because it’s
    going to go everywhere.
    - http://bradfrost.com/blog/web/for-a-future-friendly-web/

    View Slide

  12. IT’S ABOUT
    CONTENT-FIRST

    View Slide

  13. http://commons.wikimedia.org/wiki/File:Content_is_like_water.png

    View Slide

  14. IT’S ABOUT BEING
    FUTURE FRIENDLY

    View Slide

  15. https://www.flickr.com/photos/brad_frost/7387824246/in/set-72157630163121422

    View Slide

  16. IT’S ABOUT
    CONSISTENCY

    View Slide

  17. http://opensignal.com/reports/fragmentation.php (2012)

    View Slide

  18. View Slide

  19. SO WHAT CAN WE DO?

    View Slide

  20. DO NOTHING
    OPTION 1

    View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. BUILD AN APP
    OPTION 2

    View Slide

  26. http://xkcd.com/1174/

    View Slide

  27. http://appvswebsite.com/

    View Slide

  28. DO BOTH
    (IF YOU CAN)

    View Slide

  29. BUILD A SEPARATE MOBILE SITE
    OPTION 3

    View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. GO RESPONSIVE
    OPTION 4

    View Slide

  34. HOW

    View Slide

  35. 4 GIFS TO WARM UP
    http://blog.froont.com/9-basic-principles-of-responsive-web-design/

    View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. 3 STEPS
    RECIPE

    View Slide

  41. 1. FLUID WIDTH
    2. FLEXIBLE MEDIA
    3. MEDIA QUERIES

    View Slide

  42. ADAPTIVE VS FLUID
    EXAMPLE

    View Slide

  43. MAKING IT FLUID
    TARGET / CONTEXT = RESULT

    View Slide

  44. View Slide

  45. 300px

    View Slide

  46. 300px
    940px

    View Slide

  47. 300px
    940px
    300/940 = 0.319148936

    View Slide

  48. 300px
    940px
    300/940 = 0.319148936
    31.9148936%

    View Slide

  49. 1. FLUID WIDTH
    2. FLEXIBLE MEDIA
    3. MEDIA QUERIES

    View Slide

  50. LET MEDIA TAKE
    MORE AVAILABLE SPACE

    View Slide

  51. 1. FLUID WIDTH
    2. FLEXIBLE MEDIA
    3. MEDIA QUERIES

    View Slide

  52. Print
    Monochrome
    Width
    Height
    Aspect Ratio
    Orientation
    And more…

    View Slide

  53. Print
    Monochrome
    Width
    Height
    Aspect Ratio
    Orientation
    And more…
    @media (min-width: 600px) {

    }

    View Slide

  54. LOAD ME
    NOT YET
    NOT YET

    View Slide

  55. LOAD ME
    NOT YET
    NOT YET

    View Slide

  56. LOAD ME
    NOT YET
    NOT YET

    View Slide

  57. LOAD ME
    LOAD ME
    LOAD ME

    View Slide

  58. Know your
    Breakpoints

    View Slide

  59. Breakpoints. Break. Points. Points at
    which things break in your design.
    http://www.markboulton.co.uk/journal/theinbetween

    View Slide

  60. Start small.

    View Slide

  61. Increase the width.

    View Slide

  62. Identify problems.

    View Slide

  63. Add a breakpoint
    and fix it.

    View Slide

  64. Keep going!

    View Slide

  65. The importance of
    MOBILE FIRST

    View Slide

  66. View Slide

  67. View Slide

  68. View Slide

  69. IGNORING MOBILE FIRST WILL
    PROBABLY BITE YOU LATER

    View Slide

  70. ITS OK TO DESIGN IT
    IN THE BROWSER

    View Slide

  71. UX Design
    Code

    View Slide

  72. The web’s greatest strength, is often
    seen as a limitation, as a defect.
    http://alistapart.com/article/dao

    View Slide

  73. It is the nature of the web to be
    flexible.
    http://alistapart.com/article/dao

    View Slide

  74. It should be our role as designers and developers
    to embrace this flexibility, and produce pages
    which, by being flexible, are accessible to all.
    http://alistapart.com/article/dao

    View Slide

  75. The journey begins by letting go
    of control, and becoming flexible.
    http://alistapart.com/article/dao

    View Slide

  76. View Slide