Responsive Web Design Recap

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

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