Wednesday, March 7, 2012

Mumbai city guide, on web, mobile and tablet

Last week we released our latest city guide into the wild... Indian music collective B.L.O.T. whisked us around Mumbai collecting photographs and audio, food expert Vandana Verma followed the city's army of dabbawallas ferrying tiffin boxes from kitchens to workplaces via some great food stalls, and fashion blogger Manou tracked trends from the street to the catwalk.

We wrapped it all up in a beautiful interactive map, which, for the first time, is responsive to the platform on which it is viewed. Translation: if you view the guide on a desktop or laptop, it looks one way, if you view it on a tablet, it looks another way, and if you view it on mobile, it looks different again. Crucially the source behind what you are viewing is exactly the same on all of them, it's just adapting accordingly. No need for different versions of the same content.

Built by Martin Shuttleworth and the Guardian Interactive Team, it's a nod to a growing trend in web design, whereby sites are built to have "one page to rule them all", resizing and adapting to the size of your browser window, whatever platform you are on. Here's lots of examples of how it works. The Boston Globe's new site is another notable piece of responsive design - play around with the size of your browser window, and watch how the content changes.

We're hoping to adopt this platform agnostic approach to many more types of our content in the future, so watch this space. In the meantime, dive into Mumbai.

A trip to pre-season Corsica