Responsive Web Design

National Central University Academy Program

Transcript

1. RWD JOSEPH YEH May 2, 2016
2. ABOUT ME JOSEPH YEH 2 jyeh@mozilla.com https://github.com/jostw https://www.linkedin.com/in/josyeh MOZILLA Software Engineer MUZIK ONLINE Front End Engineer NTHU Master's Degree NCU Bachelor's degree
3. 3 https://sourcemaking.com/design_patterns OUTLINE INCLUDING NOT INCLUDING Code Design Pattern http://sacsconsult.com.au/blog/code/
4. WHAT IS RWD RESPONSIVE WEB DESIGN 4 Responsive websites respond to their environment.
5. 5 http://blog.stationfour.com/an-illustrators-perspective-on-responsive-design/ WHAT IS RWD
6. 6 http://www.yottaa.com/company/blog/mobile/marketers-and-content-writers-you-too-can-think-mobile-first/ WHY RESPONSIVE WEB DESIGN
7. 7 http://www.developereconomics.com/websites-vs-web-apps/
8. WHY RESPONSIVE WEB DESIGN PROS 8 CONS - Performance - User experience - Operates without internet - Device features - Development costs - Maintenance costs - Running on all platforms - Sharing on social media - Better SEO
9. HOW TO BE RESPONSIVE Progressive Enhancement vs. Graceful Degradation 9
10. HOW TO BE RESPONSIVE - Mobile first? - Depends on your content and usecase - User experience first - How to reuse your component? 10 http://getbootstrap.com/components/
11. https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport VIEWPORT 11 A meta viewport tag gives the browser instructions on how to control the page’s dimensions and scaling.
12. VIEWPORT <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> ... 12
13. GRID SYSTEM 13 http://www.imamuseum.org/blog/2010/02/16/ima-on-the-grid/ Grid systems are used for creating page layouts through a series of rows and columns that house your content.
14. GRID SYSTEM - 12 columns - 960px 14 http://www.sitepoint.com/design-organized-websites-rapidly-with-960-grid/
15. FLUID GRID SYSTEM 15 http://www.collaborative.com/blog/getting-started-with-responsive-web-design/
16. FLUID GRID SYSTEM 16 http://www.objectliteral.com/css3-box-sizing/ * { box-sizing: border-box; } BORDER BOX http://codepen.io/pen/KzxEOV
17. FLUID GRID SYSTEM 17 http://recorder.sayforward.com/category/person/luke-wroblewski
18. MEDIA QUERIES Media queries can be used to apply styles based on device characteristics. 18 body { background-color: red; } @media (max-width: 320px) { body { background-color: orange; } } http://codepen.io/pen/vGzMJM
19. MEDIA QUERIES 19 @import url("mobile.css") (max-width: 320px); <html> <head> <link href="style.css" rel="stylesheet"> <link href="mobile.css" rel="stylesheet" media="(max-width: 320px)"> </head> <body> ... Imported from a file.
20. https://www.google.com/design/spec/layout/responsive-ui.html MEDIA QUERIES 20 BREAKPOINTS
21. https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns/mostly-fluid DESIGN PATTERNS 21 MOSTLY FLUID
22. https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns/column-drop DESIGN PATTERNS 22 COLUMN DROP
23. https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns/layout-shifter DESIGN PATTERNS 23 LAYOUT SHIFTER
24. https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns/tiny-tweaks DESIGN PATTERNS 24 TINY TWEAKS
25. https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns/off-canvas DESIGN PATTERNS 25 OFF CANVAS
26. FLEXIBLE ELEMENT 26 Content should not rely on a particular viewport width to render well. https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/size-content-to-the-viewport
27. https://blog.intercom.io/why-cards-are-the-future-of-the-web/ FLEXIBLE ELEMENT 27
28. FLEXIBLE ELEMENT FLEXIBLE IMAGE 28 img { width: 100%; height: auto; } div { background-size: 100%; } div { background-size: cover; }
29. https://en.wikipedia.org/wiki/Responsive_web_design FLEXIBLE ELEMENT 29
30. http://www.lydiabae.com/detail_dulux.html FLEXIBLE EVERYTHING 30
31. EXAMPLE 31 https://marketplace.firefox.com/
32. http://caniuse.com/#feat=flexbox ADVANCE 32 FLEXBOX
33. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ADVANCE 33 FLEXBOX
34. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ADVANCE 34 FLEXBOX
35. http://caniuse.com/#feat=srcset ADVANCE 35 SRCSET
36. ADVANCE 36 SRCSET <img src="logo.png" srcset="logo-2x.png 2x"> <img src="banner.png" srcset="banner-600.png 600w, banner-1200.png 1200w">
37. OPTIMIZATION Keep lines of text to a maximum of around 70 or 80 characters. 37 http://trentwalton.com/2012/06/19/fluid-type/
38. http://mashable.com/2013/01/03/tablet-friendly-website/ OPTIMIZATION 38 SPACING
39. https://github.com/twbs/bootstrap/issues/9235 OPTIMIZATION 39 BUTTON SIZE
40. http://mobileinputtypes.com/ OPTIMIZATION 40 INPUT TYPE <input type="email"> <input type="tel"> <input type="number"> <input type="date">
41. OPTIMIZATION - Hover effect - Touch event - Browser support - Performance - RESS: Responsive Design + Server Side Components http://www.slideshare.net/adamp3wang/pinkoi 41
42. CONCLUSION 42 - Core content - Be flexible - User experience http://imgur.com/yQuXuMa
43. REFERENCE 43 https://developers.google.com/web/fundamentals/design-and-ui/responsive/ https://developers.google.com/webmasters/mobile-sites/mobile-seo/responsive-design http://design.google.com/resizer/ http://mediaqueri.es/ FRAMEWORKS http://getbootstrap.com/ http://foundation.zurb.com/ http://susy.oddbird.net/
44. 44 https://www.pinterest.com/pin/574490496187451796/