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

Responsive Web Design

Avatar for jos jos
May 02, 2016
Design
2
49

Responsive Web Design

National Central University Academy Program

Avatar for jos

jos

May 02, 2016
Tweet

More Decks by jos

See All by jos
Firefox Marketplace Frontend
Avatar for jos jostw
0
47
Finding Leaders with Maximum Spread of Influence through Social Networks
Avatar for jos jostw
0
48

Other Decks in Design

See All in Design
kintone_aroma
Avatar for kintone kintone
0
1.3k
Connpass-Xperia_Camera_App_by_HCD.pdf
Avatar for ソニー株式会社 sony
0
480
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
220
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
790
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
500
AIエージェントが対話的なUIを返す！MCP−UIで変わるユーザ体験
Avatar for daitasu daitasu
1
140
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
Avatar for kumano ayumi kumanoayumi
5
810
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
300
Treasure_Hunting
Avatar for Sol Metts solmetts
0
230
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
Avatar for Yu Morita securecat
0
190
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
1
500
Drawing for Animation
Avatar for Mandalyn Teo lynteo
2
180

Featured

See All Featured
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
62
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
110
Designing for Performance
Avatar for Lara Hogan lara
610
70k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
2
2.3k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
71k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
800
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
350
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k

Transcript

  1. RWD JOSEPH YEH May 2, 2016

  2. ABOUT ME JOSEPH YEH 2 [email protected] 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/