Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
MAKING YOUR SITE IPHONE-FRIENDLY
             Dori Smith
What I mean by iPhone-friendly




❖   You don’t have to double-tap just to read it
❖   Everything you want to do, you can...
Who are you?


❖   HTML — yes
❖   CSS — mostly
❖   JavaScript — maybe
Who are you?



Someone who doesn’t want to maintain an entire
           duplicate mobile site
iPhone-friendly & iPhone-savvy



❖   Friendly
    ❖   You can accomplish your goal
❖   Savvy
    ❖   You can accomplish y...
Why make your site
    work with the iPhone?


❖   A big market
❖   Getting bigger all the time
Who’s the Market?
          Oceania

Western Europe

  North America

   Latin America

 Eastern Europe

               As...
Starting off

❖   You have a site
    ❖   Content
    ❖   Menu
    ❖   Header
    ❖   Footer
Starting off


❖   You have a site
    ❖   Fixed width or fluid?
    ❖   Side or top navigation?
Starting off


❖   You have a site
    ❖   Fixed width or fluid
    ❖   Side or top navigation?
Starting off


❖   You have a site
    ❖   Fixed width or fluid
    ❖   Side or top navigation
How the world sees the iPhone

❖   Portrait
    ❖   320 px wide by 356 px high
    ❖   320 px wide by 140 px high with key...
How the iPhone sees the world




          The “Viewport”
The Viewport


❖   Default is 980 px wide
❖   You need to say how wide your site actually is
    ❖   Via HTML’s “<meta>” t...
The Viewport
❖   Apple says

    <meta name = "viewport"
    content = "width = device-width" />
❖   Another approach

   ...
Custom CSS

❖   One magic line of HTML

    <link rel="stylesheet"
    href="iphone.css" type="text/css"
    media="only s...
Custom CSS


#container {

  font-size: .8em;

  width: 100%;
}
Custom CSS



#navbar {

  font-weight: normal;
}
Custom CSS


h1, h2, h3, h4, h5, h6 {

   font-family: Georgia, "Times New Roman",
serif;
}
Custom JavaScript

addEventListener(

    'load',

    function() {

    
 setTimeout(scrollTo, 0, 0, 1);
   
 },

    fal...
Custom JavaScript
addEventListener(

  'orientationchange',

  function() {

     var classVal = (Math.abs
       (window....
Custom CSS

.landscape {

   font-size: .5em;
}



.portrait {

   font-size: .8em;
}
iPhone-savvy


❖   Smarter forms
❖   Smarter graphics
❖   Smarter responses
Data Entry
Text       <input type="text" />

Telephone <input type="tel" />

URL        <input type="url" />

Email      <...
An Icon of Your Own

❖   Create a square graphic
    ❖   No need to be fancy
❖   Name it apple-touch-icon.png
❖   Put it i...
Getting Out in the
            World
mailto            Launches Mail

tel               Calls a phone number

sms         ...
Examples

<p>Call us: <a href="tel:
1-707-555-1212">1-707-555-1212</a></
p>

<p>Visit us: <a href="http://maps.google.com/...
Going Forward

❖   CSS 3
    ❖   Gradients
    ❖   Animations
❖   HTML 5
    ❖   Video, and more...
Tell Me Your Tips
Upcoming SlideShare
Loading in …5
×

Making Your Site iPhone Friendly

5,348 views

Published on

How to make iPhone-friendly Web sites, as given at Macworld Expo on February 13, 2010. The accompanying examples are at http://www.dori.com/mw10/.

Published in: Technology
  • Be the first to comment

Making Your Site iPhone Friendly

  1. 1. MAKING YOUR SITE IPHONE-FRIENDLY Dori Smith
  2. 2. What I mean by iPhone-friendly ❖ You don’t have to double-tap just to read it ❖ Everything you want to do, you can do
  3. 3. Who are you? ❖ HTML — yes ❖ CSS — mostly ❖ JavaScript — maybe
  4. 4. Who are you? Someone who doesn’t want to maintain an entire duplicate mobile site
  5. 5. iPhone-friendly & iPhone-savvy ❖ Friendly ❖ You can accomplish your goal ❖ Savvy ❖ You can accomplish your goal, intuitively
  6. 6. Why make your site work with the iPhone? ❖ A big market ❖ Getting bigger all the time
  7. 7. Who’s the Market? Oceania Western Europe North America Latin America Eastern Europe Asia Africa 20 40 60 80 100 iPhone Android Palm Pre Smartphone OS Share by region based on ad requests, December 2009 — metrics.admob.com
  8. 8. Starting off ❖ You have a site ❖ Content ❖ Menu ❖ Header ❖ Footer
  9. 9. Starting off ❖ You have a site ❖ Fixed width or fluid? ❖ Side or top navigation?
  10. 10. Starting off ❖ You have a site ❖ Fixed width or fluid ❖ Side or top navigation?
  11. 11. Starting off ❖ You have a site ❖ Fixed width or fluid ❖ Side or top navigation
  12. 12. How the world sees the iPhone ❖ Portrait ❖ 320 px wide by 356 px high ❖ 320 px wide by 140 px high with keyboard ❖ Landscape ❖ 480 px wide by 208 px high ❖ 480 px wide by 46 px high with keyboard
  13. 13. How the iPhone sees the world The “Viewport”
  14. 14. The Viewport ❖ Default is 980 px wide ❖ You need to say how wide your site actually is ❖ Via HTML’s “<meta>” tag
  15. 15. The Viewport ❖ Apple says <meta name = "viewport" content = "width = device-width" /> ❖ Another approach <meta name = "viewport" content = "width = 560" /> ❖ Just play with it
  16. 16. Custom CSS ❖ One magic line of HTML <link rel="stylesheet" href="iphone.css" type="text/css" media="only screen and (max-device-width:480px)" /> ❖ Then add your styles to the custom CSS file
  17. 17. Custom CSS #container { font-size: .8em; width: 100%; }
  18. 18. Custom CSS #navbar { font-weight: normal; }
  19. 19. Custom CSS h1, h2, h3, h4, h5, h6 { font-family: Georgia, "Times New Roman", serif; }
  20. 20. Custom JavaScript addEventListener( 'load', function() { setTimeout(scrollTo, 0, 0, 1);     }, false );
  21. 21. Custom JavaScript addEventListener( 'orientationchange', function() { var classVal = (Math.abs (window.orientation)==90) ? "landscape" : "portrait"; document.getElementById("container"). setAttribute("class", classVal); setTimeout(scrollTo, 0, 0, 1); }, false );
  22. 22. Custom CSS .landscape { font-size: .5em; } .portrait { font-size: .8em; }
  23. 23. iPhone-savvy ❖ Smarter forms ❖ Smarter graphics ❖ Smarter responses
  24. 24. Data Entry Text <input type="text" /> Telephone <input type="tel" /> URL <input type="url" /> Email <input type="email" /> <input type="text" Zip Code pattern="[0-9]*" />
  25. 25. An Icon of Your Own ❖ Create a square graphic ❖ No need to be fancy ❖ Name it apple-touch-icon.png ❖ Put it in your root directory
  26. 26. Getting Out in the World mailto Launches Mail tel Calls a phone number sms Launches Messages maps.google.com Launches Google maps www.youtube.com Launches YouTube
  27. 27. Examples <p>Call us: <a href="tel: 1-707-555-1212">1-707-555-1212</a></ p> <p>Visit us: <a href="http://maps.google.com/ maps?ll=38.61,-122.87&z=16">Find us on the map</a></p>
  28. 28. Going Forward ❖ CSS 3 ❖ Gradients ❖ Animations ❖ HTML 5 ❖ Video, and more...
  29. 29. Tell Me Your Tips

×