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

Responsive Web Design Recap

D34efae5a5bdbb00ce3b300c78cf359a?s=47 14islands
October 01, 2015
Design
9
1.1k

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

More Decks by 14islands

See All by 14islands
D34efae5a5bdbb00ce3b300c78cf359a?s=48 14islands
0
52
D34efae5a5bdbb00ce3b300c78cf359a?s=48 14islands
0
23
D34efae5a5bdbb00ce3b300c78cf359a?s=48 14islands
0
140
D34efae5a5bdbb00ce3b300c78cf359a?s=48 14islands
0
190
D34efae5a5bdbb00ce3b300c78cf359a?s=48 14islands
2
850
D34efae5a5bdbb00ce3b300c78cf359a?s=48 14islands
4
1.6k
D34efae5a5bdbb00ce3b300c78cf359a?s=48 14islands
2
300
D34efae5a5bdbb00ce3b300c78cf359a?s=48 14islands
32
7.9k

Other Decks in Design

See All in Design
9105c959cc559664a1c2a506cac28070?s=48 ajanart
1
130
6115584ec4554ed71f17effd3e0b6988?s=48 altech
0
6.6k
36c455f4a30b5fb61a4d73241cf1fa0c?s=48 theorangebird01
1
120
Fd8de099747a39a16c7c0b0b43656285?s=48 lailiuki
0
180
23dd78a6a0b27e29deb81748bf69b715?s=48 vonmuren
0
130
98c6395ae1164bf0283e9da5de912030?s=48 greenfieldraws
0
170
B2b4bfd5f5d18c580b79fc2f9340335b?s=48 joshkgong
0
150
C55002aa8afd60b60e197855d88796f1?s=48 funnypersimmon
0
170
6a42d4bb1df118144c6b8aa1b9f7e7c0?s=48 nyuuui_design
0
1.2k
F0a8d07597a19192791bf663504d2a17?s=48 atamaplus
0
270
2016ba6b977a2e6691811fa66d5f4336?s=48 cyberagentdevelopers
PRO
0
430
2016ba6b977a2e6691811fa66d5f4336?s=48 cyberagentdevelopers
PRO
1
320

Featured

See All Featured
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
158
6.6k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
120
16k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
33
3.6k
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
340
16k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
120
8.1k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
30
1.5k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
240k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
101
11k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
56
9.5k
245cee81a9c424266e5e401d844ea881?s=48 lara
591
61k
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
42
4.8k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
17k

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