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

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