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

Once Source to Rule Them All

7649fb4ccc9d731cee2550578f2b835d?s=47 davidyeiser
September 26, 2011

Once Source to Rule Them All

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

7649fb4ccc9d731cee2550578f2b835d?s=128

davidyeiser

September 26, 2011
Tweet

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