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

Responsive Web Design Recap

D34efae5a5bdbb00ce3b300c78cf359a?s=47 14islands
October 01, 2015

Responsive Web Design Recap

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

D34efae5a5bdbb00ce3b300c78cf359a?s=128

14islands

October 01, 2015
Tweet

Transcript

  1. None
  2. RESPONSIVE WEB DESIGN RECAP

  3. WHAT

  4. None
  5. None
  6. None
  7. Design and development should respond to the user’s behavior and

    environment based on screen size, platform and orientation.
  8. WHY

  9. There are more devices connected than people in the world

    today. http://www.bizjournals.com/prnewswire/press_releases/2014/10/06/NY30877
  10. http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets More people have access to mobile than to running

    water and toothbrushes.
  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/
  12. IT’S ABOUT CONTENT-FIRST

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

  14. IT’S ABOUT BEING FUTURE FRIENDLY

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

  16. IT’S ABOUT CONSISTENCY

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

  18. None
  19. SO WHAT CAN WE DO?

  20. DO NOTHING OPTION 1

  21. None
  22. None
  23. None
  24. None
  25. BUILD AN APP OPTION 2

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

  27. http://appvswebsite.com/

  28. DO BOTH (IF YOU CAN)

  29. BUILD A SEPARATE MOBILE SITE OPTION 3

  30. None
  31. None
  32. None
  33. GO RESPONSIVE OPTION 4

  34. HOW

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

  36. None
  37. None
  38. None
  39. None
  40. 3 STEPS RECIPE

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

  42. ADAPTIVE VS FLUID EXAMPLE

  43. MAKING IT FLUID TARGET / CONTEXT = RESULT

  44. None
  45. 300px

  46. 300px 940px

  47. 300px 940px 300/940 = 0.319148936

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

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

  50. LET MEDIA TAKE MORE AVAILABLE SPACE

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

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

  53. Print Monochrome Width Height Aspect Ratio Orientation And more… @media

    (min-width: 600px) { <something awesome here> }
  54. LOAD ME NOT YET NOT YET

  55. LOAD ME NOT YET NOT YET

  56. LOAD ME NOT YET NOT YET

  57. LOAD ME LOAD ME LOAD ME

  58. Know your Breakpoints

  59. Breakpoints. Break. Points. Points at which things break in your

    design. http://www.markboulton.co.uk/journal/theinbetween “
  60. Start small.

  61. Increase the width.

  62. Identify problems.

  63. Add a breakpoint and fix it.

  64. Keep going!

  65. The importance of MOBILE FIRST

  66. None
  67. None
  68. None
  69. IGNORING MOBILE FIRST WILL PROBABLY BITE YOU LATER

  70. ITS OK TO DESIGN IT IN THE BROWSER

  71. UX Design Code

  72. The web’s greatest strength, is often seen as a limitation,

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

    http://alistapart.com/article/dao
  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
  75. The journey begins by letting go of control, and becoming

    flexible. http://alistapart.com/article/dao
  76. None