the skinny on the mobile web
DESCRIPTION
A presentation I gave at InfoCamp Seattle 2007 per popular request. It is a last minute edited and super compressed version of the talk I gave at Webmaster Jam Session on mobile designTRANSCRIPT
![Page 1: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/1.jpg)
InfoCamp Seattle 2007
The Skinny onThe Mobile Web
Nick FinckOctober 13th, 2007InfoCamp, Seattle
![Page 2: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/2.jpg)
InfoCamp Seattle 2007
Who the hell is this guy?
• Blue FlavorDirector of User Experience, co-founder, partnerhttp://www.blueflavor.com
• Digital Web MagazinePublisher and founderhttp://www.digital-web.com
• User Experience NetworkSeattle Local Ambassadorhttp://www.uxnet.org
![Page 3: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/3.jpg)
InfoCamp Seattle 2007
Web & Print
![Page 4: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/4.jpg)
InfoCamp Seattle 2007
Web & Print
• XHTML✓Well formed✓Semantically correct
• CSS✓Screen media type✓Print media type
![Page 5: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/5.jpg)
InfoCamp Seattle 2007
digital-web.comA good example of designing for both web and print
![Page 6: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/6.jpg)
InfoCamp Seattle 2007
So what? That’s old news!
![Page 7: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/7.jpg)
InfoCamp Seattle 2007
Web & Mobile
![Page 8: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/8.jpg)
InfoCamp Seattle 2007
Web & Mobile
• XHTML✓Well formed✓Semantically correct
• CSS✓Screen media type✓Handheld media type
![Page 9: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/9.jpg)
InfoCamp Seattle 2007
tipped.co.ukA good example of designing for both web and mobile
![Page 10: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/10.jpg)
InfoCamp Seattle 2007
So just a new CSS file? Easy!
![Page 11: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/11.jpg)
InfoCamp Seattle 2007
Not so fast...
![Page 12: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/12.jpg)
InfoCamp Seattle 2007
Mobile Specific
![Page 13: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/13.jpg)
InfoCamp Seattle 2007
Specific Mobile
• XHTML✓Well formed✓Semantically correct✓Highly optimized
• CSS✓Handheld media type (sometimes even screen media type)✓Highly optimized
![Page 14: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/14.jpg)
InfoCamp Seattle 2007
getleaflets.comA good example of designing for a specific mobile context (iPhone)
![Page 15: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/15.jpg)
InfoCamp Seattle 2007
What the $#@%!!
![Page 16: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/16.jpg)
InfoCamp Seattle 2007
But...
• Why would you want to design for a specific mobile context?
• What about the “One Web” where one size fits all?
• Won’t the Standards Nazis lynch you?
![Page 17: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/17.jpg)
InfoCamp Seattle 2007
NYTimes.comMinimum 30 Seconds to lo load 796kbplus requests to multiple servers
NY Times on Getleaflets.comMaximum of 7 seconds to lo load 30kb
http://nytimes.com http://app.getleaflets.com/nyt/
![Page 18: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/18.jpg)
InfoCamp Seattle 2007
Lets Get Technical!
![Page 19: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/19.jpg)
InfoCamp Seattle 2007
Fitts’s Law
![Page 20: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/20.jpg)
InfoCamp Seattle 2007
In ergonomics, Fitts's law is a model of human movement which predicts the time required to rapidly move to a target area, as a function of the distance to the target and the size of the target.”
Description of Fitts’s LawWikipedia
“
![Page 21: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/21.jpg)
InfoCamp Seattle 2007
Not so good
Way better
![Page 22: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/22.jpg)
InfoCamp Seattle 2007
Optimized Markup
![Page 23: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/23.jpg)
InfoCamp Seattle 2007
Very typical non-optimized markup highly optimized markup
![Page 24: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/24.jpg)
InfoCamp Seattle 2007
Optimized UI
![Page 25: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/25.jpg)
InfoCamp Seattle 2007
Very typical non-optimized UI highly optimized UI
![Page 26: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/26.jpg)
InfoCamp Seattle 2007
Resources
![Page 27: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/27.jpg)
InfoCamp Seattle 2007
Mobile Development• dotMobi Mobile Web Developers Guide by Brian Fling
Fitts’s Law• Fitts's UI Law Applied to the Web by Scott Berkun• A Quiz Designed to Give You Fitts by Bruce Tognazzini
Context & Mobile Design• The Mobile Context by C. Enrique Ortiz• About Context and the Mobile Web by Rudy De Waele• Designing the Mobile User Experience by Richard F. Cecil
![Page 28: The Skinny On The Mobile Web](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c7ed084a795916268b465c/html5/thumbnails/28.jpg)
InfoCamp Seattle 2007
Thank you.