Mobile First Web

Last year I started experimenting with Responsive Design, trying to learn the CSS techniques and looking at JavaScript libraries that lended to modifying a UI to its form-factor. This year, I started trying to pull together design and development best practices on how to apply these techniques, in anticipation of more mobile-centric work coming down the road.  I was able to boil down the reading into a rather succint presentation that went over very well with the mobile-curious at work.

Luke Wreblowski's Mobile First web design approach, both the book and the ecosystem of opinion around it, was the touchstone.  Beyond that, a rundown of best practices and new features for development, particularly budding browser features, rounded out the content.

Why Mobile First?

Going mobile first means tapping into an ever-expanding market.  What many don't consider is that mobile devices are not just the current fashion in the US, but also likely to be the de facto computing device in emerging markets around the world.  If you want a web page to be seen by a someone in India or Africa, your best bet is to go mobile since smartphones and wireless networks reach so many places where desktops are hard to find.

Mobile Design 

While I had done some projects in the past that used media queries to apapt 3rd-party tools to scale down to mobile, I quickly found that's the wrong way when starting from scratch.  Starting with the most constraints (usually a vertical-oriented, mobile phone sized design), then progressively enhancing really is the way to go.  It forces simplicity, making the content more focused and code higher performance.

Mobile Development

On the development side, I also experimented with some of the browser capabilities like GPS.  You can try them yourself by firing up my version of Ben Nadel's geo-location demo. Seems to work best on Android and Firefox (choose "Always share location" then reload the page).

I also tried my hand with offline features, such as AppCache and localStorage.  Bruce had asked about them at a previous DocType Society meetup and while they're inferior to the lofty future of browser-based SQL-like solutions, they're an intriguing capability for the service-oriented applications I've started building at work.  Even in a non-mobile app, the ability to cache AJAX results across sessions is handy.

Conclusion

The presentation has a lot of content and it's hard to callout all of it here.  Compiling information for talks is a great way to find the shortcomings in one's own understanding.  If I can talk about it for 60 minutes, then I'm feeling much more confident that my next Mobile First project will be a success.

Special thanks to John Higley for letting me borrow his copy of Mobile First; my baby has kept me from returning it to him, but it'll make its way back eventually.