once source to rule them all
Post on 28-Jan-2015
108 Views
Preview:
DESCRIPTION
TRANSCRIPT
REFRESH LOUISVILLEApril 20, 2010
One Source to Rule Them All.
ORHow to use media queries to optimize the same markup for different devices and features.
The League of Moveable Typehttp://www.theleagueofmoveabletype.com/
Reference
EVERY WEB DESIGNER’S QUESTION
How much should I charge per hour?
EVERY WEB DESIGNER’S ANSWER
Let’s build an app.
1Build for mobile first.
SKETCH
Start building...
<!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>
index.php
Rate Calculatorhttp://designintellection.com/ratecalc/
Reference
2Media queries = neat.
Types & Features
Media:
allscreenprinthandheldprojectionspeech3d-glasses
Types:
allscreenprinthandheldprojectionspeech3d-glasses
Types:
widthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratiocolorcolor-indexmonochromeresolutionscangrid
Features:
max-widthmin-heightmin-device-widthmax-device-heightorientationaspect-ratiodevice-aspect-ratiocolorcolor-indexmonochromeresolutionscangrid
Features:
Media Querieshttp://www.w3.org/TR/css3-mediaqueries/
Reference
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>
3HTML5 & 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">&</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">&</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">&</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">&</em> Conditions</a> </section>
</div>
Dive Into HTML5http://diveintohtml5.org/
Reference
HTML5 For Web Designershttp://books.alistapart.com/product/html5-for-web-designers
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%; }
base.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; }
mobile.css
Safari Reference Libraryhttp://developer.apple.com/safari/library/navigation/index.html
Reference
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
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>
.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
Before
After
.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;}
mobile.css
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));
CSS3
Reference
Object Oriented CSS(Very briefly)
.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); }
mobile.css
Object Oriented CSShttp://wiki.github.com/stubbornella/oocss/
Reference
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>
.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
Before
After
After
index.php
<a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms-conditions">Terms <em class="amp">&</em> Conditions</a>
.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
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>
.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;}
mobile.css
Before
After
Hover (or lack thereof)
.tap-change:hover, .tap-change:active{ background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#568821), to(#568821));}
mobile.css
More markup
<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 “misc.” 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 “misc.” 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 “misc.” 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 “misc.” 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 “misc.” 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 “misc.” 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
.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; }
mobile.css
Result
Result
<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 “misc.” 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 “misc.” value for any extra recurring monthly expenses not listed</p> <span class="clear"></span> </header>
index.php
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
<!-- 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
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{z-index:7;}
.panel(s){z-index:1;}
.panel(s){z-index:1;}
.panel(s){z-index:1;}
.current{z-index:7;}
.panel(s){z-index:1;}
.current{z-index:7;}
.panel{z-index:1;}
.slide-in{z-index:10;}
CSS transitions with no animationhttp://designintellection.com/iphone-css-transitions-with-no-animation/
Watch this video
Last but not least...
Animation
.current{z-index:7;}
.current{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; }
.current{z-index:7;}
.panel(s){z-index:1;}
.current{z-index:7;}
.panel{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%); }}
0% 100%-100%
@-webkit-keyframes slideout-toleft{ from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); }}
0% 100%-100%
@-webkit-keyframes slideout-toleft{ from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); }}
0% 100%-100%
@-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%
@-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%
CSS transitions with animationhttp://designintellection.com/iphone-css-transitions-with-animation/
Watch this video
4DESKTOP 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 */
5TYPOGRAPHY
@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; }
Font Squirrelhttp://www.fontsquirrel.com/
Reference
6iPad 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; }
Bef
ore
Aft
er
ipad-landscape.css
ipad-landscape.cssbody { 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; }
Bef
ore
Aft
er
7EMOTIONAL DESIGN
http://designintellection.com/ratecalc/
THANK YOU!
David Yeiser
http://designintellection.com/
@davidyeiser
top related