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
Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...
Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...
ssuserf63bd7
Driving Business Impact for PMs with Jon Harmer
Driving Business Impact for PMs with Jon Harmer
Aggregage
WSMM Technology February.March Newsletter_vF.pdf
WSMM Technology February.March Newsletter_vF.pdf
JamesConcepcion7
Fordham -How effective decision-making is within the IT department - Analysis...
Fordham -How effective decision-making is within the IT department - Analysis...
Peter Ward
Pitch Deck Teardown: Xpanceo's $40M Seed deck
Pitch Deck Teardown: Xpanceo's $40M Seed deck
HajeJanKamps
Excvation Safety for safety officers reference
Excvation Safety for safety officers reference
ssuser2c065e
Entrepreneurship lessons in Philippines
Entrepreneurship lessons in Philippines
DavidSamuel525586
Unveiling the Soundscape Music for Psychedelic Experiences
Unveiling the Soundscape Music for Psychedelic Experiences
Doe Paoro
business environment micro environment macro environment.pptx
business environment micro environment macro environment.pptx
Shruti Mittal
20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdf
20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdf
Chris Skinner
PSCC - Capability Statement Presentation
PSCC - Capability Statement Presentation
Anamaria Contreras
Supercharge Your eCommerce Stores-acowebs
Supercharge Your eCommerce Stores-acowebs
GOKUL JS
Welding Electrode Making Machine By Deccan Dynamics
Welding Electrode Making Machine By Deccan Dynamics
IndiaMART InterMESH Limited
Church Building Grants To Assist With New Construction, Additions, And Restor...
Church Building Grants To Assist With New Construction, Additions, And Restor...
Americas Got Grants
Effective Strategies for Maximizing Your Profit When Selling Gold Jewelry
Effective Strategies for Maximizing Your Profit When Selling Gold Jewelry
WhittensFineJewelry1
Guide Complete Set of Residential Architectural Drawings PDF
Guide Complete Set of Residential Architectural Drawings PDF
Chandresh Chudasama
The-Ethical-issues-ghhhhhhhhjof-Byjus.pptx
The-Ethical-issues-ghhhhhhhhjof-Byjus.pptx
mbikashkanyari
20200128 Ethical by Design - Whitepaper.pdf
20200128 Ethical by Design - Whitepaper.pdf
Chris Skinner
Onemonitar Android Spy App Features: Explore Advanced Monitoring Capabilities
Onemonitar Android Spy App Features: Explore Advanced Monitoring Capabilities
One Monitar
APRIL2024_UKRAINE_xml_0000000000000 .pdf
APRIL2024_UKRAINE_xml_0000000000000 .pdf
Rbc Rbcua
Recently uploaded
(20)
Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...
Horngren’s Financial & Managerial Accounting, 7th edition by Miller-Nobles so...
Driving Business Impact for PMs with Jon Harmer
Driving Business Impact for PMs with Jon Harmer
WSMM Technology February.March Newsletter_vF.pdf
WSMM Technology February.March Newsletter_vF.pdf
Fordham -How effective decision-making is within the IT department - Analysis...
Fordham -How effective decision-making is within the IT department - Analysis...
Pitch Deck Teardown: Xpanceo's $40M Seed deck
Pitch Deck Teardown: Xpanceo's $40M Seed deck
Excvation Safety for safety officers reference
Excvation Safety for safety officers reference
Entrepreneurship lessons in Philippines
Entrepreneurship lessons in Philippines
Unveiling the Soundscape Music for Psychedelic Experiences
Unveiling the Soundscape Music for Psychedelic Experiences
business environment micro environment macro environment.pptx
business environment micro environment macro environment.pptx
20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdf
20220816-EthicsGrade_Scorecard-JP_Morgan_Chase-Q2-63_57.pdf
PSCC - Capability Statement Presentation
PSCC - Capability Statement Presentation
Supercharge Your eCommerce Stores-acowebs
Supercharge Your eCommerce Stores-acowebs
Welding Electrode Making Machine By Deccan Dynamics
Welding Electrode Making Machine By Deccan Dynamics
Church Building Grants To Assist With New Construction, Additions, And Restor...
Church Building Grants To Assist With New Construction, Additions, And Restor...
Effective Strategies for Maximizing Your Profit When Selling Gold Jewelry
Effective Strategies for Maximizing Your Profit When Selling Gold Jewelry
Guide Complete Set of Residential Architectural Drawings PDF
Guide Complete Set of Residential Architectural Drawings PDF
The-Ethical-issues-ghhhhhhhhjof-Byjus.pptx
The-Ethical-issues-ghhhhhhhhjof-Byjus.pptx
20200128 Ethical by Design - Whitepaper.pdf
20200128 Ethical by Design - Whitepaper.pdf
Onemonitar Android Spy App Features: Explore Advanced Monitoring Capabilities
Onemonitar Android Spy App Features: Explore Advanced Monitoring Capabilities
APRIL2024_UKRAINE_xml_0000000000000 .pdf
APRIL2024_UKRAINE_xml_0000000000000 .pdf
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