Modern Media

live | digital | social

The Dog Codes Mobile

Responsive Website Design for Mobile

A few weeks ago the dog asked me what year it was.

“It’s 2012, Milo,” I said.

“You wouldn’t know it,” said the dog, “from our website. Take a look at it on my iPhone.”

Thus began the redesign of the Modern Media website for mobile and tablet devices. Fortunately there are plenty of open source resources available that made it (relatively) easy for the web team (me and the dog) to get a mobile-friendly design up and running.

We chose to start with a responsive design framework, Twitter Bootstrap. “Responsive” means that you don’t have to code different designs (in our case WordPress themes) for mobile, tablet and desktop browsers.  Every browser gets the same content and design payload from the server: Javascript and CSS take care of laying things out nicely on the client side.

There are other ways of skinning the mobile cat, for example by detecting the browser and serving up a different design (and usually different content) accordingly.  This is the approach that we’ve used so far on The Realtime Report. There, we use the WPTouch plugin to serve content to iPhones and Android devices.

In any case, making a decent mobile-friendly design isn’t all that hard, and with more and more of us paying more and more attention to our devices, it’s becoming a must-have for websites.

Let us know what you think of the new Modern Media design!