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

Once Source to Rule Them All

davidyeiser
September 26, 2011
Design
4
150

Once Source to Rule Them All

How to use media queries to optimize the same markup for different devices and features.

davidyeiser

September 26, 2011
Tweet

Other Decks in Design

See All in Design
Yahoo Newsletter Clicker Template
xuechunwu
0
290
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
180
root COMPANY DECK / We are hiring！
root_recruit
1
15k
Commune_Brand_Guideline_JA
commune
1
170
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
2
580
新しいemoji😄のアイデアを Unicodeが募集中‼️🏃‍♀️💨💨💨 傾向を学んでみんな提案しよう💪
oguemon
2
690
アフォーダンスとシグニファイア
ryokanakai
1
320
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
2.1k
【Designship 2024｜10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
560
Haruki_Konaka_Portforio.pdf
haruki556
0
660
Night Shift concept 9/15/2024
cpineda57
0
740
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
280

Featured

See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
The Language of Interfaces
destraynor
154
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
A designer walks into a library…
pauljervisheath
204
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
17k
What's in a price? How to price your products and services
michaelherold
243
12k
The World Runs on Bad Software
bkeepers
PRO
65
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k

Transcript

  1. REFRESH LOUISVILLE April 20, 2010 One Source to Rule Them

    All.

  2. OR How to use media queries to optimize the same

    markup for different devices and features.

  3. The League of Moveable Type http://www.theleagueofmoveabletype.com/ Reference

  4. None

  5. EVERY WEB DESIGNER’S QUESTION How much should I charge per

    hour?

  6. EVERY WEB DESIGNER’S ANSWER Let’s build an app.

  7. 1 Build for mobile first.

  8. SKETCH

  9. None

  10. Start building...

  11. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!--

    iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/ index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /> </head> <body> </body> </html> index.php

  12. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!--

    iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/ index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /> </head> <body> </body> </html> index.php

  13. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!--

    iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/ index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /> </head> <body> </body> </html> index.php

  14. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!--

    iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/ index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /> </head> <body> </body> </html> index.php

  15. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!--

    iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/ index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /> </head> <body> </body> </html> index.php

  16. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rate Calculator</title> <!--

    iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/ index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /> </head> <body> </body> </html> index.php
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None

  23. Rate Calculator http://designintellection.com/ratecalc/ Reference

  24. 2 Media queries = neat.

  25. Types & Features Media:

  26. all screen print handheld projection speech 3d-glasses Types:

  27. all screen print handheld projection speech 3d-glasses Types:

  28. width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index monochrome

    resolution scan grid Features:

  29. max-width min-height min-device-width max-device-height orientation aspect-ratio device-aspect-ratio color color-index monochrome

    resolution scan grid Features:

  30. Media Queries http://www.w3.org/TR/css3-mediaqueries/ Reference

  31. Detect mobile

  32. index.php <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rate Calculator</title>

    <!-- iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/ index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" / > </head> <body> </body> </html>

  33. index.php <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rate Calculator</title>

    <!-- iPhone specific details: http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/ index.html --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" /> <!-- Base stylesheet for all devices --> <link rel="stylesheet" href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" / > </head> <body> </body> </html>

  34. 3 HTML5 & CSS3

  35. HTML5 (briefly)

  36. index.php <div id="site" class="frame"> <section id="home-view" class="panel current nav-view"> <header

    id="home-title" class="identity"> <h1 class="app-name title-bar">Rate Calculator</h1> </header> <h1 id="the-hourly-rate-display" class="focus-value text-emboss layout"><span class="meta-label">$</span><strong id="the-rate"></strong><sup>.00</sup></h1> <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</ a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav> <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms- conditions">Terms <em class="amp">&amp;</em> Conditions</a> </section> </div>

  37. index.php <div id="site" class="frame"> <section id="home-view" class="panel current nav-view"> <header

    id="home-title" class="identity"> <h1 class="app-name title-bar">Rate Calculator</h1> </header> <h1 id="the-hourly-rate-display" class="focus-value text-emboss layout"><span class="meta-label">$</span><strong id="the-rate"></strong><sup>.00</sup></h1> <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</ a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav> <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms- conditions">Terms <em class="amp">&amp;</em> Conditions</a> </section> </div>

  38. index.php <div id="site" class="frame"> <section id="home-view" class="panel current nav-view"> <header

    id="home-title" class="identity"> <h1 class="app-name title-bar">Rate Calculator</h1> </header> <h1 id="the-hourly-rate-display" class="focus-value text-emboss layout"><span class="meta-label">$</span><strong id="the-rate"></strong><sup>.00</sup></h1> <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</ a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav> <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms- conditions">Terms <em class="amp">&amp;</em> Conditions</a> </section> </div>

  39. index.php <div id="site" class="frame"> <section id="home-view" class="panel current nav-view"> <header

    id="home-title" class="identity"> <h1 class="app-name title-bar">Rate Calculator</h1> </header> <h1 id="the-hourly-rate-display" class="focus-value text-emboss layout"><span class="meta-label">$</span><strong id="the-rate"></strong><sup>.00</sup></h1> <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</ a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav> <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms- conditions">Terms <em class="amp">&amp;</em> Conditions</a> </section> </div>

  40. Dive Into HTML5 http://diveintohtml5.org/ Reference HTML5 For Web Designers http://books.alistapart.com/product/html5-for-web-designers

  41. CSS

  42. base.css

  43. * { margin:0; padding:0; } body { font-family:"Helvetica Neue", Helvetica-Neue,

    Helvetica, Arial, sans-serif; font-size:100%; background-color:#fff; } .layout { display:block; } .panel { display:block; } header { display:block; position:relative; } ul { list-style:none; } sup { font-size:50%; } base.css
  44. None

  45. mobile.css

  46. body { overflow:hidden; background-color:#333; -webkit-text-size-adjust:none; } .layout { width:90%; margin:0

    auto; } .focus-value { padding:12px 0 28px 0; font-size:4em; font-weight:bold; line-height:1em; text-align:center; color:#fff; } .meta-label { color:#555; } mobile.css

  47. body { overflow:hidden; background-color:#333; -webkit-text-size-adjust:none; } .layout { width:90%; margin:0

    auto; } .focus-value { padding:12px 0 28px 0; font-size:4em; font-weight:bold; line-height:1em; text-align:center; color:#fff; } .meta-label { color:#555; } mobile.css

  48. Safari Reference Library http://developer.apple.com/safari/library/navigation/index.html Reference

  49. body { overflow:hidden; background-color:#333; -webkit-text-size-adjust:none; } .layout { width:90%; margin:0

    auto; } .focus-value { padding:12px 0 28px 0; font-size:4em; font-weight:bold; line-height:1em; text-align:center; color:#fff; } .meta-label { color:#555; } mobile.css
  50. None
  51. None

  52. Title bar

  53. index.php <section id="home-view" class="panel current nav-view"> <header id="home-title" class="identity"> <h1

    class="app-name title-bar">Rate Calculator</h1> </header> ... </section>

  54. index.php <section id="home-view" class="panel current nav-view"> <header id="home-title" class="identity"> <h1

    class="app-name title-bar">Rate Calculator</h1> </header> ... </section>

  55. .title-bar { display:block; width:90%; padding:12px 5% 16px 5%; font-size:1.125em; font-weight:bold;

    line-height:0.889em; text-align:center; text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); color:#fff; border-top:1px solid #2e7d9b; border-bottom:1px solid #222; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop(0.5,#19627d), to(#19627d)); background-color:#19627d; } mobile.css

  56. Before

  57. After

  58. .title-bar { display:block; width:90%; padding:12px 5% 16px 5%; font-size:1.125em; font-weight:bold;

    line-height:0.889em; text-align:center; text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); color:#fff; border-top:1px solid #2e7d9b; border-bottom:1px solid #222; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop(0.5,#19627d), to(#19627d)); background-color:#19627d; } mobile.css

  59. .title-bar { display:block; width:90%; padding:12px 5% 16px 5%; font-size:1.125em; font-weight:bold;

    line-height:0.889em; text-align:center; text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); color:#fff; border-top:1px solid #2e7d9b; border-bottom:1px solid #222; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop(0.5,#19627d), to(#19627d)); background-color:#19627d; } mobile.css
  60. None

  61. background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88),

    color-stop (0.5,#19627d), to(#19627d));

  62. background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88),

    color-stop (0.5,#19627d), to(#19627d));

  63. background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88),

    color-stop (0.5,#19627d), to(#19627d));

  64. background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88),

    color-stop (0.5,#19627d), to(#19627d));

  65. background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88),

    color-stop (0.5,#19627d), to(#19627d));

  66. background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88),

    color-stop (0.5,#19627d), to(#19627d));

  67. CSS3 Reference

  68. None

  69. Object Oriented CSS (Very briefly)

  70. .title-bar { display:block; width:90%; padding:12px 5% 16px 5%; font-size:1.125em; font-weight:bold;

    line-height:0.889em; text-align:center; text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); color:#fff; border-top:1px solid #2e7d9b; border-bottom:1px solid #222; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop(0.5,#19627d), to(#19627d)); background-color:#19627d; } mobile.css

  71. .title-bar { display:block; width:90%; padding:12px 5% 16px 5%; font-size:1.125em; font-weight:bold;

    line-height:0.889em; text-align:center; color:#fff; border-top:1px solid #2e7d9b; border-bottom:1px solid #222; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop(0.5,#19627d), to(#19627d)); background-color:#19627d; } .text-emboss { text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); } mobile.css

  72. Object Oriented CSS http://wiki.github.com/stubbornella/oocss/ Reference

  73. The Navigation

  74. index.php <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss

    tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</ a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav>

  75. index.php <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss

    tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</ a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav>

  76. .app-nav-item { display:block; width:90%; padding:8px 5% 10px 5%; font-size:1.5em; font-weight:bold;

    text-decoration:none; color:#fff; border-bottom:1px solid #333; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#1c1c1c), color-stop (0.5,#1c1c1c), color-stop(0.5,#111), to(#111)); background-color:#111; } mobile.css

  77. Before

  78. After

  79. After

  80. index.php <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms- conditions">Terms <em class="amp">&amp;</em> Conditions</a>

  81. .disclaimer-link { display:block; width:100%; padding:10px 0; position:absolute; left:0; bottom:0; font-size:0.75em;

    line-height:1em; text-align:center; text-decoration:none; color:#fff; background-color:rgba(0,0,0,0.2); z-index:15; } mobile.css
  82. None

  83. Select specifics...

  84. None
  85. None
  86. None
  87. None
  88. None

  89. index.php <nav id="main-nav" class="app-nav layout"> <ul> <li><a class="app-nav-item app-nav-item-current text-emboss

    tap-change" href="#bills">Bills</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#expenses">Expenses</a></li> <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</ a></li> <li><a class="app-nav-item text-emboss tap-change" href="#profits">Profits</a></li> </ul> </nav>

  90. .app-nav li:first-child .app-nav-item { -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px; } .app-nav li:nth-child(4) .app-nav-item

    { border-bottom:0; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; } mobile.css

  91. .app-nav li:first-child .app-nav-item { -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px; } .app-nav li:nth-child(4) .app-nav-item

    { border-bottom:0; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; } mobile.css

  92. .app-nav li:first-child .app-nav-item { -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px; } .app-nav li:nth-child(4) .app-nav-item

    { border-bottom:0; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; } mobile.css

  93. .app-nav li:first-child .app-nav-item { -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px; } .app-nav li:nth-child(4) .app-nav-item

    { border-bottom:0; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; } mobile.css

  94. .app-nav li:first-child .app-nav-item { -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px; } .app-nav li:nth-child(4) .app-nav-item

    { border-bottom:0; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; } mobile.css

  95. Before

  96. After

  97. Hover (or lack thereof)

  98. .tap-change:hover, .tap-change:active { background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#568821), to(#568821));

    } mobile.css
  99. None
  100. None
  101. None

  102. More markup

  103. <section id="bills" class="panel sub-view appear"> <header> <h1 class="title-bar text-emboss">Bills</h1> <a

    class="ui-link back-link reverse-action text-emboss tap-change" href="#home- view">Back</a> <p class="instructions copy layout">Enter monthly values, use the &#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> <div class="layout"> <p class="item"> <label class="amount-type text-emboss" for="rent-amount">Rent:</label> <input class="amount-value text-emboss" id="rent-amount" type="number" /> <span class="amount-choice" id="rent-slider"><span class="amount-choice- default">700</span></span> </p> ... </div> </section> index.php

  104. <section id="bills" class="panel sub-view appear"> <header> <h1 class="title-bar text-emboss">Bills</h1> <a

    class="ui-link back-link reverse-action text-emboss tap-change" href="#home- view">Back</a> <p class="instructions copy layout">Enter monthly values, use the &#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> <div class="layout"> <p class="item"> <label class="amount-type text-emboss" for="rent-amount">Rent:</label> <input class="amount-value text-emboss" id="rent-amount" type="number" /> <span class="amount-choice" id="rent-slider"><span class="amount-choice- default">700</span></span> </p> ... </div> </section> index.php

  105. <section id="bills" class="panel sub-view appear"> <header> <h1 class="title-bar text-emboss">Bills</h1> <a

    class="ui-link back-link reverse-action text-emboss tap-change" href="#home- view">Back</a> <p class="instructions copy layout">Enter monthly values, use the &#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> <div class="layout"> <p class="item"> <label class="amount-type text-emboss" for="rent-amount">Rent:</label> <input class="amount-value text-emboss" id="rent-amount" type="number" /> <span class="amount-choice" id="rent-slider"><span class="amount-choice- default">700</span></span> </p> ... </div> </section> index.php

  106. <section id="bills" class="panel sub-view appear"> <header> <h1 class="title-bar text-emboss">Bills</h1> <a

    class="ui-link back-link reverse-action text-emboss tap-change" href="#home- view">Back</a> <p class="instructions copy layout">Enter monthly values, use the &#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> <div class="layout"> <p class="item"> <label class="amount-type text-emboss" for="rent-amount">Rent:</label> <input class="amount-value text-emboss" id="rent-amount" type="number" /> <span class="amount-choice" id="rent-slider"><span class="amount-choice- default">700</span></span> </p> ... </div> </section> index.php

  107. <section id="bills" class="panel sub-view appear"> <header> <h1 class="title-bar text-emboss">Bills</h1> <a

    class="ui-link back-link reverse-action text-emboss tap-change" href="#home- view">Back</a> <p class="instructions copy layout">Enter monthly values, use the &#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> <div class="layout"> <p class="item"> <label class="amount-type text-emboss" for="rent-amount">Rent:</label> <input class="amount-value text-emboss" id="rent-amount" type="number" /> <span class="amount-choice" id="rent-slider"><span class="amount-choice- default">700</span></span> </p> ... </div> </section> index.php

  108. <section id="bills" class="panel sub-view appear"> <header> <h1 class="title-bar text-emboss">Bills</h1> <a

    class="ui-link back-link reverse-action text-emboss tap-change" href="#home- view">Back</a> <p class="instructions copy layout">Enter monthly values, use the &#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> <div class="layout"> <p class="item"> <label class="amount-type text-emboss" for="rent-amount">Rent:</label> <input class="amount-value text-emboss" id="rent-amount" type="number" /> <span class="amount-choice" id="rent-slider"><span class="amount-choice- default">700</span></span> </p> ... </div> </section> index.php

  109. .hidden { display:none; } .panel { display:none; width:100%; min-height:460px; position:absolute;

    left:0; background- color:#333; z-index:1; } .current { display:block; z-index:7; } .copy { padding:10px 0; font-weight:normal; color:#ccc; } .item { display:block; padding:10px 0; clear:both; font-size:1em; line-height:1em; border- top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(0,0,0,0.1); } .item:after { content:"."; display:block; height:0; overflow:hidden; visibility:hidden; clear:both; } .amount-type { display:block; width:40%; padding:3px 10% 0 0; float:left; font-size:1.125em; font-weight:bold; color:#fff; } .amount-value { display:block; width:45%; padding:5px 2.5%; float:left; font- family:"Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; font-size:2em; font- weight:bold; color:#fff; border:0; background-color:#222; -webkit-user-select:auto; - webkit-appearance:textarea; -webkit-border-radius:5px; } .amount-choice { display:none; } mobile.css

  110. .hidden { display:none; } .panel { display:none; width:100%; min-height:460px; position:absolute;

    left:0; background- color:#333; z-index:1; } .current { display:block; z-index:7; } .copy { padding:10px 0; font-weight:normal; color:#ccc; } .item { display:block; padding:10px 0; clear:both; font-size:1em; line-height:1em; border- top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(0,0,0,0.1); } .item:after { content:"."; display:block; height:0; overflow:hidden; visibility:hidden; clear:both; } .amount-type { display:block; width:40%; padding:3px 10% 0 0; float:left; font-size:1.125em; font-weight:bold; color:#fff; } .amount-value { display:block; width:45%; padding:5px 2.5%; float:left; font- family:"Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; font-size:2em; font- weight:bold; color:#fff; border:0; background-color:#222; -webkit-user-select:auto; -webkit- appearance:textarea; -webkit-border-radius:5px; } .amount-choice { display:none; } mobile.css

  111. Result

  112. Result

  113. <header> <h1 class="title-bar text-emboss">Bills</h1> <a class="ui-link back-link reverse-action text-emboss tap-change"

    href="#home- view">Back</a> <p class="instructions copy layout">Enter monthly values, use the &#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> index.php

  114. <header> <h1 class="title-bar text-emboss">Bills</h1> <a class="ui-link back-link reverse-action text-emboss tap-change"

    href="#home- view">Back</a> <p class="instructions copy layout">Enter monthly values, use the &#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header> index.php

  115. mobile.css .ui-link { padding:5px 10px 8px 10px; font-size:0.75em; font-weight:bold; line-height:1em;

    text-decoration:none; color:#fff; border:1px solid #134d62; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#19627d), color-stop (0.5,#19627d), color-stop(0.5,#134d62), to(#134d62)); -webkit-border-radius:4px; -webkit-box-shadow:1px 1px 0 rgba(255,255,255,0.2); } .reverse-action { position:absolute; top:9px; left:8px; } .info-link { position:absolute; top:9px; right:8px; }

  116. mobile.css .ui-link { padding:5px 10px 8px 10px; font-size:0.75em; font-weight:bold; line-height:1em;

    text-decoration:none; color:#fff; border:1px solid #134d62; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#19627d), color-stop (0.5,#19627d), color-stop(0.5,#134d62), to(#134d62)); -webkit-border-radius:4px; -webkit-box-shadow:1px 1px 0 rgba(255,255,255,0.2); } .reverse-action { position:absolute; top:9px; left:8px; } .info-link { position:absolute; top:9px; right:8px; }

  117. Before

  118. After

  119. <input class="amount-value text-emboss" id="rent-amount" type="number" />

  120. None

  121. jQuery

  122. <!-- jQuery and jQuery UI --> <script src="_js/jquery-1.4.2.min.js"></script> <script src="_js/jquery-ui-1.8.custom.min.js"></script>

    <script src="_js/rate-calculate.js"></script> index.php

  123. Rudimentary... (A.K.A. I’m not a jQuery expert)

  124. index.php <script> $(document).ready(function() { $("#main-nav ul li a").click( function() {

    $(".app-nav-item").removeClass("app-nav-item-current"); $(this).addClass("app-nav-item-current"); var showPanel = $(this).attr("href"); $("#home-view").removeClass("reverse-in panel-appear current"); $("#home-view").addClass("slide-out"); $("section").removeClass("reverse-out panel-close appear"); $(showPanel).addClass("slide-in appear"); return false; } ); $("a.back-link").click( function() { var removePanel = '#'+$(this).parents("section").attr("id"); $(removePanel).removeClass("slide-in appear"); $(removePanel).addClass("reverse-out"); $("#home-view").removeClass("slide-out"); $("#home-view").addClass("reverse-in current"); return false; } ); }); ... </script>

  125. index.php <script> $(document).ready(function() { ... $("#read-terms-conditions").click( function() { var showPanel

    = $(this).attr("href"); $("#home-view").removeClass("reverse-in panel-appear"); $(showPanel).removeClass("panel-close"); $("section").removeClass("reverse-out panel-close"); $(showPanel).addClass("slide-up panel-flip-inner"); return false; } ); $("a.close-link").click( function() { $("#terms-conditions").removeClass("slide-up"); $("#terms-conditions").addClass("panel-close"); $("#home-view").addClass("panel-appear"); return false; } ); }); </script>

  126. CSS & z-index

  127. mobile.css .slide-in { display:block; z-index:10; } .slide-out { display:block; z-index:5;

    } .reverse-in { display:block; z-index:10; } .reverse-out { display:block; height:460px; overflow:hidden; z-index:5; } .slide-up { display:block; z-index:10; } .panel-close { display:block; z-index:5; } .panel-appear { display:block; z-index:10; }

  128. mobile.css .slide-in { display:block; z-index:10; } .slide-out { display:block; z-index:5;

    } .reverse-in { display:block; z-index:10; } .reverse-out { display:block; height:460px; overflow:hidden; z-index:5; } .slide-up { display:block; z-index:10; } .panel-close { display:block; z-index:5; } .panel-appear { display:block; z-index:10; }
  129. None

  130. .current { z-index:7; }

  131. .current { z-index:7; }

  132. .current { z-index:7; }

  133. .current { z-index:7; }

  134. .current { z-index:7; } .panel(s) { z-index:1; }

  135. .panel(s) { z-index:1; }

  136. .panel(s) { z-index:1; }

  137. .current { z-index:7; } .panel(s) { z-index:1; } .current {

    z-index:7; } .panel { z-index:1; } .slide-in { z-index:10; }

  138. CSS transitions with no animation http://designintellection.com/iphone-css-transitions-with-no-animation/ Watch this video

  139. Last but not least...

  140. Animation

  141. None
  142. None

  143. .current { z-index:7; } .current { z-index:7; }

  144. None
  145. None
  146. None

  147. mobile.css .animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration: 350ms; } .slide-in { display:block;

    -webkit-animation-name:slidein-fromright; z-index:10; } .slide-out { display:block; -webkit-animation-name:slideout-toleft; z-index:5; } .reverse-in { display:block; -webkit-animation-name:slidein-fromleft; z-index:10; } .reverse-out { display:block; height:460px; overflow:hidden; -webkit-animation- name:slideout-toright; z-index:5; } .slide-up { display:block; -webkit-animation-name:slideup-frombottom; z-index:10; } .panel-close { display:block; -webkit-animation-name:panel-close; z-index:5; } .panel-appear { display:block; -webkit-animation-name:panel-appear; z-index:10; }

  148. mobile.css .animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration: 350ms; } .slide-in { display:block;

    -webkit-animation-name:slidein-fromright; z-index:10; } .slide-out { display:block; -webkit-animation-name:slideout-toleft; z-index:5; } .reverse-in { display:block; -webkit-animation-name:slidein-fromleft; z-index:10; } .reverse-out { display:block; height:460px; overflow:hidden; -webkit-animation- name:slideout-toright; z-index:5; } .slide-up { display:block; -webkit-animation-name:slideup-frombottom; z-index:10; } .panel-close { display:block; -webkit-animation-name:panel-close; z-index:5; } .panel-appear { display:block; -webkit-animation-name:panel-appear; z-index:10; }

  149. mobile.css .animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration: 350ms; } .slide-in { display:block;

    -webkit-animation-name:slidein-fromright; z-index:10; } .slide-out { display:block; -webkit-animation-name:slideout-toleft; z-index:5; } .reverse-in { display:block; -webkit-animation-name:slidein-fromleft; z-index:10; } .reverse-out { display:block; height:460px; overflow:hidden; -webkit-animation- name:slideout-toright; z-index:5; } .slide-up { display:block; -webkit-animation-name:slideup-frombottom; z-index:10; } .panel-close { display:block; -webkit-animation-name:panel-close; z-index:5; } .panel-appear { display:block; -webkit-animation-name:panel-appear; z-index:10; }

  150. .current { z-index:7; } .panel(s) { z-index:1; } .current {

    z-index:7; } .panel { z-index:1; } .slide-in { z-index:10; }

  151. mobile.css .animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration: 350ms; } .slide-in { display:block;

    -webkit-animation-name:slidein-fromright; z-index:10; } .slide-out { display:block; -webkit-animation-name:slideout-toleft; z-index:5; } .reverse-in { display:block; -webkit-animation-name:slidein-fromleft; z-index:10; } .reverse-out { display:block; height:460px; overflow:hidden; -webkit-animation- name:slideout-toright; z-index:5; } .slide-up { display:block; -webkit-animation-name:slideup-frombottom; z-index:10; } .panel-close { display:block; -webkit-animation-name:panel-close; z-index:5; } .panel-appear { display:block; -webkit-animation-name:panel-appear; z-index:10; }

  152. mobile.css @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to {

    -webkit-transform:translateX(0%); } }

  153. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%);

    } }

  154. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%);

    } }

  155. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%);

    } } 0%

  156. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%);

    } } 0% 100%

  157. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%);

    } }

  158. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%);

    } }

  159. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%);

    } } 0% 100%

  160. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%);

    } } 0% 100%

  161. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%);

    } } 0% 100%

  162. mobile.css @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to {

    -webkit-transform:translateX(-100%); } }

  163. @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%);

    } } 0% 100%

  164. @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%);

    } } 0% 100% -100%

  165. @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%);

    } } 0% 100% -100%

  166. @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%);

    } } 0% 100% -100%

  167. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%);

    } } 0% 100% @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); } } -100%

  168. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%);

    } } 0% 100% @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); } } -100%

  169. CSS transitions with animation http://designintellection.com/iphone-css-transitions-with-animation/ Watch this video

  170. jQTouch http://www.jqtouch.com/ Reference

  171. 4 DESKTOP VERSION

  172. Detect desktop

  173. index.php <!-- Base stylesheet for all devices --> <link rel="stylesheet"

    href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" /> <!-- Conditional stylesheets for desktop --> <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / >

  174. index.php <!-- Base stylesheet for all devices --> <link rel="stylesheet"

    href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" /> <!-- Conditional stylesheets for desktop --> <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / >
  175. None

  176. index.php <!-- Base stylesheet for all devices --> <link rel="stylesheet"

    href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" /> <!-- Conditional stylesheets for desktop --> <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / >

  177. desktop.css /* LOTS O’ STUFF */

  178. None

  179. 5 TYPOGRAPHY

  180. None
  181. None

  182. @font-face

  183. desktop.css @font-face { font-family:'LeagueGothicRegular'; src: url('League_Gothic.eot'); src: local('League Gothic'), local('LeagueGothic'),

    url('League_Gothic.woff') format ('woff'), url('League_Gothic.ttf') format('truetype'), url('League_Gothic.svg#LeagueGothic') format('svg'); }

  184. desktop.css @font-face { font-family:'LeagueGothicRegular'; src: url('League_Gothic.eot'); src: local('League Gothic'), local('LeagueGothic'),

    url('League_Gothic.woff') format ('woff'), url('League_Gothic.ttf') format('truetype'), url('League_Gothic.svg#LeagueGothic') format('svg'); }

  185. desktop.css @font-face { font-family:'LeagueGothicRegular'; src: url('League_Gothic.eot'); src: local('League Gothic'), local('LeagueGothic'),

    url('League_Gothic.woff') format ('woff'), url('League_Gothic.ttf') format('truetype'), url('League_Gothic.svg#LeagueGothic') format('svg'); }

  186. desktop.css @font-face { font-family:'LeagueGothicRegular'; src: url('League_Gothic.eot'); src: local('League Gothic'), local('LeagueGothic'),

    url('League_Gothic.woff') format ('woff'), url('League_Gothic.ttf') format('truetype'), url('League_Gothic.svg#LeagueGothic') format('svg'); }

  187. desktop.css @font-face { font-family:'LeagueGothicRegular'; src: url('League_Gothic.eot'); src: local('League Gothic'), local('LeagueGothic'),

    url('League_Gothic.woff') format ('woff'), url('League_Gothic.ttf') format('truetype'), url('League_Gothic.svg#LeagueGothic') format('svg'); } .title-bar { font-family:LeagueGothicRegular, "Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; } .focus-value { font-family:LeagueGothicRegular, "Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; }
  188. None
  189. None

  190. Font Squirrel http://www.fontsquirrel.com/ Reference

  191. 6 iPad VERSION

  192. Detect iPad

  193. index.php <!-- Base stylesheet for all devices --> <link rel="stylesheet"

    href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" /> <!-- Conditional stylesheets for desktop --> <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / > <!-- Conditional stylesheets for iPad --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" />

  194. index.php <!-- Base stylesheet for all devices --> <link rel="stylesheet"

    href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" /> <!-- Conditional stylesheets for desktop --> <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / > <!-- Conditional stylesheets for iPad --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" />
  195. None
  196. None

  197. index.php <!-- Base stylesheet for all devices --> <link rel="stylesheet"

    href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" /> <!-- Conditional stylesheets for desktop --> <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / > <!-- Conditional stylesheets for iPad --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" /> <link rel="stylesheet" href="_css/ipad-portrait.css" media="screen and (device-width:768px) and (orientation:portrait)" /> <link rel="stylesheet" href="_css/ipad-landscape.css" media="screen and (device-width:768px) and (orientation:landscape)" />

  198. index.php <!-- Base stylesheet for all devices --> <link rel="stylesheet"

    href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" /> <!-- Conditional stylesheets for desktop --> <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / > <!-- Conditional stylesheets for iPad --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" /> <link rel="stylesheet" href="_css/ipad-portrait.css" media="screen and (device-width:768px) and (orientation:portrait)" /> <link rel="stylesheet" href="_css/ipad-landscape.css" media="screen and (device-width:768px) and (orientation:landscape)" />

  199. index.php <!-- Base stylesheet for all devices --> <link rel="stylesheet"

    href="_css/base.css" media="handheld, all" /> <!-- Conditional stylesheet for iPhone --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" /> <!-- Conditional stylesheets for desktop --> <link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" / > <!-- Conditional stylesheets for iPad --> <link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" /> <link rel="stylesheet" href="_css/ipad-portrait.css" media="screen and (device-width:768px) and (orientation:portrait)" /> <link rel="stylesheet" href="_css/ipad-landscape.css" media="screen and (device-width:768px) and (orientation:landscape)" />

  200. ipad-portait.css

  201. ipad-portait.css .panel { min-height:946px; background:url("../_images/typewriter-dark-bg.png") center 260px no-repeat #333; }

    .copy { padding:20px 0; font-size:1em; line-height:1.25em; font-weight:normal; color:#ccc; }

  202. ipad-portait.css .panel { min-height:946px; background:url("../_images/typewriter-dark-bg.png") center 260px no-repeat #333; }

    .copy { padding:20px 0; font-size:1em; line-height:1.25em; font-weight:normal; color:#ccc; }

  203. ipad-portait.css .panel { min-height:946px; background:url("../_images/typewriter-dark-bg.png") center 260px no-repeat #333; }

    .copy { padding:20px 0; font-size:1em; line-height:1.25em; font-weight:normal; color:#ccc; }

  204. Before

  205. After

  206. ipad-landscape.css

  207. ipad-landscape.css body { font-size:62.5%; } .frame { position:relative; background-color:#333; z-index:7;

    } .panel { background-color:transparent; } .slide-in { -webkit-animation-name:none; } .slide-out { -webkit-animation-name:none; } .reverse-in { -webkit-animation-name:none; } .reverse-out { -webkit-animation-name:none; } .panel { display:none; width:568px; position:absolute; left:0; background-color:#333; z- index:1; } .sub-view { display:none; margin-left:200px; } .appear { display:block; } .disappear { display:none; } .nav-view { display:block; width:200px; margin-left:0; position:absolute; left:0; top:0; } .back-link { display:none; } .disclaimer-link { display:none; }

  208. Before

  209. After

  210. 7 EMOTIONAL DESIGN

  211. http://designintellection.com/ratecalc/

  212. THANK YOU! David Yeiser http://designintellection.com/ @davidyeiser