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
InfoCamp Seattle 2007
The Skinny onThe Mobile Web
Nick FinckOctober 13th, 2007InfoCamp, Seattle
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
InfoCamp Seattle 2007
Web & Print
InfoCamp Seattle 2007
Web & Print
• XHTML✓Well formed✓Semantically correct
• CSS✓Screen media type✓Print media type
InfoCamp Seattle 2007
digital-web.comA good example of designing for both web and print
InfoCamp Seattle 2007
So what? That’s old news!
InfoCamp Seattle 2007
Web & Mobile
InfoCamp Seattle 2007
Web & Mobile
• XHTML✓Well formed✓Semantically correct
• CSS✓Screen media type✓Handheld media type
InfoCamp Seattle 2007
tipped.co.ukA good example of designing for both web and mobile
InfoCamp Seattle 2007
So just a new CSS file? Easy!
InfoCamp Seattle 2007
Not so fast...
InfoCamp Seattle 2007
Mobile Specific
InfoCamp Seattle 2007
Specific Mobile
• XHTML✓Well formed✓Semantically correct✓Highly optimized
• CSS✓Handheld media type (sometimes even screen media type)✓Highly optimized
InfoCamp Seattle 2007
getleaflets.comA good example of designing for a specific mobile context (iPhone)
InfoCamp Seattle 2007
What the $#@%!!
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?
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/
InfoCamp Seattle 2007
Lets Get Technical!
InfoCamp Seattle 2007
Fitts’s Law
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
“
InfoCamp Seattle 2007
Not so good
Way better
InfoCamp Seattle 2007
Optimized Markup
InfoCamp Seattle 2007
Very typical non-optimized markup highly optimized markup
InfoCamp Seattle 2007
Optimized UI
InfoCamp Seattle 2007
Very typical non-optimized UI highly optimized UI
InfoCamp Seattle 2007
Resources
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
InfoCamp Seattle 2007
Thank you.
