Your SlideShare is downloading. ×
Making Your Site iPhone Friendly
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Making Your Site iPhone Friendly

4,488
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/.

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

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,488
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 1. MAKING YOUR SITE IPHONE-FRIENDLY Dori Smith
    • 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. Who are you? ❖ HTML — yes ❖ CSS — mostly ❖ JavaScript — maybe
    • 4. Who are you? Someone who doesn’t want to maintain an entire duplicate mobile site
    • 5. iPhone-friendly & iPhone-savvy ❖ Friendly ❖ You can accomplish your goal ❖ Savvy ❖ You can accomplish your goal, intuitively
    • 6. Why make your site work with the iPhone? ❖ A big market ❖ Getting bigger all the time
    • 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. Starting off ❖ You have a site ❖ Content ❖ Menu ❖ Header ❖ Footer
    • 9. Starting off ❖ You have a site ❖ Fixed width or fluid? ❖ Side or top navigation?
    • 10. Starting off ❖ You have a site ❖ Fixed width or fluid ❖ Side or top navigation?
    • 11. Starting off ❖ You have a site ❖ Fixed width or fluid ❖ Side or top navigation
    • 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. How the iPhone sees the world The “Viewport”
    • 14. The Viewport ❖ Default is 980 px wide ❖ You need to say how wide your site actually is ❖ Via HTML’s “<meta>” tag
    • 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. 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. Custom CSS #container { font-size: .8em; width: 100%; }
    • 18. Custom CSS #navbar { font-weight: normal; }
    • 19. Custom CSS h1, h2, h3, h4, h5, h6 { font-family: Georgia, "Times New Roman", serif; }
    • 20. Custom JavaScript addEventListener( 'load', function() { setTimeout(scrollTo, 0, 0, 1);     }, false );
    • 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. Custom CSS .landscape { font-size: .5em; } .portrait { font-size: .8em; }
    • 23. iPhone-savvy ❖ Smarter forms ❖ Smarter graphics ❖ Smarter responses
    • 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. 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. 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. 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. Going Forward ❖ CSS 3 ❖ Gradients ❖ Animations ❖ HTML 5 ❖ Video, and more...
    • 29. Tell Me Your Tips