Once Source to Rule Them All
Upcoming SlideShare
Loading in...5
×
 

Once Source to Rule Them All

on

  • 7,328 views

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

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

Get an overview for designing sites for mobile, desktop and even the iPad. Examples include mimicking native appearance and animations with CSS3.

Statistics

Views

Total Views
7,328
Views on SlideShare
4,566
Embed Views
2,762

Actions

Likes
14
Downloads
83
Comments
0

14 Embeds 2,762

http://designintellection.com 2680
http://blog.designintellection.com 26
http://www.designintellection.com 21
http://www.slideshare.net 19
http://web.archive.org 5
http://static.slidesharecdn.com 2
http://twitter.com 2
https://www.rebelmouse.com 1
http://safe.tumblr.com 1
http://safe.tumblr.com 1
http://translate.googleusercontent.com 1
http://cancilleria.astrolabio.co 1
http://127.0.0.1:8795 1
http://awesomepitch.co 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Once Source to Rule Them All Once Source to Rule Them All Presentation Transcript

  • One Source to Rule Them All. R EF RES H LO UIS VILLE April 20, 2010
  • OR How to use media queries to optimize the same markup for different devices and features.
  • Reference The League of Moveable Type http://www.theleagueofmoveabletype.com/
  • How much should I charge per hour? E VE RY W EB D ES IG NE R ’ S Q U E ST I O N
  • Let’s build an app. E VE RY W EB D ES IG NE R ’ S A N SW E R
  • 1 Build for mobile first.
  • SKETCH
  • Start building...
  • 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" /> </head> <body> </body> </html>
  • 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" /> </head> <body> </body> </html>
  • 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" /> </head> <body> </body> </html>
  • 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" /> </head> <body> </body> </html>
  • 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" /> </head> <body> </body> </html>
  • 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" /> </head> <body> </body> </html>
  • Reference Rate Calculator http://designintellection.com/ratecalc/
  • 2 Media queries = neat.
  • Media: Types & Features
  • all Types: screen print handheld projection speech 3d-glasses
  • all Types: screen print handheld projection speech 3d-glasses
  • width height device-width device-height Features: orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid
  • max-width min-height min-device-width max-device-height Features: orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid
  • Reference Media Queries http://www.w3.org/TR/css3-mediaqueries/
  • Detect mobile
  • 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>
  • 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>
  • 3 HTML5 & CSS3
  • HTML5 (briefly)
  • 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>
  • 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>
  • 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>
  • 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>
  • Reference Dive Into HTML5 http://diveintohtml5.org/ HTML5 For Web Designers http://books.alistapart.com/product/html5-for-web-designers
  • CSS
  • base.css
  • base.css * { 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%; }
  • mobile.css
  • mobile.css 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 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; }
  • Reference Safari Reference Library http://developer.apple.com/safari/library/navigation/index.html
  • mobile.css 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; }
  • Title bar
  • 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>
  • 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>
  • mobile.css .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; }
  • Before
  • After
  • mobile.css .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 .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; }
  • background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop (0.5,#19627d), to(#19627d));
  • background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop (0.5,#19627d), to(#19627d));
  • background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop (0.5,#19627d), to(#19627d));
  • background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop (0.5,#19627d), to(#19627d));
  • background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop (0.5,#19627d), to(#19627d));
  • background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop (0.5,#19627d), to(#19627d));
  • Reference CSS3
  • Object Oriented CSS (Very briefly)
  • mobile.css .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 .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); }
  • Reference Object Oriented CSS http://wiki.github.com/stubbornella/oocss/
  • The Navigation
  • 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>
  • 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>
  • mobile.css .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; }
  • Before
  • After
  • After
  • index.php <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms- conditions">Terms <em class="amp">&amp;</em> Conditions</a>
  • mobile.css .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; }
  • Select specifics...
  • 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>
  • mobile.css .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 .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 .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 .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 .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; }
  • Before
  • After
  • Hover (or lack thereof)
  • mobile.css .tap-change:hover, .tap-change:active { background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#568821), to(#568821)); }
  • More markup
  • index.php <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 <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 <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 <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 <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 <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>
  • mobile.css .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 .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; }
  • Result
  • Result
  • index.php <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 <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>
  • 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; }
  • 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; }
  • Before
  • After
  • <input class="amount-value text-emboss" id="rent-amount" type="number" />
  • jQuery
  • index.php <!-- 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>
  • Rudimentary... (A.K.A. I’m not a jQuery expert)
  • 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>
  • 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>
  • CSS & z-index
  • 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; }
  • 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; }
  • .current { z-index:7; }
  • .current { z-index:7; }
  • .current { z-index:7; }
  • .current { z-index:7; }
  • .current .panel(s) { { z-index:7; z-index:1; } }
  • .panel(s) { z-index:1; }
  • .panel(s) { z-index:1; }
  • .panel { z-index:1; .current .current .panel(s) } {{ { z-index:7; z-index:7; z-index:1; .slide-in }} } { z-index:10; }
  • Watch this video CSS transitions with no animation http://designintellection.com/iphone-css-transitions-with-no-animation/
  • Last but not least...
  • Animation
  • .current .current {{ z-index:7; z-index:7; }}
  • 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; }
  • 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; }
  • 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; }
  • .panel { z-index:1; .current .current .panel(s) } {{ { z-index:7; z-index:7; z-index:1; .slide-in }} } { z-index:10; }
  • 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; }
  • mobile.css @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } }
  • @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } }
  • @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } }
  • @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } } 0%
  • @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } } 0% 100%
  • @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } }
  • @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } }
  • @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } } 0% 100%
  • @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } } 0% 100%
  • @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } } 0% 100%
  • mobile.css @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); } }
  • @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); } } 0% 100%
  • @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); } } -100% 0% 100%
  • @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); } } -100% 0% 100%
  • @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); } } -100% 0% 100%
  • @-webkit-keyframes slideout-toleft @-webkit-keyframes slidein-fromright { { from { -webkit-transform:translateX(0%); } from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(-100%); } to { -webkit-transform:translateX(0%); } } } -100% 0% 100%
  • @-webkit-keyframes slideout-toleft @-webkit-keyframes slidein-fromright { { from { -webkit-transform:translateX(0%); } from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(-100%); } to { -webkit-transform:translateX(0%); } } } -100% 0% 100%
  • Watch this video CSS transitions with animation http://designintellection.com/iphone-css-transitions-with-animation/
  • Reference jQTouch http://www.jqtouch.com/
  • 4 DESKTOP VERSION
  • Detect desktop
  • 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)" / >
  • 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)" / >
  • 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)" / >
  • desktop.css /* LOTS O’ STUFF */
  • 5 TYPOGRAPHY
  • @font-face
  • 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'); }
  • 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'); }
  • 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'); }
  • 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'); }
  • 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; }
  • Reference Font Squirrel http://www.fontsquirrel.com/
  • 6 iPad VERSION
  • Detect iPad
  • 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)" />
  • 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)" />
  • 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)" />
  • 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)" />
  • 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)" />
  • ipad-portait.css
  • 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; }
  • 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; }
  • 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; }
  • Before
  • After
  • ipad-landscape.css
  • 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; }
  • Before
  • After
  • 7 EMOTIONAL DESIGN
  • http://designintellection.com/ratecalc/
  • THANK YOU! David Yeiser http://designintellection.com/ @davidyeiser