Once Source to Rule Them All

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>  <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" />  <link rel="stylesheet" href="_css/base.css" media="handheld, all" /></head>

<body>

</body></html>

index.php

<!DOCTYPE html>

<html>

<body>

</body></html>

index.php

<!DOCTYPE html>

<html>

<body>

</body></html>

index.php

<!DOCTYPE html>

<html>

<body>

</body></html>

index.php

<!DOCTYPE html>

<html>

<body>

</body></html>

index.php

<!DOCTYPE html>

<html>

<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>  <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" />  <link rel="stylesheet" href="_css/base.css" media="handheld, all" />

<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>  <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" />  <link rel="stylesheet" href="_css/base.css" media="handheld, all" />

<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>

Dive Into HTML5http://diveintohtml5.org/

Reference

HTML5 For Web Designershttp://books.alistapart.com/product/html5-for-web-designers

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

Safari Reference Libraryhttp://developer.apple.com/safari/library/navigation/index.html

Reference

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

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));

Reference

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; 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

.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

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

.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

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

</div></section>

index.php

</div></section>

index.php

</div></section>

index.php

</div></section>

index.php

</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

<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

jQuery

<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;}

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

.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

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

.panel{z-index:1;}

.slide-in{z-index:10;}

mobile.css

@-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%); }}

0% 100%

0% 100%-100%

0% 100%

CSS transitions with animationhttp://designintellection.com/iphone-css-transitions-with-animation/

Watch this video

jQTouchhttp://www.jqtouch.com/

Reference

4DESKTOP VERSION

Detect desktop

index.php

<link rel="stylesheet" href="_css/base.css" media="handheld, all" />

<link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:320px)" />

<link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" />

index.php

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

.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

<link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" />

index.php

<link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" />

index.php

<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

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

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; }

7EMOTIONAL DESIGN

http://designintellection.com/ratecalc/

THANK YOU!

David Yeiser

http://designintellection.com/

@davidyeiser

Once Source to Rule Them All

Design

Transcript of Once Source to Rule Them All