SlideShare a Scribd company logo
One Source to Rule
Them All.


R EF RES H LO UIS VILLE
April 20, 2010
OR
How to use media queries to
optimize the same markup
for different devices
and features.
Reference
The League of Moveable Type
http://www.theleagueofmoveabletype.com/
Once Source to Rule Them All
How much should I
charge per hour?


E VE RY W EB D ES IG NE R ’ S Q U E ST I O N
Let’s build an app.



E VE RY W EB D ES IG NE R ’ S A N SW E R
1
Build for mobile first.
SKETCH
Once Source to Rule Them All
Start building...
index.php
<!DOCTYPE html>

<html>

<head>
     <meta charset="utf-8" />

    <title>Rate Calculator</title>

    <!--
          iPhone specific details:
          http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/
index.html
     -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="viewport" content="width=device-width, user-scalable=no" />
     <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" />

     <!-- Base stylesheet for all devices -->
     <link rel="stylesheet" href="_css/base.css" media="handheld, all" />
</head>

<body>


</body>
</html>
index.php
<!DOCTYPE html>

<html>

<head>
     <meta charset="utf-8" />

    <title>Rate Calculator</title>

    <!--
          iPhone specific details:
          http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/
index.html
     -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="viewport" content="width=device-width, user-scalable=no" />
     <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" />

     <!-- Base stylesheet for all devices -->
     <link rel="stylesheet" href="_css/base.css" media="handheld, all" />
</head>

<body>


</body>
</html>
index.php
<!DOCTYPE html>

<html>

<head>
     <meta charset="utf-8" />

    <title>Rate Calculator</title>

    <!--
          iPhone specific details:
          http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/
index.html
     -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="viewport" content="width=device-width, user-scalable=no" />
     <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" />

     <!-- Base stylesheet for all devices -->
     <link rel="stylesheet" href="_css/base.css" media="handheld, all" />
</head>

<body>


</body>
</html>
index.php
<!DOCTYPE html>

<html>

<head>
     <meta charset="utf-8" />

    <title>Rate Calculator</title>

    <!--
          iPhone specific details:
          http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/
index.html
     -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="viewport" content="width=device-width, user-scalable=no" />
     <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" />

     <!-- Base stylesheet for all devices -->
     <link rel="stylesheet" href="_css/base.css" media="handheld, all" />
</head>

<body>


</body>
</html>
index.php
<!DOCTYPE html>

<html>

<head>
     <meta charset="utf-8" />

    <title>Rate Calculator</title>

    <!--
          iPhone specific details:
          http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/
index.html
     -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="viewport" content="width=device-width, user-scalable=no" />
     <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" />

     <!-- Base stylesheet for all devices -->
     <link rel="stylesheet" href="_css/base.css" media="handheld, all" />
</head>

<body>


</body>
</html>
index.php
<!DOCTYPE html>

<html>

<head>
     <meta charset="utf-8" />

    <title>Rate Calculator</title>

    <!--
          iPhone specific details:
          http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/
index.html
     -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="viewport" content="width=device-width, user-scalable=no" />
     <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" />

     <!-- Base stylesheet for all devices -->
     <link rel="stylesheet" href="_css/base.css" media="handheld, all" />
</head>

<body>


</body>
</html>
Once Source to Rule Them All
Once Source to Rule Them All
Once Source to Rule Them All
Once Source to Rule Them All
Once Source to Rule Them All
Once Source to Rule Them All
Reference
Rate Calculator
http://designintellection.com/ratecalc/
2
Media queries = neat.
Media:
Types & Features
all
Types:   screen
         print
         handheld
         projection
         speech
         3d-glasses
all
Types:   screen
         print
         handheld
         projection
         speech
         3d-glasses
width
            height
            device-width
            device-height
Features:   orientation
            aspect-ratio
            device-aspect-ratio
            color
            color-index
            monochrome
            resolution
            scan
            grid
max-width
            min-height
            min-device-width
            max-device-height
Features:   orientation
            aspect-ratio
            device-aspect-ratio
            color
            color-index
            monochrome
            resolution
            scan
            grid
Reference
Media Queries
http://www.w3.org/TR/css3-mediaqueries/
Detect mobile
index.php
<!DOCTYPE html>

<html>

<head>
     <meta charset="utf-8" />

    <title>Rate Calculator</title>

    <!--
          iPhone specific details:
          http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/
index.html
     -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="viewport" content="width=device-width, user-scalable=no" />
     <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" />

    <!-- Base stylesheet for all devices -->
    <link rel="stylesheet" href="_css/base.css" media="handheld, all" />

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

<body>


</body>
</html>
index.php
<!DOCTYPE html>

<html>

<head>
     <meta charset="utf-8" />

    <title>Rate Calculator</title>

    <!--
          iPhone specific details:
          http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/
index.html
     -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="viewport" content="width=device-width, user-scalable=no" />
     <link rel="apple-touch-icon-precomposed" href="_images/touch-icon.png" />

    <!-- Base stylesheet for all devices -->
    <link rel="stylesheet" href="_css/base.css" media="handheld, all" />

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

<body>


</body>
</html>
3
HTML5 & CSS3
HTML5 (briefly)
index.php
<div id="site" class="frame">

    <section id="home-view" class="panel current nav-view">
         <header id="home-title" class="identity">
              <h1 class="app-name title-bar">Rate Calculator</h1>
         </header>

         <h1 id="the-hourly-rate-display" class="focus-value text-emboss layout"><span
class="meta-label">$</span><strong id="the-rate"></strong><sup>.00</sup></h1>

         <nav id="main-nav" class="app-nav layout">
              <ul>
                   <li><a class="app-nav-item app-nav-item-current text-emboss tap-change"
href="#bills">Bills</a></li>
                   <li><a class="app-nav-item text-emboss tap-change"
href="#expenses">Expenses</a></li>
                   <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</
a></li>
                   <li><a class="app-nav-item text-emboss tap-change"
href="#profits">Profits</a></li>
              </ul>
         </nav>

          <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms-
conditions">Terms <em class="amp">&amp;</em> Conditions</a>
     </section>

</div>
index.php
<div id="site" class="frame">

    <section id="home-view" class="panel current nav-view">
         <header id="home-title" class="identity">
              <h1 class="app-name title-bar">Rate Calculator</h1>
         </header>

         <h1 id="the-hourly-rate-display" class="focus-value text-emboss layout"><span
class="meta-label">$</span><strong id="the-rate"></strong><sup>.00</sup></h1>

         <nav id="main-nav" class="app-nav layout">
              <ul>
                   <li><a class="app-nav-item app-nav-item-current text-emboss tap-change"
href="#bills">Bills</a></li>
                   <li><a class="app-nav-item text-emboss tap-change"
href="#expenses">Expenses</a></li>
                   <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</
a></li>
                   <li><a class="app-nav-item text-emboss tap-change"
href="#profits">Profits</a></li>
              </ul>
         </nav>

          <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms-
conditions">Terms <em class="amp">&amp;</em> Conditions</a>
     </section>

</div>
index.php
<div id="site" class="frame">

    <section id="home-view" class="panel current nav-view">
         <header id="home-title" class="identity">
              <h1 class="app-name title-bar">Rate Calculator</h1>
         </header>

         <h1 id="the-hourly-rate-display" class="focus-value text-emboss layout"><span
class="meta-label">$</span><strong id="the-rate"></strong><sup>.00</sup></h1>

         <nav id="main-nav" class="app-nav layout">
              <ul>
                   <li><a class="app-nav-item app-nav-item-current text-emboss tap-change"
href="#bills">Bills</a></li>
                   <li><a class="app-nav-item text-emboss tap-change"
href="#expenses">Expenses</a></li>
                   <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</
a></li>
                   <li><a class="app-nav-item text-emboss tap-change"
href="#profits">Profits</a></li>
              </ul>
         </nav>

          <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms-
conditions">Terms <em class="amp">&amp;</em> Conditions</a>
     </section>

</div>
index.php
<div id="site" class="frame">

    <section id="home-view" class="panel current nav-view">
         <header id="home-title" class="identity">
              <h1 class="app-name title-bar">Rate Calculator</h1>
         </header>

         <h1 id="the-hourly-rate-display" class="focus-value text-emboss layout"><span
class="meta-label">$</span><strong id="the-rate"></strong><sup>.00</sup></h1>

         <nav id="main-nav" class="app-nav layout">
              <ul>
                   <li><a class="app-nav-item app-nav-item-current text-emboss tap-change"
href="#bills">Bills</a></li>
                   <li><a class="app-nav-item text-emboss tap-change"
href="#expenses">Expenses</a></li>
                   <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</
a></li>
                   <li><a class="app-nav-item text-emboss tap-change"
href="#profits">Profits</a></li>
              </ul>
         </nav>

          <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms-
conditions">Terms <em class="amp">&amp;</em> Conditions</a>
     </section>

</div>
Reference
Dive Into HTML5
http://diveintohtml5.org/


HTML5 For Web Designers
http://books.alistapart.com/product/html5-for-web-designers
CSS
base.css
base.css
* { margin:0; padding:0; }

body
{
       font-family:"Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif;
       font-size:100%;
       background-color:#fff;
}

.layout { display:block; }
.panel { display:block; }

header { display:block; position:relative; }
ul { list-style:none; }
sup { font-size:50%; }
Once Source to Rule Them All
mobile.css
mobile.css
body
{
       overflow:hidden;
       background-color:#333;
       -webkit-text-size-adjust:none;
}

.layout { width:90%; margin:0 auto; }

.focus-value
{
     padding:12px 0 28px 0;
     font-size:4em;
     font-weight:bold;
     line-height:1em;
     text-align:center;
     color:#fff;
}

.meta-label { color:#555; }
mobile.css
body
{
       overflow:hidden;
       background-color:#333;
       -webkit-text-size-adjust:none;
}

.layout { width:90%; margin:0 auto; }

.focus-value
{
     padding:12px 0 28px 0;
     font-size:4em;
     font-weight:bold;
     line-height:1em;
     text-align:center;
     color:#fff;
}

.meta-label { color:#555; }
Reference
Safari Reference Library
http://developer.apple.com/safari/library/navigation/index.html
mobile.css
body
{
       overflow:hidden;
       background-color:#333;
       -webkit-text-size-adjust:none;
}

.layout { width:90%; margin:0 auto; }

.focus-value
{
     padding:12px 0 28px 0;
     font-size:4em;
     font-weight:bold;
     line-height:1em;
     text-align:center;
     color:#fff;
}

.meta-label { color:#555; }
Once Source to Rule Them All
Once Source to Rule Them All
Title bar
index.php

 <section id="home-view" class="panel current nav-view">
     <header id="home-title" class="identity">
          <h1 class="app-name title-bar">Rate Calculator</h1>
     </header>

 ...

 </section>
index.php

 <section id="home-view" class="panel current nav-view">
     <header id="home-title" class="identity">
          <h1 class="app-name title-bar">Rate Calculator</h1>
     </header>

 ...

 </section>
mobile.css
.title-bar
{
     display:block;
     width:90%;
     padding:12px 5% 16px 5%;
     font-size:1.125em;
     font-weight:bold;
     line-height:0.889em;
     text-align:center;
     text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2);
     color:#fff;
     border-top:1px solid #2e7d9b;
     border-bottom:1px solid #222;
     background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop
(0.5,#216c88), color-stop(0.5,#19627d), to(#19627d));
     background-color:#19627d;
}
Before
After
mobile.css
.title-bar
{
     display:block;
     width:90%;
     padding:12px 5% 16px 5%;
     font-size:1.125em;
     font-weight:bold;
     line-height:0.889em;
     text-align:center;
     text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2);
     color:#fff;
     border-top:1px solid #2e7d9b;
     border-bottom:1px solid #222;
     background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop
(0.5,#216c88), color-stop(0.5,#19627d), to(#19627d));
     background-color:#19627d;
}
mobile.css
.title-bar
{
     display:block;
     width:90%;
     padding:12px 5% 16px 5%;
     font-size:1.125em;
     font-weight:bold;
     line-height:0.889em;
     text-align:center;
     text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2);
     color:#fff;
     border-top:1px solid #2e7d9b;
     border-bottom:1px solid #222;
     background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop
(0.5,#216c88), color-stop(0.5,#19627d), to(#19627d));
     background-color:#19627d;
}
Once Source to Rule Them All
background-image:
-webkit-gradient(
linear,
0% 0%,
0% 100%,
from(#216c88),
color-stop
(0.5,#216c88),
color-stop
(0.5,#19627d),
to(#19627d));
background-image:
-webkit-gradient(
linear,
0% 0%,
0% 100%,
from(#216c88),
color-stop
(0.5,#216c88),
color-stop
(0.5,#19627d),
to(#19627d));
background-image:
-webkit-gradient(
linear,
0% 0%,
0% 100%,
from(#216c88),
color-stop
(0.5,#216c88),
color-stop
(0.5,#19627d),
to(#19627d));
background-image:
-webkit-gradient(
linear,
0% 0%,
0% 100%,
from(#216c88),
color-stop
(0.5,#216c88),
color-stop
(0.5,#19627d),
to(#19627d));
background-image:
-webkit-gradient(
linear,
0% 0%,
0% 100%,
from(#216c88),
color-stop
(0.5,#216c88),
color-stop
(0.5,#19627d),
to(#19627d));
background-image:
-webkit-gradient(
linear,
0% 0%,
0% 100%,
from(#216c88),
color-stop
(0.5,#216c88),
color-stop
(0.5,#19627d),
to(#19627d));
Reference
CSS3
Once Source to Rule Them All
Object Oriented CSS
(Very briefly)
mobile.css
.title-bar
{
     display:block;
     width:90%;
     padding:12px 5% 16px 5%;
     font-size:1.125em;
     font-weight:bold;
     line-height:0.889em;
     text-align:center;
     text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2);
     color:#fff;
     border-top:1px solid #2e7d9b;
     border-bottom:1px solid #222;
     background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop
(0.5,#216c88), color-stop(0.5,#19627d), to(#19627d));
     background-color:#19627d;
}
mobile.css
.title-bar
{
     display:block;
     width:90%;
     padding:12px 5% 16px 5%;
     font-size:1.125em;
     font-weight:bold;
     line-height:0.889em;
     text-align:center;
     color:#fff;
     border-top:1px solid #2e7d9b;
     border-bottom:1px solid #222;
     background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#216c88), color-stop
(0.5,#216c88), color-stop(0.5,#19627d), to(#19627d));
     background-color:#19627d;
}

.text-emboss { text-shadow:-1px -1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255,255,255,0.2); }
Reference
Object Oriented CSS
http://wiki.github.com/stubbornella/oocss/
The Navigation
index.php

         <nav id="main-nav" class="app-nav layout">
              <ul>
                   <li><a class="app-nav-item app-nav-item-current text-emboss tap-change"
href="#bills">Bills</a></li>
                   <li><a class="app-nav-item text-emboss tap-change"
href="#expenses">Expenses</a></li>
                   <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</
a></li>
                   <li><a class="app-nav-item text-emboss tap-change"
href="#profits">Profits</a></li>
              </ul>
         </nav>
index.php

         <nav id="main-nav" class="app-nav layout">
              <ul>
                   <li><a class="app-nav-item app-nav-item-current text-emboss tap-change"
href="#bills">Bills</a></li>
                   <li><a class="app-nav-item text-emboss tap-change"
href="#expenses">Expenses</a></li>
                   <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</
a></li>
                   <li><a class="app-nav-item text-emboss tap-change"
href="#profits">Profits</a></li>
              </ul>
         </nav>
mobile.css

.app-nav-item
{
     display:block;
     width:90%;
     padding:8px 5% 10px 5%;
     font-size:1.5em;
     font-weight:bold;
     text-decoration:none;
     color:#fff;
     border-bottom:1px solid #333;
     background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#1c1c1c), color-stop
(0.5,#1c1c1c), color-stop(0.5,#111), to(#111));
     background-color:#111;
}
Before
After
After
index.php


         <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms-
conditions">Terms <em class="amp">&amp;</em> Conditions</a>
mobile.css
.disclaimer-link
{
   display:block;
   width:100%;
   padding:10px 0;
   position:absolute;
   left:0;
   bottom:0;
   font-size:0.75em;
   line-height:1em;
   text-align:center;
   text-decoration:none;
   color:#fff;
   background-color:rgba(0,0,0,0.2);
   z-index:15;
}
Once Source to Rule Them All
Select specifics...
Once Source to Rule Them All
Once Source to Rule Them All
Once Source to Rule Them All
Once Source to Rule Them All
Once Source to Rule Them All
index.php

         <nav id="main-nav" class="app-nav layout">
              <ul>
                   <li><a class="app-nav-item app-nav-item-current text-emboss tap-change"
href="#bills">Bills</a></li>
                   <li><a class="app-nav-item text-emboss tap-change"
href="#expenses">Expenses</a></li>
                   <li><a class="app-nav-item text-emboss tap-change" href="#work">Work</
a></li>
                   <li><a class="app-nav-item text-emboss tap-change"
href="#profits">Profits</a></li>
              </ul>
         </nav>
mobile.css

.app-nav li:first-child .app-nav-item
{
     -webkit-border-top-right-radius:10px;
     -webkit-border-top-left-radius:10px;
}

.app-nav li:nth-child(4) .app-nav-item
{
     border-bottom:0;
     -webkit-border-bottom-right-radius:10px;
     -webkit-border-bottom-left-radius:10px;
}
mobile.css

.app-nav li:first-child .app-nav-item
{
     -webkit-border-top-right-radius:10px;
     -webkit-border-top-left-radius:10px;
}

.app-nav li:nth-child(4) .app-nav-item
{
     border-bottom:0;
     -webkit-border-bottom-right-radius:10px;
     -webkit-border-bottom-left-radius:10px;
}
mobile.css

.app-nav li:first-child .app-nav-item
{
     -webkit-border-top-right-radius:10px;
     -webkit-border-top-left-radius:10px;
}

.app-nav li:nth-child(4) .app-nav-item
{
     border-bottom:0;
     -webkit-border-bottom-right-radius:10px;
     -webkit-border-bottom-left-radius:10px;
}
mobile.css

.app-nav li:first-child .app-nav-item
{
     -webkit-border-top-right-radius:10px;
     -webkit-border-top-left-radius:10px;
}

.app-nav li:nth-child(4) .app-nav-item
{
     border-bottom:0;
     -webkit-border-bottom-right-radius:10px;
     -webkit-border-bottom-left-radius:10px;
}
mobile.css

.app-nav li:first-child .app-nav-item
{
     -webkit-border-top-right-radius:10px;
     -webkit-border-top-left-radius:10px;
}

.app-nav li:nth-child(4) .app-nav-item
{
     border-bottom:0;
     -webkit-border-bottom-right-radius:10px;
     -webkit-border-bottom-left-radius:10px;
}
Before
After
Hover
(or lack thereof)
mobile.css


.tap-change:hover, .tap-change:active
{
     background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#568821), to(#568821));
}
Once Source to Rule Them All
Once Source to Rule Them All
Once Source to Rule Them All
More markup
index.php
<section id="bills" class="panel sub-view appear">
     <header>
          <h1 class="title-bar text-emboss">Bills</h1>
          <a class="ui-link back-link reverse-action text-emboss tap-change" href="#home-
view">Back</a>
          <p class="instructions copy layout">Enter monthly values, use the
&#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p>
          <span class="clear"></span>
     </header>

     <div class="layout">
          <p class="item">
               <label class="amount-type text-emboss" for="rent-amount">Rent:</label>
               <input class="amount-value text-emboss" id="rent-amount" type="number" />
               <span class="amount-choice" id="rent-slider"><span class="amount-choice-
default">700</span></span>
          </p>

              ...

     </div>
</section>
index.php
<section id="bills" class="panel sub-view appear">
     <header>
          <h1 class="title-bar text-emboss">Bills</h1>
          <a class="ui-link back-link reverse-action text-emboss tap-change" href="#home-
view">Back</a>
          <p class="instructions copy layout">Enter monthly values, use the
&#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p>
          <span class="clear"></span>
     </header>

     <div class="layout">
          <p class="item">
               <label class="amount-type text-emboss" for="rent-amount">Rent:</label>
               <input class="amount-value text-emboss" id="rent-amount" type="number" />
               <span class="amount-choice" id="rent-slider"><span class="amount-choice-
default">700</span></span>
          </p>

              ...

     </div>
</section>
index.php
<section id="bills" class="panel sub-view appear">
     <header>
          <h1 class="title-bar text-emboss">Bills</h1>
          <a class="ui-link back-link reverse-action text-emboss tap-change" href="#home-
view">Back</a>
          <p class="instructions copy layout">Enter monthly values, use the
&#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p>
          <span class="clear"></span>
     </header>

     <div class="layout">
          <p class="item">
               <label class="amount-type text-emboss" for="rent-amount">Rent:</label>
               <input class="amount-value text-emboss" id="rent-amount" type="number" />
               <span class="amount-choice" id="rent-slider"><span class="amount-choice-
default">700</span></span>
          </p>

              ...

     </div>
</section>
index.php
<section id="bills" class="panel sub-view appear">
     <header>
          <h1 class="title-bar text-emboss">Bills</h1>
          <a class="ui-link back-link reverse-action text-emboss tap-change" href="#home-
view">Back</a>
          <p class="instructions copy layout">Enter monthly values, use the
&#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p>
          <span class="clear"></span>
     </header>

     <div class="layout">
          <p class="item">
               <label class="amount-type text-emboss" for="rent-amount">Rent:</label>
               <input class="amount-value text-emboss" id="rent-amount" type="number" />
               <span class="amount-choice" id="rent-slider"><span class="amount-choice-
default">700</span></span>
          </p>

              ...

     </div>
</section>
index.php
<section id="bills" class="panel sub-view appear">
     <header>
          <h1 class="title-bar text-emboss">Bills</h1>
          <a class="ui-link back-link reverse-action text-emboss tap-change" href="#home-
view">Back</a>
          <p class="instructions copy layout">Enter monthly values, use the
&#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p>
          <span class="clear"></span>
     </header>

     <div class="layout">
          <p class="item">
               <label class="amount-type text-emboss" for="rent-amount">Rent:</label>
               <input class="amount-value text-emboss" id="rent-amount" type="number" />
               <span class="amount-choice" id="rent-slider"><span class="amount-choice-
default">700</span></span>
          </p>

              ...

     </div>
</section>
index.php
<section id="bills" class="panel sub-view appear">
     <header>
          <h1 class="title-bar text-emboss">Bills</h1>
          <a class="ui-link back-link reverse-action text-emboss tap-change" href="#home-
view">Back</a>
          <p class="instructions copy layout">Enter monthly values, use the
&#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p>
          <span class="clear"></span>
     </header>

     <div class="layout">
          <p class="item">
               <label class="amount-type text-emboss" for="rent-amount">Rent:</label>
               <input class="amount-value text-emboss" id="rent-amount" type="number" />
               <span class="amount-choice" id="rent-slider"><span class="amount-choice-
default">700</span></span>
          </p>

              ...

     </div>
</section>
mobile.css
.hidden { display:none; }
.panel { display:none; width:100%; min-height:460px; position:absolute; left:0; background-
color:#333; z-index:1; }
.current { display:block; z-index:7; }

.copy { padding:10px 0; font-weight:normal; color:#ccc; }
.item { display:block; padding:10px 0; clear:both; font-size:1em; line-height:1em; border-
top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(0,0,0,0.1); }
.item:after { content:"."; display:block; height:0; overflow:hidden; visibility:hidden;
clear:both; }
.amount-type { display:block; width:40%; padding:3px 10% 0 0; float:left; font-size:1.125em;
font-weight:bold; color:#fff; }
.amount-value { display:block; width:45%; padding:5px 2.5%; float:left; font-
family:"Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; font-size:2em; font-
weight:bold; color:#fff; border:0; background-color:#222; -webkit-user-select:auto; -
webkit-appearance:textarea; -webkit-border-radius:5px; }
.amount-choice { display:none; }
mobile.css
.hidden { display:none; }
.panel { display:none; width:100%; min-height:460px; position:absolute; left:0; background-
color:#333; z-index:1; }
.current { display:block; z-index:7; }

.copy { padding:10px 0; font-weight:normal; color:#ccc; }
.item { display:block; padding:10px 0; clear:both; font-size:1em; line-height:1em; border-
top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(0,0,0,0.1); }
.item:after { content:"."; display:block; height:0; overflow:hidden; visibility:hidden;
clear:both; }
.amount-type { display:block; width:40%; padding:3px 10% 0 0; float:left; font-size:1.125em;
font-weight:bold; color:#fff; }
.amount-value { display:block; width:45%; padding:5px 2.5%; float:left; font-
family:"Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-serif; font-size:2em; font-
weight:bold; color:#fff; border:0; background-color:#222; -webkit-user-select:auto; -webkit-
appearance:textarea; -webkit-border-radius:5px; }
.amount-choice { display:none; }
Result
Result
index.php

     <header>
          <h1 class="title-bar text-emboss">Bills</h1>
          <a class="ui-link back-link reverse-action text-emboss tap-change" href="#home-
view">Back</a>
          <p class="instructions copy layout">Enter monthly values, use the
&#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p>
          <span class="clear"></span>
     </header>
index.php

     <header>
          <h1 class="title-bar text-emboss">Bills</h1>
          <a class="ui-link back-link reverse-action text-emboss tap-change" href="#home-
view">Back</a>
          <p class="instructions copy layout">Enter monthly values, use the
&#8220;misc.&#8221; value for any extra recurring monthly expenses not listed</p>
          <span class="clear"></span>
     </header>
mobile.css
.ui-link
{
     padding:5px 10px 8px 10px;
     font-size:0.75em;
     font-weight:bold;
     line-height:1em;
     text-decoration:none;
     color:#fff;
     border:1px solid #134d62;
     background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#19627d), color-stop
(0.5,#19627d), color-stop(0.5,#134d62), to(#134d62));
     -webkit-border-radius:4px;
     -webkit-box-shadow:1px 1px 0 rgba(255,255,255,0.2);
}

.reverse-action { position:absolute; top:9px; left:8px; }
.info-link { position:absolute; top:9px; right:8px; }
mobile.css
.ui-link
{
     padding:5px 10px 8px 10px;
     font-size:0.75em;
     font-weight:bold;
     line-height:1em;
     text-decoration:none;
     color:#fff;
     border:1px solid #134d62;
     background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#19627d), color-stop
(0.5,#19627d), color-stop(0.5,#134d62), to(#134d62));
     -webkit-border-radius:4px;
     -webkit-box-shadow:1px 1px 0 rgba(255,255,255,0.2);
}

.reverse-action { position:absolute; top:9px; left:8px; }
.info-link { position:absolute; top:9px; right:8px; }
Before
After
<input
class="amount-value
text-emboss"
id="rent-amount"
type="number" />
Once Source to Rule Them All
jQuery
index.php


<!-- jQuery and jQuery UI -->
<script src="_js/jquery-1.4.2.min.js"></script>
<script src="_js/jquery-ui-1.8.custom.min.js"></script>
<script src="_js/rate-calculate.js"></script>
Rudimentary...
(A.K.A. I’m not a
jQuery expert)
index.php
<script>
     $(document).ready(function() {
          $("#main-nav ul li a").click(
               function() {
                    $(".app-nav-item").removeClass("app-nav-item-current");
                    $(this).addClass("app-nav-item-current");
                    var showPanel = $(this).attr("href");
                    $("#home-view").removeClass("reverse-in panel-appear current");
                    $("#home-view").addClass("slide-out");
                    $("section").removeClass("reverse-out panel-close appear");
                    $(showPanel).addClass("slide-in appear");
                    return false;
               }
          );

            $("a.back-link").click(
                 function() {
                      var removePanel = '#'+$(this).parents("section").attr("id");
                      $(removePanel).removeClass("slide-in appear");
                      $(removePanel).addClass("reverse-out");
                      $("#home-view").removeClass("slide-out");
                      $("#home-view").addClass("reverse-in current");
                      return false;
                 }
            );

    });

     ...

</script>
index.php
<script>
     $(document).ready(function() {

            ...

            $("#read-terms-conditions").click(
                 function() {
                      var showPanel = $(this).attr("href");
                      $("#home-view").removeClass("reverse-in panel-appear");
                      $(showPanel).removeClass("panel-close");
                      $("section").removeClass("reverse-out panel-close");
                      $(showPanel).addClass("slide-up panel-flip-inner");
                      return false;
                 }
            );

            $("a.close-link").click(
                 function() {
                      $("#terms-conditions").removeClass("slide-up");
                      $("#terms-conditions").addClass("panel-close");
                      $("#home-view").addClass("panel-appear");
                      return false;
                 }
            );
     });
</script>
CSS & z-index
mobile.css

.slide-in { display:block; z-index:10; }
.slide-out { display:block; z-index:5; }
.reverse-in { display:block; z-index:10; }
.reverse-out { display:block; height:460px; overflow:hidden; z-index:5; }
.slide-up { display:block; z-index:10; }
.panel-close { display:block; z-index:5; }
.panel-appear { display:block; z-index:10; }
mobile.css

.slide-in { display:block; z-index:10; }
.slide-out { display:block; z-index:5; }
.reverse-in { display:block; z-index:10; }
.reverse-out { display:block; height:460px; overflow:hidden; z-index:5; }
.slide-up { display:block; z-index:10; }
.panel-close { display:block; z-index:5; }
.panel-appear { display:block; z-index:10; }
Once Source to Rule Them All
.current
{
z-index:7;
}
.current
{
z-index:7;
}
.current
{
z-index:7;
}
.current
{
z-index:7;
}
.current     .panel(s)
{            {
z-index:7;   z-index:1;
}            }
.panel(s)
{
z-index:1;
}
.panel(s)
{
z-index:1;
}
.panel
   {
   z-index:1;
.current
 .current        .panel(s)
   }
{{               {
z-index:7;
 z-index:7;      z-index:1;
   .slide-in
}}               }
   {
   z-index:10;
   }
Watch this video
CSS transitions with no animation
http://designintellection.com/iphone-css-transitions-with-no-animation/
Last but not least...
Animation
Once Source to Rule Them All
Once Source to Rule Them All
.current
 .current
{{
z-index:7;
 z-index:7;
}}
Once Source to Rule Them All
Once Source to Rule Them All
Once Source to Rule Them All
mobile.css

.animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:
350ms; }
.slide-in { display:block; -webkit-animation-name:slidein-fromright; z-index:10; }
.slide-out { display:block; -webkit-animation-name:slideout-toleft; z-index:5; }
.reverse-in { display:block; -webkit-animation-name:slidein-fromleft; z-index:10; }
.reverse-out { display:block; height:460px; overflow:hidden; -webkit-animation-
name:slideout-toright; z-index:5; }
.slide-up { display:block; -webkit-animation-name:slideup-frombottom; z-index:10; }
.panel-close { display:block; -webkit-animation-name:panel-close; z-index:5; }
.panel-appear { display:block; -webkit-animation-name:panel-appear; z-index:10; }
mobile.css

.animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:
350ms; }
.slide-in { display:block; -webkit-animation-name:slidein-fromright; z-index:10; }
.slide-out { display:block; -webkit-animation-name:slideout-toleft; z-index:5; }
.reverse-in { display:block; -webkit-animation-name:slidein-fromleft; z-index:10; }
.reverse-out { display:block; height:460px; overflow:hidden; -webkit-animation-
name:slideout-toright; z-index:5; }
.slide-up { display:block; -webkit-animation-name:slideup-frombottom; z-index:10; }
.panel-close { display:block; -webkit-animation-name:panel-close; z-index:5; }
.panel-appear { display:block; -webkit-animation-name:panel-appear; z-index:10; }
mobile.css

.animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:
350ms; }
.slide-in { display:block; -webkit-animation-name:slidein-fromright; z-index:10; }
.slide-out { display:block; -webkit-animation-name:slideout-toleft; z-index:5; }
.reverse-in { display:block; -webkit-animation-name:slidein-fromleft; z-index:10; }
.reverse-out { display:block; height:460px; overflow:hidden; -webkit-animation-
name:slideout-toright; z-index:5; }
.slide-up { display:block; -webkit-animation-name:slideup-frombottom; z-index:10; }
.panel-close { display:block; -webkit-animation-name:panel-close; z-index:5; }
.panel-appear { display:block; -webkit-animation-name:panel-appear; z-index:10; }
.panel
   {
   z-index:1;
.current
 .current        .panel(s)
   }
{{               {
z-index:7;
 z-index:7;      z-index:1;
   .slide-in
}}               }
   {
   z-index:10;
   }
mobile.css

.animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:
350ms; }
.slide-in { display:block; -webkit-animation-name:slidein-fromright; z-index:10; }
.slide-out { display:block; -webkit-animation-name:slideout-toleft; z-index:5; }
.reverse-in { display:block; -webkit-animation-name:slidein-fromleft; z-index:10; }
.reverse-out { display:block; height:460px; overflow:hidden; -webkit-animation-
name:slideout-toright; z-index:5; }
.slide-up { display:block; -webkit-animation-name:slideup-frombottom; z-index:10; }
.panel-close { display:block; -webkit-animation-name:panel-close; z-index:5; }
.panel-appear { display:block; -webkit-animation-name:panel-appear; z-index:10; }
mobile.css


@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { -webkit-transform:translateX(0%); }
}
@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { -webkit-transform:translateX(0%); }
}
@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { -webkit-transform:translateX(0%); }
}
@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { -webkit-transform:translateX(0%); }
}


                       0%
@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { -webkit-transform:translateX(0%); }
}


                       0%                      100%
@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { -webkit-transform:translateX(0%); }
}
@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { -webkit-transform:translateX(0%); }
}
@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { -webkit-transform:translateX(0%); }
}


                       0%                      100%
@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { -webkit-transform:translateX(0%); }
}


                       0%                      100%
@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { -webkit-transform:translateX(0%); }
}


                       0%                      100%
mobile.css


@-webkit-keyframes slideout-toleft
{
     from    { -webkit-transform:translateX(0%); }
     to       { -webkit-transform:translateX(-100%); }
}
@-webkit-keyframes slideout-toleft
{
     from    { -webkit-transform:translateX(0%); }
     to       { -webkit-transform:translateX(-100%); }
}


                       0%                       100%
@-webkit-keyframes slideout-toleft
  {
       from    { -webkit-transform:translateX(0%); }
       to       { -webkit-transform:translateX(-100%); }
  }


-100%                    0%                       100%
@-webkit-keyframes slideout-toleft
  {
       from    { -webkit-transform:translateX(0%); }
       to       { -webkit-transform:translateX(-100%); }
  }


-100%                    0%                       100%
@-webkit-keyframes slideout-toleft
  {
       from    { -webkit-transform:translateX(0%); }
       to       { -webkit-transform:translateX(-100%); }
  }


-100%                    0%                       100%
@-webkit-keyframes slideout-toleft                      @-webkit-keyframes slidein-fromright
{                                                       {
      from   { -webkit-transform:translateX(0%); }            from { -webkit-transform:translateX(100%); }
      to     { -webkit-transform:translateX(-100%); }         to    { -webkit-transform:translateX(0%); }
}                                                       }




    -100%                                 0%                    100%
@-webkit-keyframes slideout-toleft                      @-webkit-keyframes slidein-fromright
{                                                       {
      from   { -webkit-transform:translateX(0%); }            from { -webkit-transform:translateX(100%); }
      to     { -webkit-transform:translateX(-100%); }         to    { -webkit-transform:translateX(0%); }
}                                                       }




    -100%                                 0%                    100%
Watch this video
CSS transitions with animation
http://designintellection.com/iphone-css-transitions-with-animation/
Reference
jQTouch
http://www.jqtouch.com/
4
DESKTOP VERSION
Detect desktop
index.php

<!-- Base stylesheet for all devices -->
<link rel="stylesheet" href="_css/base.css" media="handheld, all" />

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

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

<!-- Base stylesheet for all devices -->
<link rel="stylesheet" href="_css/base.css" media="handheld, all" />

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

<!-- Conditional stylesheets for desktop -->
<link rel="stylesheet" href="_css/desktop.css" media="screen and (min-device-width:769px)" /
>
Once Source to Rule Them All
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 */
Once Source to Rule Them All
5
TYPOGRAPHY
Once Source to Rule Them All
Once Source to Rule Them All
@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; }
Once Source to Rule Them All
Once Source to Rule Them All
Reference
Font Squirrel
http://www.fontsquirrel.com/
6
iPad VERSION
Detect iPad
index.php

<!-- Base stylesheet for all devices -->
<link rel="stylesheet" href="_css/base.css" media="handheld, all" />

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

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

<!-- Conditional stylesheets for iPad -->
<link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" />
index.php

<!-- Base stylesheet for all devices -->
<link rel="stylesheet" href="_css/base.css" media="handheld, all" />

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

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

<!-- Conditional stylesheets for iPad -->
<link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" />
Once Source to Rule Them All
Once Source to Rule Them All
index.php

<!-- Base stylesheet for all devices -->
<link rel="stylesheet" href="_css/base.css" media="handheld, all" />

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

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

<!-- Conditional stylesheets for iPad -->
<link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" />
<link rel="stylesheet" href="_css/ipad-portrait.css" media="screen and (device-width:768px)
and (orientation:portrait)" />
<link rel="stylesheet" href="_css/ipad-landscape.css" media="screen and (device-width:768px)
and (orientation:landscape)" />
index.php

<!-- Base stylesheet for all devices -->
<link rel="stylesheet" href="_css/base.css" media="handheld, all" />

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

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

<!-- Conditional stylesheets for iPad -->
<link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" />
<link rel="stylesheet" href="_css/ipad-portrait.css" media="screen and (device-width:768px)
and (orientation:portrait)" />
<link rel="stylesheet" href="_css/ipad-landscape.css" media="screen and (device-width:768px)
and (orientation:landscape)" />
index.php

<!-- Base stylesheet for all devices -->
<link rel="stylesheet" href="_css/base.css" media="handheld, all" />

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

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

<!-- Conditional stylesheets for iPad -->
<link rel="stylesheet" href="_css/mobile.css" media="screen and (device-width:768px)" />
<link rel="stylesheet" href="_css/ipad-portrait.css" media="screen and (device-width:768px)
and (orientation:portrait)" />
<link rel="stylesheet" href="_css/ipad-landscape.css" media="screen and (device-width:768px)
and (orientation:landscape)" />
ipad-portait.css
ipad-portait.css


.panel { min-height:946px; background:url("../_images/typewriter-dark-bg.png") center 260px
no-repeat #333; }
.copy { padding:20px 0; font-size:1em; line-height:1.25em; font-weight:normal; color:#ccc; }
ipad-portait.css


.panel { min-height:946px; background:url("../_images/typewriter-dark-bg.png") center 260px
no-repeat #333; }
.copy { padding:20px 0; font-size:1em; line-height:1.25em; font-weight:normal; color:#ccc; }
ipad-portait.css


.panel { min-height:946px; background:url("../_images/typewriter-dark-bg.png") center 260px
no-repeat #333; }
.copy { padding:20px 0; font-size:1em; line-height:1.25em; font-weight:normal; color:#ccc; }
Before
After
ipad-landscape.css
ipad-landscape.css
body { font-size:62.5%; }

.frame { position:relative; background-color:#333; z-index:7; }
.panel { background-color:transparent; }

.slide-in { -webkit-animation-name:none; }
.slide-out { -webkit-animation-name:none; }
.reverse-in { -webkit-animation-name:none; }
.reverse-out { -webkit-animation-name:none; }

.panel { display:none; width:568px; position:absolute; left:0; background-color:#333; z-
index:1; }
.sub-view { display:none; margin-left:200px; }
.appear { display:block; }
.disappear { display:none; }
.nav-view { display:block; width:200px; margin-left:0; position:absolute; left:0; top:0; }
.back-link { display:none; }

.disclaimer-link { display:none; }
Before
After
7
EMOTIONAL DESIGN
http://designintellection.com/ratecalc/
THANK YOU!



David Yeiser
http://designintellection.com/
@davidyeiser

More Related Content

What's hot (20)

Building iPad apps with Flex - 360Flex
Building iPad apps with Flex - 360FlexBuilding iPad apps with Flex - 360Flex
Building iPad apps with Flex - 360Flex
danielwanja
 
jQuery Mobile and JavaScript
jQuery Mobile and JavaScriptjQuery Mobile and JavaScript
jQuery Mobile and JavaScript
Gary Yeh
 
All you need to know about JavaScript loading and execution in the browser - ...
All you need to know about JavaScript loading and execution in the browser - ...All you need to know about JavaScript loading and execution in the browser - ...
All you need to know about JavaScript loading and execution in the browser - ...
Caelum
 
Semantic accessibility
Semantic accessibilitySemantic accessibility
Semantic accessibility
Ian Stuart
 
AtlasCamp 2010: Understanding the Atlassian Platform - Tim Pettersen
AtlasCamp 2010: Understanding the Atlassian Platform - Tim PettersenAtlasCamp 2010: Understanding the Atlassian Platform - Tim Pettersen
AtlasCamp 2010: Understanding the Atlassian Platform - Tim Pettersen
Atlassian
 
jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5
Todd Anderson
 
Responsive Web Site Design
Responsive Web Site DesignResponsive Web Site Design
Responsive Web Site Design
Jussi Pohjolainen
 
Survey of Front End Topics in Rails
Survey of Front End Topics in RailsSurvey of Front End Topics in Rails
Survey of Front End Topics in Rails
Benjamin Vandgrift
 
Building iPad apps with Flex - 360Flex
Building iPad apps with Flex - 360FlexBuilding iPad apps with Flex - 360Flex
Building iPad apps with Flex - 360Flex
danielwanja
 
jQuery Mobile and JavaScript
jQuery Mobile and JavaScriptjQuery Mobile and JavaScript
jQuery Mobile and JavaScript
Gary Yeh
 
All you need to know about JavaScript loading and execution in the browser - ...
All you need to know about JavaScript loading and execution in the browser - ...All you need to know about JavaScript loading and execution in the browser - ...
All you need to know about JavaScript loading and execution in the browser - ...
Caelum
 
Semantic accessibility
Semantic accessibilitySemantic accessibility
Semantic accessibility
Ian Stuart
 
AtlasCamp 2010: Understanding the Atlassian Platform - Tim Pettersen
AtlasCamp 2010: Understanding the Atlassian Platform - Tim PettersenAtlasCamp 2010: Understanding the Atlassian Platform - Tim Pettersen
AtlasCamp 2010: Understanding the Atlassian Platform - Tim Pettersen
Atlassian
 
jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5
Todd Anderson
 
Survey of Front End Topics in Rails
Survey of Front End Topics in RailsSurvey of Front End Topics in Rails
Survey of Front End Topics in Rails
Benjamin Vandgrift
 

Viewers also liked (20)

민변 유권자를 위한 응급처치 선거법
민변 유권자를 위한 응급처치 선거법민변 유권자를 위한 응급처치 선거법
민변 유권자를 위한 응급처치 선거법
karyui
 
Fluency
FluencyFluency
Fluency
Catherine Flynn
 
Insights
InsightsInsights
Insights
quirky1
 
CASBAA 1030408 @ Taipei
CASBAA 1030408 @ TaipeiCASBAA 1030408 @ Taipei
CASBAA 1030408 @ Taipei
Jessica Chou
 
Michelle Shapiro Portfolio
Michelle Shapiro PortfolioMichelle Shapiro Portfolio
Michelle Shapiro Portfolio
Michelle Shapiro
 
Ndgf Sept 09
Ndgf Sept 09Ndgf Sept 09
Ndgf Sept 09
Thomas Zangerl
 
Twitter and research impact
Twitter and research impactTwitter and research impact
Twitter and research impact
Marie Boran
 
BITTERROOT CONSPIRACY "THE FUND" WFC HOLDINGS Corp dba Wells Fargo & Co/MN -N...
BITTERROOT CONSPIRACY "THE FUND" WFC HOLDINGS Corp dba Wells Fargo & Co/MN -N...BITTERROOT CONSPIRACY "THE FUND" WFC HOLDINGS Corp dba Wells Fargo & Co/MN -N...
BITTERROOT CONSPIRACY "THE FUND" WFC HOLDINGS Corp dba Wells Fargo & Co/MN -N...
Nancy Drewe Alias
 
민변 유권자를 위한 응급처치 선거법
민변 유권자를 위한 응급처치 선거법민변 유권자를 위한 응급처치 선거법
민변 유권자를 위한 응급처치 선거법
karyui
 
Insights
InsightsInsights
Insights
quirky1
 
CASBAA 1030408 @ Taipei
CASBAA 1030408 @ TaipeiCASBAA 1030408 @ Taipei
CASBAA 1030408 @ Taipei
Jessica Chou
 
Michelle Shapiro Portfolio
Michelle Shapiro PortfolioMichelle Shapiro Portfolio
Michelle Shapiro Portfolio
Michelle Shapiro
 
Twitter and research impact
Twitter and research impactTwitter and research impact
Twitter and research impact
Marie Boran
 
BITTERROOT CONSPIRACY "THE FUND" WFC HOLDINGS Corp dba Wells Fargo & Co/MN -N...
BITTERROOT CONSPIRACY "THE FUND" WFC HOLDINGS Corp dba Wells Fargo & Co/MN -N...BITTERROOT CONSPIRACY "THE FUND" WFC HOLDINGS Corp dba Wells Fargo & Co/MN -N...
BITTERROOT CONSPIRACY "THE FUND" WFC HOLDINGS Corp dba Wells Fargo & Co/MN -N...
Nancy Drewe Alias
 

Similar to Once Source to Rule Them All (20)

Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
Joe Seifi
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
Jens-Christian Fischer
 
Xxx
XxxXxx
Xxx
syfwan
 
Cordova training : Day 5 - UI development using Framework7
Cordova training : Day 5 - UI development using Framework7Cordova training : Day 5 - UI development using Framework7
Cordova training : Day 5 - UI development using Framework7
Binu Paul
 
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
Roni Banerjee
 
Introduction to jQuery Mobile
Introduction to jQuery MobileIntroduction to jQuery Mobile
Introduction to jQuery Mobile
ejlp12
 
Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...
Andreas Bovens
 
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Patrick Lauke
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
Joe Seifi
 
Cordova training : Day 5 - UI development using Framework7
Cordova training : Day 5 - UI development using Framework7Cordova training : Day 5 - UI development using Framework7
Cordova training : Day 5 - UI development using Framework7
Binu Paul
 
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
Roni Banerjee
 
Introduction to jQuery Mobile
Introduction to jQuery MobileIntroduction to jQuery Mobile
Introduction to jQuery Mobile
ejlp12
 
Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...
Andreas Bovens
 
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Adapt and respond - mobile-friendly layouts beyond the desktop - standards>ne...
Patrick Lauke
 

Recently uploaded (20)

Aortic aneurysm Arnab choudhary D sir.pdf
Aortic aneurysm Arnab choudhary D sir.pdfAortic aneurysm Arnab choudhary D sir.pdf
Aortic aneurysm Arnab choudhary D sir.pdf
sayanghosh997333
 
Bernoulli's equation by roll no 66.pptxxuxuxuxuuxux
Bernoulli's equation by roll no 66.pptxxuxuxuxuuxuxBernoulli's equation by roll no 66.pptxxuxuxuxuuxux
Bernoulli's equation by roll no 66.pptxxuxuxuxuuxux
rid45110
 
Lec 2. Physical properties of fluids [Autosaved].pptx
Lec 2. Physical properties of fluids [Autosaved].pptxLec 2. Physical properties of fluids [Autosaved].pptx
Lec 2. Physical properties of fluids [Autosaved].pptx
AbdulSaboor36990
 
LABUAN4D EXCLUSIVE SERVER STAR GAMING ASIA NO.1 TERPOPULER DI INDONESIA ! Ra...
LABUAN4D EXCLUSIVE SERVER STAR GAMING ASIA NO.1 TERPOPULER DI INDONESIA !  Ra...LABUAN4D EXCLUSIVE SERVER STAR GAMING ASIA NO.1 TERPOPULER DI INDONESIA !  Ra...
LABUAN4D EXCLUSIVE SERVER STAR GAMING ASIA NO.1 TERPOPULER DI INDONESIA ! Ra...
PESO4D MANJA
 
Driver Easy Pro Crack With Key 2025 Download
Driver Easy Pro Crack With Key 2025 DownloadDriver Easy Pro Crack With Key 2025 Download
Driver Easy Pro Crack With Key 2025 Download
joihsacase
 
Get your own seat to the table, and stay there
Get your own seat to the table, and stay thereGet your own seat to the table, and stay there
Get your own seat to the table, and stay there
ankursardana
 
Intel Deck Request for Proposal (RFP) Graphic Design Portfolio
Intel Deck Request for Proposal (RFP) Graphic Design PortfolioIntel Deck Request for Proposal (RFP) Graphic Design Portfolio
Intel Deck Request for Proposal (RFP) Graphic Design Portfolio
Jessica Northey
 
Templates & Apps in canva website pro.pptx
Templates & Apps in canva website pro.pptxTemplates & Apps in canva website pro.pptx
Templates & Apps in canva website pro.pptx
facultysciencealazha
 
Aortic aneurysm Arnab choudhary D sir.pdf
Aortic aneurysm Arnab choudhary D sir.pdfAortic aneurysm Arnab choudhary D sir.pdf
Aortic aneurysm Arnab choudhary D sir.pdf
sayanghosh997333
 
Bernoulli's equation by roll no 66.pptxxuxuxuxuuxux
Bernoulli's equation by roll no 66.pptxxuxuxuxuuxuxBernoulli's equation by roll no 66.pptxxuxuxuxuuxux
Bernoulli's equation by roll no 66.pptxxuxuxuxuuxux
rid45110
 
Lec 2. Physical properties of fluids [Autosaved].pptx
Lec 2. Physical properties of fluids [Autosaved].pptxLec 2. Physical properties of fluids [Autosaved].pptx
Lec 2. Physical properties of fluids [Autosaved].pptx
AbdulSaboor36990
 
LABUAN4D EXCLUSIVE SERVER STAR GAMING ASIA NO.1 TERPOPULER DI INDONESIA ! Ra...
LABUAN4D EXCLUSIVE SERVER STAR GAMING ASIA NO.1 TERPOPULER DI INDONESIA !  Ra...LABUAN4D EXCLUSIVE SERVER STAR GAMING ASIA NO.1 TERPOPULER DI INDONESIA !  Ra...
LABUAN4D EXCLUSIVE SERVER STAR GAMING ASIA NO.1 TERPOPULER DI INDONESIA ! Ra...
PESO4D MANJA
 
Driver Easy Pro Crack With Key 2025 Download
Driver Easy Pro Crack With Key 2025 DownloadDriver Easy Pro Crack With Key 2025 Download
Driver Easy Pro Crack With Key 2025 Download
joihsacase
 
Get your own seat to the table, and stay there
Get your own seat to the table, and stay thereGet your own seat to the table, and stay there
Get your own seat to the table, and stay there
ankursardana
 
Intel Deck Request for Proposal (RFP) Graphic Design Portfolio
Intel Deck Request for Proposal (RFP) Graphic Design PortfolioIntel Deck Request for Proposal (RFP) Graphic Design Portfolio
Intel Deck Request for Proposal (RFP) Graphic Design Portfolio
Jessica Northey
 
Templates & Apps in canva website pro.pptx
Templates & Apps in canva website pro.pptxTemplates & Apps in canva website pro.pptx
Templates & Apps in canva website pro.pptx
facultysciencealazha
 

Once Source to Rule Them All