Upload
patrick-crowley
View
3.755
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Quick guide to optimizing your website for the iPhone
Citation preview
Patrick Crowley
CSS for iPhones
• 480 pixels x 320 pixels
• 480 pixels x 320 pixels
• 163 ppi
• 480 pixels x 320 pixels
• 163 ppi
• Edge (~150 kbps)
• 480 pixels x 320 pixels
• 163 ppi
• Edge (~150 kbps)
• WiFi (~1.5 mbps)
• 480 pixels x 320 pixels
• 163 ppi
• Edge (~150 kbps)
• WiFi (~1.5 mbps)
• 3G is coming July 11!
Web browsing 101
• Mobile Safari
• Mobile Safari
• Based on Webkit
• Mobile Safari
• Based on Webkit
• Safari is also based on Webkit
• Mobile Safari
• Based on Webkit
• Safari is also based on Webkit
• Mobile Safari != Regular Safari
• Mobile Safari
• Based on Webkit
• Safari is also based on Webkit
• Mobile Safari != Regular Safari
• iPhone CSS tweaks necessary
So how do we optimize for the iPhone?
Step 1: See what’s wrong
iPhone Firefox Extension
iPhoneyhttp://marketcircle.com/iphoney/
iPhone Simulator(via iPhone SDK)
http://developer.apple.com/iphone/
iPhone
• Connect over web
• Connect over web
• Connect locally
Step 2: Fix it!
• Two basic approaches
• Two basic approaches
• Make it PRETTY
• Two basic approaches
• Make it PRETTY
• Make it FUNCTIONAL
• Two basic approaches
• Make it PRETTY
• Make it FUNCTIONAL
Pretty
Functional
How to get started
Step 1: Set viewport width
<meta content="width=850" name="viewport" />
Step 2: Add iPhone stylesheet
<link href="/stylesheets/iphone.css"media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" />
Let’s try fixing a site...
DEMO
http://developer.apple.com/webapps/
The End