Slides from Voices That Matter: Optimizing for the Mobile Web, Scott Jehl
April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach.
Photo Credit:
OCJess
Last week, Filament Group’s Scott Jehl presented on Optimizing for Mobile Web, at the 2010 Voices That Matter Conference in San Francisco. Scott’s presentation covered the techniques we used and insights we discovered while creating our new mobile-optimized website, and included examples of how we use the EnhanceJS framework to decide not only whether to provide browsers basic or enhanced experience, but also to deliver optimized experiences to desktop and mobile browsers.
While preparing for this presentation, we created a mobile-optimized version of this website, which you can view by scrolling to the bottom of the page and clicking the toggle link. Taking advantage of new features in EnhanceJS — such as support for CSS3 Media Queries for both CSS and JS — we were able to deliver a different optimized versions of this site to desktop, mobile, and tablet browsers using feature detection, instead of common-but-less-sustainable approaches such as user agent detection.
We will be posting a followup soon with more details of our approach as well as in-depth technical examples of how to use EnhanceJS to create optimized experiences for different browsing environments. Until then, please check out our mobile version by clicking the toggle link or pulling it up on your mobile phone.
Note: A video of the talk is available on the Vimeo website: http://vimeo.com/13006714