Enviar búsqueda
Cargar
CSS for iPhones
•
3 recomendaciones
•
1,752 vistas
Patrick Crowley
Seguir
Quick guide to optimizing your website for the iPhone
Leer menos
Leer más
Empresariales
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 53
Descargar ahora
Descargar para leer sin conexión
Recomendados
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
Recomendados
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
Más contenido relacionado
Similar a 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 a 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
Más de 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
Más de 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
Último
Monthly Social Media Update April 2024 pptx.pptx
Monthly Social Media Update April 2024 pptx.pptx
Andy Lambert
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
dollysharma2066
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
amitlee9823
Mysore Call Girls 8617370543 WhatsApp Number 24x7 Best Services
Mysore Call Girls 8617370543 WhatsApp Number 24x7 Best Services
Dipal Arora
Call Girls From Pari Chowk Greater Noida ❤️8448577510 ⊹Best Escorts Service I...
Call Girls From Pari Chowk Greater Noida ❤️8448577510 ⊹Best Escorts Service I...
lizamodels9
MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRL
MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRL
Seo
VVVIP Call Girls In Greater Kailash ➡️ Delhi ➡️ 9999965857 🚀 No Advance 24HRS...
VVVIP Call Girls In Greater Kailash ➡️ Delhi ➡️ 9999965857 🚀 No Advance 24HRS...
Call Girls In Delhi Whatsup 9873940964 Enjoy Unlimited Pleasure
Uneak White's Personal Brand Exploration Presentation
Uneak White's Personal Brand Exploration Presentation
uneakwhite
Mondelez State of Snacking and Future Trends 2023
Mondelez State of Snacking and Future Trends 2023
Neil Kimberley
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Seo
👉Chandigarh Call Girls 👉9878799926👉Just Call👉Chandigarh Call Girl In Chandiga...
👉Chandigarh Call Girls 👉9878799926👉Just Call👉Chandigarh Call Girl In Chandiga...
rajveerescorts2022
It will be International Nurses' Day on 12 May
It will be International Nurses' Day on 12 May
NZSG
RSA Conference Exhibitor List 2024 - Exhibitors Data
RSA Conference Exhibitor List 2024 - Exhibitors Data
Exhibitors Data
Cracking the Cultural Competence Code.pptx
Cracking the Cultural Competence Code.pptx
Workforce Group
Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...
Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...
Sheetaleventcompany
John Halpern sued for sexual assault.pdf
John Halpern sued for sexual assault.pdf
AmzadHosen3
Pharma Works Profile of Karan Communications
Pharma Works Profile of Karan Communications
karancommunications
Katrina Personal Brand Project and portfolio 1
Katrina Personal Brand Project and portfolio 1
kcpayne
Call Girls Kengeri Satellite Town Just Call 👗 7737669865 👗 Top Class Call Gir...
Call Girls Kengeri Satellite Town Just Call 👗 7737669865 👗 Top Class Call Gir...
amitlee9823
Call Girls Jp Nagar Just Call 👗 7737669865 👗 Top Class Call Girl Service Bang...
Call Girls Jp Nagar Just Call 👗 7737669865 👗 Top Class Call Girl Service Bang...
amitlee9823
Último
(20)
Monthly Social Media Update April 2024 pptx.pptx
Monthly Social Media Update April 2024 pptx.pptx
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
Mysore Call Girls 8617370543 WhatsApp Number 24x7 Best Services
Mysore Call Girls 8617370543 WhatsApp Number 24x7 Best Services
Call Girls From Pari Chowk Greater Noida ❤️8448577510 ⊹Best Escorts Service I...
Call Girls From Pari Chowk Greater Noida ❤️8448577510 ⊹Best Escorts Service I...
MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRL
MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRL
VVVIP Call Girls In Greater Kailash ➡️ Delhi ➡️ 9999965857 🚀 No Advance 24HRS...
VVVIP Call Girls In Greater Kailash ➡️ Delhi ➡️ 9999965857 🚀 No Advance 24HRS...
Uneak White's Personal Brand Exploration Presentation
Uneak White's Personal Brand Exploration Presentation
Mondelez State of Snacking and Future Trends 2023
Mondelez State of Snacking and Future Trends 2023
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
👉Chandigarh Call Girls 👉9878799926👉Just Call👉Chandigarh Call Girl In Chandiga...
👉Chandigarh Call Girls 👉9878799926👉Just Call👉Chandigarh Call Girl In Chandiga...
It will be International Nurses' Day on 12 May
It will be International Nurses' Day on 12 May
RSA Conference Exhibitor List 2024 - Exhibitors Data
RSA Conference Exhibitor List 2024 - Exhibitors Data
Cracking the Cultural Competence Code.pptx
Cracking the Cultural Competence Code.pptx
Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...
Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...
John Halpern sued for sexual assault.pdf
John Halpern sued for sexual assault.pdf
Pharma Works Profile of Karan Communications
Pharma Works Profile of Karan Communications
Katrina Personal Brand Project and portfolio 1
Katrina Personal Brand Project and portfolio 1
Call Girls Kengeri Satellite Town Just Call 👗 7737669865 👗 Top Class Call Gir...
Call Girls Kengeri Satellite Town Just Call 👗 7737669865 👗 Top Class Call Gir...
Call Girls Jp Nagar Just Call 👗 7737669865 👗 Top Class Call Girl Service Bang...
Call Girls Jp Nagar Just Call 👗 7737669865 👗 Top Class Call Girl Service Bang...
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
Descargar ahora