• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS for iPhones
 

CSS for iPhones

on

  • 5,851 views

Quick guide to optimizing your website for the iPhone

Quick guide to optimizing your website for the iPhone

Statistics

Views

Total Views
5,851
Views on SlideShare
5,666
Embed Views
185

Actions

Likes
3
Downloads
74
Comments
0

12 Embeds 185

http://onwebdev.blogspot.com 131
http://www.slideshare.net 22
http://onwebdev.blogspot.com.au 8
http://onwebdev.blogspot.co.uk 8
http://onwebdev.blogspot.com.es 5
http://onwebdev.blogspot.co.il 3
http://onwebdev.blogspot.com.ar 2
http://onwebdev.blogspot.in 2
http://onwebdev.blogspot.hu 1
http://onwebdev.blogspot.sg 1
http://onwebdev.blogspot.mx 1
http://tumblr.dydric.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS for iPhones CSS for iPhones Presentation Transcript

    • 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
    • iPhoney http://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=quot;width=850quot; name=quot;viewportquot; />
    • Step 2: Add iPhone stylesheet
    • <link href=quot;/stylesheets/iphone.cssquot; media=quot;only screen and (max- device-width: 480px)quot; rel=quot;stylesheetquot; type=quot;text/cssquot; />
    • Let’s try fixing a site...
    • DEMO
    • http://developer.apple.com/ webapps/
    • The End