Responsive Web Design: Going Mobile Without Going Crazy

Carnegie Higher Ed Nov 01, 2012 Carnegie Higher Ed Persona The Visionary Frontrunner

A few years ago, I could be pretty sure that you would be reading this sitting down, at a desk, on a desktop computer screen. This assumption is no longer valid. With the emergence of faster WiFi and handheld devices, you could be anywhere. You could be reading this standing on the subway with your iPad, while periodically giving the woman with the Coupe de Ville-sized baby carriage dirty looks. Maybe you’re reading this on your iPhone while in the waiting room wondering if you have ever not waited in a waiting room. Either way, you get the point—the way the web is being viewed is dramatically changing, so if you want your website’s users to have the best overall experience on a variety of devices, you might need to change your notion of what a website is supposed to look like.

Up until recently, websites have been designed like print publications. You start with set dimensions and then layout your content depending on those dimensions. This makes sense for the printing industry because everyone’s printed issue of The Boston Globe is the same size, whereas could be viewed at hundreds of different sizes ranging from a handheld device to a wide-screen TV. In the beginning of this year, was the first high-traffic website to implement the idea that has been coined “Responsive Web Design.” Since then, countless high profile websites have embraced this way of thinking and jumped on the bandwagon.

What is Responsive Web Design?

Responsive Web Design is a design and development technique to build websites in a way that maximizes user experience no matter the device. At first, that seems like a lofty goal, but the biggest challenge is removing preconceived notions of what a website is “supposed” to look like. A website should be thought of as an organic object that constantly morphs depending on time, device, or environment. Not as an 8.5 x 11 sheet of paper.

The best way to see responsive website in action is to resize the browser window by dragging it back and forth. Word of warning: once you start doing this, you won’t stop. You will be compelled to find out if the websites you visit frequently are responsive. If a site is built “responsively,” then the content should move around and adjust for optimal viewing when the browser window is resized. If the site wasn’t, then you’ll have to use the horizontal scrollbar to see all of the content.

A few tips I learned from the Carnegie redesign

Start small: When you start thinking about the different layouts for multiple devices, resist the urge to begin with the desktop version. I’m sure you’re probably most comfortable with this size, but we need to start thinking differently. If you start with the handheld size, you’ll need to narrow your content down to what is most important. This is a fortunate limitation of the small screen size. As you work your way up through the larger layouts, you can add more graphical elements, such as larger images or a more complex navigation.

Test on actual devices: As fun as it is to drag the browser window back and forth, there is no substitute to seeing your site on multiple devices. Click (I mean, touch) around on an iPad, iPhone, or whatever you can get your hands on. There is a big difference between the pinpoint accuracy of a mouse and a clumsy thumb.

Responsive Web Design is a win, win, win situation. The website owner loves it because they only pay for one website rather than also paying for an additional site just for mobile. The person who maintains the website loves it, because they just have to make updates once. And most importantly, the user loves it because they get the best possible experience, no matter the device.

So, check out our new site and resize it over and over again. Let us know how you think we did. And the next time your company or school is redesigning their site, don’t treat it like a printed brochure. It has a much greater potential to adapt to the world around it.

Never miss an update.