0
One Source to Rule
Them All.


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


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



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

<html>

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

    <title>Rate Calculator</title>

    <!--
    ...
index.php
<!DOCTYPE html>

<html>

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

    <title>Rate Calculator</title>

    <!--
    ...
index.php
<!DOCTYPE html>

<html>

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

    <title>Rate Calculator</title>

    <!--
    ...
index.php
<!DOCTYPE html>

<html>

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

    <title>Rate Calculator</title>

    <!--
    ...
index.php
<!DOCTYPE html>

<html>

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

    <title>Rate Calculator</title>

    <!--
    ...
index.php
<!DOCTYPE html>

<html>

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

    <title>Rate Calculator</title>

    <!--
    ...
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-rat...
max-width
            min-height
            min-device-width
            max-device-height
Features:   orientation
      ...
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>

    <!--
    ...
index.php
<!DOCTYPE html>

<html>

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

    <title>Rate Calculator</title>

    <!--
    ...
3
HTML5 & CSS3
HTML5 (briefly)
index.php
<div id="site" class="frame">

    <section id="home-view" class="panel current nav-view">
         <header id="...
index.php
<div id="site" class="frame">

    <section id="home-view" class="panel current nav-view">
         <header id="...
index.php
<div id="site" class="frame">

    <section id="home-view" class="panel current nav-view">
         <header id="...
index.php
<div id="site" class="frame">

    <section id="home-view" class="panel current nav-view">
         <header id="...
Reference
Dive Into HTML5
http://diveintohtml5.org/


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

body
{
       font-family:"Helvetica Neue", Helvetica-Neue, Helvetica, Arial, sans-se...
mobile.css
mobile.css
body
{
       overflow:hidden;
       background-color:#333;
       -webkit-text-size-adjust:none;
}

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

.layout {...
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 {...
Title bar
index.php

 <section id="home-view" class="panel current nav-view">
     <header id="home-title" class="identity">
       ...
index.php

 <section id="home-view" class="panel current nav-view">
     <header id="home-title" class="identity">
       ...
mobile.css
.title-bar
{
     display:block;
     width:90%;
     padding:12px 5% 16px 5%;
     font-size:1.125em;
     fon...
Before
After
mobile.css
.title-bar
{
     display:block;
     width:90%;
     padding:12px 5% 16px 5%;
     font-size:1.125em;
     fon...
mobile.css
.title-bar
{
     display:block;
     width:90%;
     padding:12px 5% 16px 5%;
     font-size:1.125em;
     fon...
background-image:
-webkit-gradient(
linear,
0% 0%,
0% 100%,
from(#216c88),
color-stop
(0.5,#216c88),
color-stop
(0.5,#1962...
background-image:
-webkit-gradient(
linear,
0% 0%,
0% 100%,
from(#216c88),
color-stop
(0.5,#216c88),
color-stop
(0.5,#1962...
background-image:
-webkit-gradient(
linear,
0% 0%,
0% 100%,
from(#216c88),
color-stop
(0.5,#216c88),
color-stop
(0.5,#1962...
background-image:
-webkit-gradient(
linear,
0% 0%,
0% 100%,
from(#216c88),
color-stop
(0.5,#216c88),
color-stop
(0.5,#1962...
background-image:
-webkit-gradient(
linear,
0% 0%,
0% 100%,
from(#216c88),
color-stop
(0.5,#216c88),
color-stop
(0.5,#1962...
background-image:
-webkit-gradient(
linear,
0% 0%,
0% 100%,
from(#216c88),
color-stop
(0.5,#216c88),
color-stop
(0.5,#1962...
Reference
CSS3
Object Oriented CSS
(Very briefly)
mobile.css
.title-bar
{
     display:block;
     width:90%;
     padding:12px 5% 16px 5%;
     font-size:1.125em;
     fon...
mobile.css
.title-bar
{
     display:block;
     width:90%;
     padding:12px 5% 16px 5%;
     font-size:1.125em;
     fon...
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...
index.php

         <nav id="main-nav" class="app-nav layout">
              <ul>
                   <li><a class="app-nav...
mobile.css

.app-nav-item
{
     display:block;
     width:90%;
     padding:8px 5% 10px 5%;
     font-size:1.5em;
     fo...
Before
After
After
index.php


         <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms-
conditions">Terms <em ...
mobile.css
.disclaimer-link
{
   display:block;
   width:100%;
   padding:10px 0;
   position:absolute;
   left:0;
   bott...
Select specifics...
index.php

         <nav id="main-nav" class="app-nav layout">
              <ul>
                   <li><a class="app-nav...
mobile.css

.app-nav li:first-child .app-nav-item
{
     -webkit-border-top-right-radius:10px;
     -webkit-border-top-lef...
mobile.css

.app-nav li:first-child .app-nav-item
{
     -webkit-border-top-right-radius:10px;
     -webkit-border-top-lef...
mobile.css

.app-nav li:first-child .app-nav-item
{
     -webkit-border-top-right-radius:10px;
     -webkit-border-top-lef...
mobile.css

.app-nav li:first-child .app-nav-item
{
     -webkit-border-top-right-radius:10px;
     -webkit-border-top-lef...
mobile.css

.app-nav li:first-child .app-nav-item
{
     -webkit-border-top-right-radius:10px;
     -webkit-border-top-lef...
Before
After
Hover
(or lack thereof)
mobile.css


.tap-change:hover, .tap-change:active
{
     background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#...
More markup
index.php
<section id="bills" class="panel sub-view appear">
     <header>
          <h1 class="title-bar text-emboss">Bil...
index.php
<section id="bills" class="panel sub-view appear">
     <header>
          <h1 class="title-bar text-emboss">Bil...
index.php
<section id="bills" class="panel sub-view appear">
     <header>
          <h1 class="title-bar text-emboss">Bil...
index.php
<section id="bills" class="panel sub-view appear">
     <header>
          <h1 class="title-bar text-emboss">Bil...
index.php
<section id="bills" class="panel sub-view appear">
     <header>
          <h1 class="title-bar text-emboss">Bil...
index.php
<section id="bills" class="panel sub-view appear">
     <header>
          <h1 class="title-bar text-emboss">Bil...
mobile.css
.hidden { display:none; }
.panel { display:none; width:100%; min-height:460px; position:absolute; left:0; backg...
mobile.css
.hidden { display:none; }
.panel { display:none; width:100%; min-height:460px; position:absolute; left:0; backg...
Result
Result
index.php

     <header>
          <h1 class="title-bar text-emboss">Bills</h1>
          <a class="ui-link back-link reve...
index.php

     <header>
          <h1 class="title-bar text-emboss">Bills</h1>
          <a class="ui-link back-link reve...
mobile.css
.ui-link
{
     padding:5px 10px 8px 10px;
     font-size:0.75em;
     font-weight:bold;
     line-height:1em;
...
mobile.css
.ui-link
{
     padding:5px 10px 8px 10px;
     font-size:0.75em;
     font-weight:bold;
     line-height:1em;
...
Before
After
<input
class="amount-value
text-emboss"
id="rent-amount"
type="number" />
jQuery
index.php


<!-- jQuery and jQuery UI -->
<script src="_js/jquery-1.4.2.min.js"></script>
<script src="_js/jquery-ui-1.8.c...
Rudimentary...
(A.K.A. I’m not a
jQuery expert)
index.php
<script>
     $(document).ready(function() {
          $("#main-nav ul li a").click(
               function() {...
index.php
<script>
     $(document).ready(function() {

            ...

            $("#read-terms-conditions").click(
  ...
CSS & z-index
mobile.css

.slide-in { display:block; z-index:10; }
.slide-out { display:block; z-index:5; }
.reverse-in { display:block;...
mobile.css

.slide-in { display:block; z-index:10; }
.slide-out { display:block; z-index:5; }
.reverse-in { display:block;...
.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:...
Watch this video
CSS transitions with no animation
http://designintellection.com/iphone-css-transitions-with-no-animation/
Last but not least...
Animation
.current
 .current
{{
z-index:7;
 z-index:7;
}}
mobile.css

.animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:
350ms; }
.slide-in { dis...
mobile.css

.animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:
350ms; }
.slide-in { dis...
mobile.css

.animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:
350ms; }
.slide-in { dis...
.panel
   {
   z-index:1;
.current
 .current        .panel(s)
   }
{{               {
z-index:7;
 z-index:7;      z-index:...
mobile.css

.animate { -webkit-animation-timing-function:ease-in-out; -webkit-animation-duration:
350ms; }
.slide-in { dis...
mobile.css


@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { ...
@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { -webkit-trans...
@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { -webkit-trans...
@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { -webkit-trans...
@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { -webkit-trans...
@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { -webkit-trans...
@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { -webkit-trans...
@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { -webkit-trans...
@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { -webkit-trans...
@-webkit-keyframes slidein-fromright
{
     from     { -webkit-transform:translateX(100%); }
     to       { -webkit-trans...
mobile.css


@-webkit-keyframes slideout-toleft
{
     from    { -webkit-transform:translateX(0%); }
     to       { -webk...
@-webkit-keyframes slideout-toleft
{
     from    { -webkit-transform:translateX(0%); }
     to       { -webkit-transform:...
@-webkit-keyframes slideout-toleft
  {
       from    { -webkit-transform:translateX(0%); }
       to       { -webkit-tran...
@-webkit-keyframes slideout-toleft
  {
       from    { -webkit-transform:translateX(0%); }
       to       { -webkit-tran...
@-webkit-keyframes slideout-toleft
  {
       from    { -webkit-transform:translateX(0%); }
       to       { -webkit-tran...
@-webkit-keyframes slideout-toleft                      @-webkit-keyframes slidein-fromright
{                            ...
@-webkit-keyframes slideout-toleft                      @-webkit-keyframes slidein-fromright
{                            ...
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" />

...
index.php

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

...
index.php

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

...
desktop.css


/* LOTS O’ STUFF */
5
TYPOGRAPHY
@font-face
desktop.css

@font-face
{
     font-family:'LeagueGothicRegular';
     src: url('League_Gothic.eot');
     src: local('Lea...
desktop.css

@font-face
{
     font-family:'LeagueGothicRegular';
     src: url('League_Gothic.eot');
     src: local('Lea...
desktop.css

@font-face
{
     font-family:'LeagueGothicRegular';
     src: url('League_Gothic.eot');
     src: local('Lea...
desktop.css

@font-face
{
     font-family:'LeagueGothicRegular';
     src: url('League_Gothic.eot');
     src: local('Lea...
desktop.css

@font-face
{
     font-family:'LeagueGothicRegular';
     src: url('League_Gothic.eot');
     src: local('Lea...
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" />

...
index.php

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

...
index.php

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

...
index.php

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

...
index.php

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

...
ipad-portait.css
ipad-portait.css


.panel { min-height:946px; background:url("../_images/typewriter-dark-bg.png") center 260px
no-repeat #...
ipad-portait.css


.panel { min-height:946px; background:url("../_images/typewriter-dark-bg.png") center 260px
no-repeat #...
ipad-portait.css


.panel { min-height:946px; background:url("../_images/typewriter-dark-bg.png") center 260px
no-repeat #...
Before
After
ipad-landscape.css
ipad-landscape.css
body { font-size:62.5%; }

.frame { position:relative; background-color:#333; z-index:7; }
.panel { bac...
Before
After
7
EMOTIONAL DESIGN
http://designintellection.com/ratecalc/
THANK YOU!



David Yeiser
http://designintellection.com/
@davidyeiser
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
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
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
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
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
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
Once Source to Rule Them All
Upcoming SlideShare
Loading in...5
×

Once Source to Rule Them All

6,420

Published on

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

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

Published in: Design
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,420
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
84
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Transcript of "Once Source to Rule Them All"

  1. 1. One Source to Rule Them All. R EF RES H LO UIS VILLE April 20, 2010
  2. 2. OR How to use media queries to optimize the same markup for different devices and features.
  3. 3. Reference The League of Moveable Type http://www.theleagueofmoveabletype.com/
  4. 4. 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
  5. 5. Let’s build an app. E VE RY W EB D ES IG NE R ’ S A N SW E R
  6. 6. 1 Build for mobile first.
  7. 7. SKETCH
  8. 8. Start building...
  9. 9. 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>
  10. 10. 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>
  11. 11. 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>
  12. 12. 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>
  13. 13. 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>
  14. 14. 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>
  15. 15. Reference Rate Calculator http://designintellection.com/ratecalc/
  16. 16. 2 Media queries = neat.
  17. 17. Media: Types & Features
  18. 18. all Types: screen print handheld projection speech 3d-glasses
  19. 19. all Types: screen print handheld projection speech 3d-glasses
  20. 20. width height device-width device-height Features: orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid
  21. 21. max-width min-height min-device-width max-device-height Features: orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid
  22. 22. Reference Media Queries http://www.w3.org/TR/css3-mediaqueries/
  23. 23. Detect mobile
  24. 24. 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>
  25. 25. 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>
  26. 26. 3 HTML5 & CSS3
  27. 27. HTML5 (briefly)
  28. 28. 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>
  29. 29. 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>
  30. 30. 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>
  31. 31. 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>
  32. 32. Reference Dive Into HTML5 http://diveintohtml5.org/ HTML5 For Web Designers http://books.alistapart.com/product/html5-for-web-designers
  33. 33. CSS
  34. 34. base.css
  35. 35. 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%; }
  36. 36. mobile.css
  37. 37. 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; }
  38. 38. 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; }
  39. 39. Reference Safari Reference Library http://developer.apple.com/safari/library/navigation/index.html
  40. 40. 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; }
  41. 41. Title bar
  42. 42. 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>
  43. 43. 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>
  44. 44. 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; }
  45. 45. Before
  46. 46. After
  47. 47. 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; }
  48. 48. 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; }
  49. 49. background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop (0.5,#19627d), to(#19627d));
  50. 50. background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop (0.5,#19627d), to(#19627d));
  51. 51. background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop (0.5,#19627d), to(#19627d));
  52. 52. background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop (0.5,#19627d), to(#19627d));
  53. 53. background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop (0.5,#19627d), to(#19627d));
  54. 54. background-image: -webkit-gradient( linear, 0% 0%, 0% 100%, from(#216c88), color-stop (0.5,#216c88), color-stop (0.5,#19627d), to(#19627d));
  55. 55. Reference CSS3
  56. 56. Object Oriented CSS (Very briefly)
  57. 57. 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; }
  58. 58. 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); }
  59. 59. Reference Object Oriented CSS http://wiki.github.com/stubbornella/oocss/
  60. 60. The Navigation
  61. 61. 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>
  62. 62. 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>
  63. 63. 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; }
  64. 64. Before
  65. 65. After
  66. 66. After
  67. 67. index.php <a id="read-terms-conditions" class="disclaimer-link tap-change" href="#terms- conditions">Terms <em class="amp">&amp;</em> Conditions</a>
  68. 68. 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; }
  69. 69. Select specifics...
  70. 70. 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>
  71. 71. 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; }
  72. 72. 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; }
  73. 73. 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; }
  74. 74. 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; }
  75. 75. 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; }
  76. 76. Before
  77. 77. After
  78. 78. Hover (or lack thereof)
  79. 79. mobile.css .tap-change:hover, .tap-change:active { background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#568821), to(#568821)); }
  80. 80. More markup
  81. 81. 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>
  82. 82. 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>
  83. 83. 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>
  84. 84. 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>
  85. 85. 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>
  86. 86. 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>
  87. 87. 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; }
  88. 88. 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; }
  89. 89. Result
  90. 90. Result
  91. 91. 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>
  92. 92. 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>
  93. 93. 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; }
  94. 94. 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; }
  95. 95. Before
  96. 96. After
  97. 97. <input class="amount-value text-emboss" id="rent-amount" type="number" />
  98. 98. jQuery
  99. 99. 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>
  100. 100. Rudimentary... (A.K.A. I’m not a jQuery expert)
  101. 101. 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>
  102. 102. 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>
  103. 103. CSS & z-index
  104. 104. 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; }
  105. 105. 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; }
  106. 106. .current { z-index:7; }
  107. 107. .current { z-index:7; }
  108. 108. .current { z-index:7; }
  109. 109. .current { z-index:7; }
  110. 110. .current .panel(s) { { z-index:7; z-index:1; } }
  111. 111. .panel(s) { z-index:1; }
  112. 112. .panel(s) { z-index:1; }
  113. 113. .panel { z-index:1; .current .current .panel(s) } {{ { z-index:7; z-index:7; z-index:1; .slide-in }} } { z-index:10; }
  114. 114. Watch this video CSS transitions with no animation http://designintellection.com/iphone-css-transitions-with-no-animation/
  115. 115. Last but not least...
  116. 116. Animation
  117. 117. .current .current {{ z-index:7; z-index:7; }}
  118. 118. 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; }
  119. 119. 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; }
  120. 120. 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; }
  121. 121. .panel { z-index:1; .current .current .panel(s) } {{ { z-index:7; z-index:7; z-index:1; .slide-in }} } { z-index:10; }
  122. 122. 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; }
  123. 123. mobile.css @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } }
  124. 124. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } }
  125. 125. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } }
  126. 126. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } } 0%
  127. 127. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } } 0% 100%
  128. 128. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } }
  129. 129. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } }
  130. 130. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } } 0% 100%
  131. 131. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } } 0% 100%
  132. 132. @-webkit-keyframes slidein-fromright { from { -webkit-transform:translateX(100%); } to { -webkit-transform:translateX(0%); } } 0% 100%
  133. 133. mobile.css @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); } }
  134. 134. @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); } } 0% 100%
  135. 135. @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); } } -100% 0% 100%
  136. 136. @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); } } -100% 0% 100%
  137. 137. @-webkit-keyframes slideout-toleft { from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); } } -100% 0% 100%
  138. 138. @-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%
  139. 139. @-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%
  140. 140. Watch this video CSS transitions with animation http://designintellection.com/iphone-css-transitions-with-animation/
  141. 141. Reference jQTouch http://www.jqtouch.com/
  142. 142. 4 DESKTOP VERSION
  143. 143. Detect desktop
  144. 144. 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)" / >
  145. 145. 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)" / >
  146. 146. 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)" / >
  147. 147. desktop.css /* LOTS O’ STUFF */
  148. 148. 5 TYPOGRAPHY
  149. 149. @font-face
  150. 150. 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'); }
  151. 151. 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'); }
  152. 152. 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'); }
  153. 153. 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'); }
  154. 154. 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; }
  155. 155. Reference Font Squirrel http://www.fontsquirrel.com/
  156. 156. 6 iPad VERSION
  157. 157. Detect iPad
  158. 158. 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)" />
  159. 159. 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)" />
  160. 160. 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)" />
  161. 161. 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)" />
  162. 162. 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)" />
  163. 163. ipad-portait.css
  164. 164. 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; }
  165. 165. 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; }
  166. 166. 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; }
  167. 167. Before
  168. 168. After
  169. 169. ipad-landscape.css
  170. 170. 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; }
  171. 171. Before
  172. 172. After
  173. 173. 7 EMOTIONAL DESIGN
  174. 174. http://designintellection.com/ratecalc/
  175. 175. THANK YOU! David Yeiser http://designintellection.com/ @davidyeiser
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×