Responsive Design For Mobile

Just a few years ago, the best way to serve up a mobile-friendly version of a website was to use some fancy detection and redirection to a completely different version of the site. We've all seen that m.whatever.com or the www.whatever.com/mobile in the URLs we've visited on our phones.  There were several problems with that. First, the detection wasn't always reliable. Detection depended on what's called the UA (user agent) string. That string is meant to identify the device a visitor is using, which means it varied between most every device. In order to detect, you had to keep a good list of all user agents, which with all the new phones coming out each month, was an impossible task. You just couldn't do it. The second problem is that you had to make assumptions with your mobile design. Maybe we designed the site for devices with a screen width of 320 pixels. Well what happens when somebody visits on a device with a screen width of 480 pixels? What about when they visit with a tablet and the user agent string says that it's mobile? That's going to deliver a worse experience than if you just left the site alone.

So what is a developer to do?

Enter responsive design. Most new devices, such as the iPhone, iPad, and Android phones, now have more sophisticated browser which are capable of using a technology called CSS3. CSS3 has a feature called media queries, which lets us specify styles based on screen sizes rather than user agents. So what does that mean? Well, instead of building a whole new site for mobile with all the problems inherent with those assumptions, we use the exact same website and specify a few display rules to make the site look great based on a few different screen sizes. In essence, our default styling would apply to desktops. We create a media query and a set of rules for tablet screen sizes.  We set another set of rules for smartphones. Then we specify another set of rules for lower resolution feature phones. In this way, we're able to slightly (or majorly) alter the layout of the page to respond to the screen size. Usually slightly does the trick.

Want to see what that looks like?  If you're reading this on our website and you're using a modern browser (IE9, Chrome, or Firefox 3.5+), just slowly decrease the width of your browser window. Watch what happens as you shrink past certain widths. Once the window is about the width of a smartphone help in landscape orientation, you'll see our header and body adapt. Once your window is about the width of a smartphone held in portrait orientation, you'll see all double columns turn into single columns to make a great viewing experience that way too! Pretty sweet, right? And since this isn't a separate website, maintaining the site is much easier.

We believe this is how mobile websites should be developed. Implementing a responsive design ensures a great visitor experience across all devices. It's maintainable and much less time sucking (less costly) than developing a whole other mobile site like we did in the past.

What do you think? Have any questions? Let us know in the comments. Or if you want to talk to us about it, give us a shout.

Comments

Post Your Thoughts: