Submit Search
Upload
CSS for iPhones
•
3 likes
•
1,752 views
Patrick Crowley
Follow
Quick guide to optimizing your website for the iPhone
Read less
Read more
Business
Technology
Report
Share
Report
Share
1 of 53
Download now
Download to read offline
Recommended
Youtube Tricks and Tips
Youtube Tricks and Tips
FLBlogCon
Amplify your Podcast Reach on Amazon Alexa
Amplify your Podcast Reach on Amazon Alexa
Doug Devitre
ipad mini 16gb wifi price in pakistan
ipad mini 16gb wifi price in pakistan
anoushalexnder
Ppt template-121
Ppt template-121
Tecpreve Tecpreve
Miguel
Miguel
Javier Buenhombre Catama
Digital Marketing
Digital Marketing
Casper Moller
T Viral Istanbul 21112006
T Viral Istanbul 21112006
Casper Moller
Viral Marketing
Viral Marketing
Casper Moller
Recommended
Youtube Tricks and Tips
Youtube Tricks and Tips
FLBlogCon
Amplify your Podcast Reach on Amazon Alexa
Amplify your Podcast Reach on Amazon Alexa
Doug Devitre
ipad mini 16gb wifi price in pakistan
ipad mini 16gb wifi price in pakistan
anoushalexnder
Ppt template-121
Ppt template-121
Tecpreve Tecpreve
Miguel
Miguel
Javier Buenhombre Catama
Digital Marketing
Digital Marketing
Casper Moller
T Viral Istanbul 21112006
T Viral Istanbul 21112006
Casper Moller
Viral Marketing
Viral Marketing
Casper Moller
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
Maximiliano Firtman
Apple — i pad — compare ipad models
Apple — i pad — compare ipad models
Harrison Weber
Care and Feeding of Healthy Computers
Care and Feeding of Healthy Computers
Lorens Tech Solutions
Its timetostopstalling androidcork
Its timetostopstalling androidcork
Doug Sillars
SEO for the NPO
SEO for the NPO
FirstGiving
Employing Custom Fonts
Employing Custom Fonts
Paul Irish
Netbook 的火狐體驗
Netbook 的火狐體驗
Irvin Chen
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NY
Maximiliano Firtman
Corkgdg video
Corkgdg video
Doug Sillars
Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015
Maximiliano Firtman
Armadajs video
Armadajs video
Doug Sillars
Using Your Mobile Device to Create Amazing Content ATDTK19
Using Your Mobile Device to Create Amazing Content ATDTK19
Nick Floro
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Maximiliano Firtman
Portogdg video
Portogdg video
Doug Sillars
iPhone Web Applications Development - Prabhu
iPhone Web Applications Development - Prabhu
desistartups
Rija js video
Rija js video
Doug Sillars
Doodling for-great-success
Doodling for-great-success
Radamanthus Batnag
Web performance - Analysing Heart.co.uk
Web performance - Analysing Heart.co.uk
gareth53
Skyping awesomeness
Skyping awesomeness
Flora Runyenje
Vilnius py video
Vilnius py video
Doug Sillars
Compass
Compass
Patrick Crowley
Mobile web apps
Mobile web apps
Patrick Crowley
More Related Content
Similar to CSS for iPhones
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
Maximiliano Firtman
Apple — i pad — compare ipad models
Apple — i pad — compare ipad models
Harrison Weber
Care and Feeding of Healthy Computers
Care and Feeding of Healthy Computers
Lorens Tech Solutions
Its timetostopstalling androidcork
Its timetostopstalling androidcork
Doug Sillars
SEO for the NPO
SEO for the NPO
FirstGiving
Employing Custom Fonts
Employing Custom Fonts
Paul Irish
Netbook 的火狐體驗
Netbook 的火狐體驗
Irvin Chen
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NY
Maximiliano Firtman
Corkgdg video
Corkgdg video
Doug Sillars
Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015
Maximiliano Firtman
Armadajs video
Armadajs video
Doug Sillars
Using Your Mobile Device to Create Amazing Content ATDTK19
Using Your Mobile Device to Create Amazing Content ATDTK19
Nick Floro
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Maximiliano Firtman
Portogdg video
Portogdg video
Doug Sillars
iPhone Web Applications Development - Prabhu
iPhone Web Applications Development - Prabhu
desistartups
Rija js video
Rija js video
Doug Sillars
Doodling for-great-success
Doodling for-great-success
Radamanthus Batnag
Web performance - Analysing Heart.co.uk
Web performance - Analysing Heart.co.uk
gareth53
Skyping awesomeness
Skyping awesomeness
Flora Runyenje
Vilnius py video
Vilnius py video
Doug Sillars
Similar to CSS for iPhones
(20)
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
Apple — i pad — compare ipad models
Apple — i pad — compare ipad models
Care and Feeding of Healthy Computers
Care and Feeding of Healthy Computers
Its timetostopstalling androidcork
Its timetostopstalling androidcork
SEO for the NPO
SEO for the NPO
Employing Custom Fonts
Employing Custom Fonts
Netbook 的火狐體驗
Netbook 的火狐體驗
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NY
Corkgdg video
Corkgdg video
Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015
Armadajs video
Armadajs video
Using Your Mobile Device to Create Amazing Content ATDTK19
Using Your Mobile Device to Create Amazing Content ATDTK19
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Portogdg video
Portogdg video
iPhone Web Applications Development - Prabhu
iPhone Web Applications Development - Prabhu
Rija js video
Rija js video
Doodling for-great-success
Doodling for-great-success
Web performance - Analysing Heart.co.uk
Web performance - Analysing Heart.co.uk
Skyping awesomeness
Skyping awesomeness
Vilnius py video
Vilnius py video
More from Patrick Crowley
Compass
Compass
Patrick Crowley
Mobile web apps
Mobile web apps
Patrick Crowley
Trucker
Trucker
Patrick Crowley
Migrating Legacy Data (Ruby Midwest)
Migrating Legacy Data (Ruby Midwest)
Patrick Crowley
Migrating Legacy Data
Migrating Legacy Data
Patrick Crowley
Paperclip
Paperclip
Patrick Crowley
Haml And Sass In 15 Minutes
Haml And Sass In 15 Minutes
Patrick Crowley
Rails For Legacy Apps
Rails For Legacy Apps
Patrick Crowley
Headliner
Headliner
Patrick Crowley
Styler
Styler
Patrick Crowley
More from Patrick Crowley
(10)
Compass
Compass
Mobile web apps
Mobile web apps
Trucker
Trucker
Migrating Legacy Data (Ruby Midwest)
Migrating Legacy Data (Ruby Midwest)
Migrating Legacy Data
Migrating Legacy Data
Paperclip
Paperclip
Haml And Sass In 15 Minutes
Haml And Sass In 15 Minutes
Rails For Legacy Apps
Rails For Legacy Apps
Headliner
Headliner
Styler
Styler
Recently uploaded
8447779800, Low rate Call girls in Uttam Nagar Delhi NCR
8447779800, Low rate Call girls in Uttam Nagar Delhi NCR
ashishs7044
Independent Call Girls Andheri Nightlaila 9967584737
Independent Call Girls Andheri Nightlaila 9967584737
Riya Pathan
BEST Call Girls In Old Faridabad ✨ 9773824855 ✨ Escorts Service In Delhi Ncr,
BEST Call Girls In Old Faridabad ✨ 9773824855 ✨ Escorts Service In Delhi Ncr,
noida100girls
Call Girls In Radisson Blu Hotel New Delhi Paschim Vihar ❤️8860477959 Escorts...
Call Girls In Radisson Blu Hotel New Delhi Paschim Vihar ❤️8860477959 Escorts...
lizamodels9
Lowrate Call Girls In Sector 18 Noida ❤️8860477959 Escorts 100% Genuine Servi...
Lowrate Call Girls In Sector 18 Noida ❤️8860477959 Escorts 100% Genuine Servi...
lizamodels9
Organizational Structure Running A Successful Business
Organizational Structure Running A Successful Business
Seta Wicaksana
Investment in The Coconut Industry by Nancy Cheruiyot
Investment in The Coconut Industry by Nancy Cheruiyot
ictsugar
Buy gmail accounts.pdf Buy Old Gmail Accounts
Buy gmail accounts.pdf Buy Old Gmail Accounts
Buy Verified Accounts
Cybersecurity Awareness Training Presentation v2024.03
Cybersecurity Awareness Training Presentation v2024.03
DallasHaselhorst
Flow Your Strategy at Flight Levels Day 2024
Flow Your Strategy at Flight Levels Day 2024
Kirill Klimov
BEST Call Girls In Greater Noida ✨ 9773824855 ✨ Escorts Service In Delhi Ncr,
BEST Call Girls In Greater Noida ✨ 9773824855 ✨ Escorts Service In Delhi Ncr,
noida100girls
Intro to BCG's Carbon Emissions Benchmark_vF.pdf
Intro to BCG's Carbon Emissions Benchmark_vF.pdf
pollardmorgan
Digital Transformation in the PLM domain - distrib.pdf
Digital Transformation in the PLM domain - distrib.pdf
Jos Voskuil
Contemporary Economic Issues Facing the Filipino Entrepreneur (1).pptx
Contemporary Economic Issues Facing the Filipino Entrepreneur (1).pptx
MarkAnthonyAurellano
Innovation Conference 5th March 2024.pdf
Innovation Conference 5th March 2024.pdf
richard876048
Call Girls In Sikandarpur Gurgaon ❤️8860477959_Russian 100% Genuine Escorts I...
Call Girls In Sikandarpur Gurgaon ❤️8860477959_Russian 100% Genuine Escorts I...
lizamodels9
The CMO Survey - Highlights and Insights Report - Spring 2024
The CMO Survey - Highlights and Insights Report - Spring 2024
christinemoorman
Future Of Sample Report 2024 | Redacted Version
Future Of Sample Report 2024 | Redacted Version
Mintel Group
Pitch Deck Teardown: Geodesic.Life's $500k Pre-seed deck
Pitch Deck Teardown: Geodesic.Life's $500k Pre-seed deck
HajeJanKamps
Annual General Meeting Presentation Slides
Annual General Meeting Presentation Slides
KeppelCorporation
Recently uploaded
(20)
8447779800, Low rate Call girls in Uttam Nagar Delhi NCR
8447779800, Low rate Call girls in Uttam Nagar Delhi NCR
Independent Call Girls Andheri Nightlaila 9967584737
Independent Call Girls Andheri Nightlaila 9967584737
BEST Call Girls In Old Faridabad ✨ 9773824855 ✨ Escorts Service In Delhi Ncr,
BEST Call Girls In Old Faridabad ✨ 9773824855 ✨ Escorts Service In Delhi Ncr,
Call Girls In Radisson Blu Hotel New Delhi Paschim Vihar ❤️8860477959 Escorts...
Call Girls In Radisson Blu Hotel New Delhi Paschim Vihar ❤️8860477959 Escorts...
Lowrate Call Girls In Sector 18 Noida ❤️8860477959 Escorts 100% Genuine Servi...
Lowrate Call Girls In Sector 18 Noida ❤️8860477959 Escorts 100% Genuine Servi...
Organizational Structure Running A Successful Business
Organizational Structure Running A Successful Business
Investment in The Coconut Industry by Nancy Cheruiyot
Investment in The Coconut Industry by Nancy Cheruiyot
Buy gmail accounts.pdf Buy Old Gmail Accounts
Buy gmail accounts.pdf Buy Old Gmail Accounts
Cybersecurity Awareness Training Presentation v2024.03
Cybersecurity Awareness Training Presentation v2024.03
Flow Your Strategy at Flight Levels Day 2024
Flow Your Strategy at Flight Levels Day 2024
BEST Call Girls In Greater Noida ✨ 9773824855 ✨ Escorts Service In Delhi Ncr,
BEST Call Girls In Greater Noida ✨ 9773824855 ✨ Escorts Service In Delhi Ncr,
Intro to BCG's Carbon Emissions Benchmark_vF.pdf
Intro to BCG's Carbon Emissions Benchmark_vF.pdf
Digital Transformation in the PLM domain - distrib.pdf
Digital Transformation in the PLM domain - distrib.pdf
Contemporary Economic Issues Facing the Filipino Entrepreneur (1).pptx
Contemporary Economic Issues Facing the Filipino Entrepreneur (1).pptx
Innovation Conference 5th March 2024.pdf
Innovation Conference 5th March 2024.pdf
Call Girls In Sikandarpur Gurgaon ❤️8860477959_Russian 100% Genuine Escorts I...
Call Girls In Sikandarpur Gurgaon ❤️8860477959_Russian 100% Genuine Escorts I...
The CMO Survey - Highlights and Insights Report - Spring 2024
The CMO Survey - Highlights and Insights Report - Spring 2024
Future Of Sample Report 2024 | Redacted Version
Future Of Sample Report 2024 | Redacted Version
Pitch Deck Teardown: Geodesic.Life's $500k Pre-seed deck
Pitch Deck Teardown: Geodesic.Life's $500k Pre-seed deck
Annual General Meeting Presentation Slides
Annual General Meeting Presentation Slides
CSS for iPhones
1.
Patrick Crowley
2.
CSS for iPhones
3.
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
10.
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
19.
20.
iPhoney http://marketcircle.com/iphoney/
21.
22.
iPhone Simulator
(via iPhone SDK) http://developer.apple.com/iphone/
23.
24.
25.
iPhone
26.
27.
• Connect over
web
28.
• Connect over
web • Connect locally
29.
Step 2: Fix
it!
30.
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
36.
37.
38.
39.
Functional
40.
41.
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...
48.
49.
50.
DEMO
51.
http://developer.apple.com/ webapps/
52.
The End
Download now