Quick guide to optimizing your website for the iPhone

1. Patrick Crowley

2. CSS for iPhones

4. • 480 pixels x 320 pixels

5. • 480 pixels x 320 pixels
• 163 ppi

6. • 480 pixels x 320 pixels
• 163 ppi
• Edge (~150 kbps)

7. • 480 pixels x 320 pixels
• 163 ppi
• Edge (~150 kbps)
• WiFi (~1.5 mbps)

8. • 480 pixels x 320 pixels
• 163 ppi
• Edge (~150 kbps)
• WiFi (~1.5 mbps)
• 3G is coming July 11!

9. Web browsing 101

11. • Mobile Safari

12. • Mobile Safari
• Based on Webkit

13. • Mobile Safari
• Based on Webkit
• Safari is also based on Webkit

14. • Mobile Safari
• Based on Webkit
• Safari is also based on Webkit
• Mobile Safari != Regular Safari

15. • Mobile Safari
• Based on Webkit
• Safari is also based on Webkit
• Mobile Safari != Regular Safari
• iPhone CSS tweaks necessary

16. So how do we optimize
for the iPhone?

17. Step 1: See what’s wrong

18. iPhone Firefox Extension

20. iPhoney
http://marketcircle.com/iphoney/

22. iPhone Simulator
(via iPhone SDK)
http://developer.apple.com/iphone/

25. iPhone

27. • Connect over web

28. • Connect over web
• Connect locally

29. Step 2: Fix it!

31. • Two basic approaches

32. • Two basic approaches
• Make it PRETTY

33. • Two basic approaches
• Make it PRETTY
• Make it FUNCTIONAL

34. • Two basic approaches
• Make it PRETTY
• Make it FUNCTIONAL

35. Pretty

39. Functional

42. How to get started

43. Step 1:
Set viewport width

44. <meta content=quot;width=850quot;
name=quot;viewportquot; />

45. Step 2:
Add iPhone stylesheet

46. <link
href=quot;/stylesheets/iphone.cssquot;
media=quot;only screen and (max-
device-width: 480px)quot;
rel=quot;stylesheetquot;
type=quot;text/cssquot; />

47. Let’s try fixing a site...

50. DEMO

51. http://developer.apple.com/
webapps/

52. The End