Back in September I wrote about designing for mobile sites at “Would You Really Build A Website Today Without Thinking About Mobile” and how the ‘design for mobile first’ concept was critical. Recently I was shown a great example of how to adapt your sites between various forms of mobile (tablets and phones) as well as the traditional desktop experience.
Instead of having separate sites or code bases for each of the various versions of the screen layouts, this implementation allows the site to automatically adjust to the user’s viewing pane. When you view it on mobile, it looks like a mobile site and when you view it on a desktop, it looks like a traditional site. The feature is really brought to life when you dynamically resize the window size on the desktop version. Go down to a screen size small enough to mimic a mobile browser and it automatically adjusts to the mobile version. Check it out (working at time of writing) at: http://www.bostonglobe.com/
This adaptive design allows you to deliver the experience relevant for your user’s browser window while making it more efficient to code (according to the team that implemented it) and a host of other benefits like the SEO gain of having all your users and content on one URL. The Boston Globe example was implemented by the folks at R/GA and could be something interesting to explore in the next generation of designing for the mobile web.