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
53
D34efae5a5bdbb00ce3b300c78cf359a?s=48 14islands
0
26
D34efae5a5bdbb00ce3b300c78cf359a?s=48 14islands
0
140
D34efae5a5bdbb00ce3b300c78cf359a?s=48 14islands
0
190
D34efae5a5bdbb00ce3b300c78cf359a?s=48 14islands
2
860
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
C9b1043c15896a8a15b68564b9789130?s=48 maruejouls
0
330
Efe3b32c678d6071ea1f06478fd2156b?s=48 norinity1103
0
700
E4d3bf2e52b00413efb34cc6e7433f3a?s=48 demarco
1
170
5282a03ca032a1f9e0df70c8ef2ea39c?s=48 ujki
0
110
Cc6c9e1dcb8e40af8dd1d49b78c0c720?s=48 tompenguin
5
360
372b0d6ab90110521a5d3aa09f736abc?s=48 seathinner
1
200
3256ba9ce1e999ba1d724d49ff8227b2?s=48 akitumn
1
310
4e23e19dd06656e17fb3ba86b598e887?s=48 exawizards
0
400
4b7cfc2f7e1087517064667a30fddd54?s=48 commmune
1
2.5k
1174a67bf81e480b34f5d2e889d8b90d?s=48 yuki_yano
PRO
0
120
3d895659a74acee6d37b3674f6f7b650?s=48 heewon
1
420
E1e5be595b41fe3cf014cab6b2ef2a85?s=48 geoffreydorne
1
140

Featured

See All Featured
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
6
930
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
195
9k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
240k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
270
17k
78b475797a14c84799063c7cd073962f?s=48 holman
464
280k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
37
1.7k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
75
3.8k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
43
2k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
82
4.4k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
17k
78b475797a14c84799063c7cd073962f?s=48 holman
294
130k

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