CSS for iPhones

4,671 views

Published on

Quick guide to optimizing your website for the iPhone

Published in: Business, Technology
  • Be the first to comment

CSS for iPhones

  1. Patrick Crowley
  2. CSS for iPhones
  3. • 480 pixels x 320 pixels
  4. • 480 pixels x 320 pixels • 163 ppi
  5. • 480 pixels x 320 pixels • 163 ppi • Edge (~150 kbps)
  6. • 480 pixels x 320 pixels • 163 ppi • Edge (~150 kbps) • WiFi (~1.5 mbps)
  7. • 480 pixels x 320 pixels • 163 ppi • Edge (~150 kbps) • WiFi (~1.5 mbps) • 3G is coming July 11!
  8. Web browsing 101
  9. • Mobile Safari
  10. • Mobile Safari • Based on Webkit
  11. • Mobile Safari • Based on Webkit • Safari is also based on Webkit
  12. • Mobile Safari • Based on Webkit • Safari is also based on Webkit • Mobile Safari != Regular Safari
  13. • Mobile Safari • Based on Webkit • Safari is also based on Webkit • Mobile Safari != Regular Safari • iPhone CSS tweaks necessary
  14. So how do we optimize for the iPhone?
  15. Step 1: See what’s wrong
  16. iPhone Firefox Extension
  17. iPhoney http://marketcircle.com/iphoney/
  18. iPhone Simulator (via iPhone SDK) http://developer.apple.com/iphone/
  19. iPhone
  20. • Connect over web
  21. • Connect over web • Connect locally
  22. Step 2: Fix it!
  23. • Two basic approaches
  24. • Two basic approaches • Make it PRETTY
  25. • Two basic approaches • Make it PRETTY • Make it FUNCTIONAL
  26. • Two basic approaches • Make it PRETTY • Make it FUNCTIONAL
  27. Pretty
  28. Functional
  29. How to get started
  30. Step 1: Set viewport width
  31. <meta content=quot;width=850quot; name=quot;viewportquot; />
  32. Step 2: Add iPhone stylesheet
  33. <link href=quot;/stylesheets/iphone.cssquot; media=quot;only screen and (max- device-width: 480px)quot; rel=quot;stylesheetquot; type=quot;text/cssquot; />
  34. Let’s try fixing a site...
  35. DEMO
  36. http://developer.apple.com/ webapps/
  37. The End

×