Date post: | 28-Jan-2015 |
Category: |
Design |
Upload: | david-yeiser |
View: | 107 times |
Download: | 2 times |
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