Responsive Web Design: A Primer

by Kevin Newcombe in DONOVAN WORLD, MOBILE, TECHNOLOGY

16

Feb
2012

FILED UNDER

In the final days of 2011, my laptop died. For weeks and weeks, I pinched and zoomed my way around the internet via my iPhone, desperately trying to fulfill my need for internet goodness each day. It sucked.

According to Google, more Americans own internet-capable smartphones than those who own desktop or laptop computers. Circa 2005, in response to the growing popularity of Blackberrys, web developers started creating websites in two flavours; ‘Normal’ and ‘Mobile’.

‘Normal’, means a screen designed for users with wide monitors and high-speed internet.

‘Mobile’ is for users on screens roughly 1/4th the width of most desktop computers, slower wireless connections, and limited plugin support.

This was fine at a time when most internet-capable devices fell into one category or the other, but as more varieties of smartphones and tablets enter the market, it becomes nearly impossible to nail down a common middle ground, especially on smaller devices where screen space is valuable real estate.

Doing away with the concept of a ‘mobile site,’ responsive design is a principle that dictates how a website should fill the container of whatever screen it’s on. If you’re looking at a website on a Blackberry Torch or Apple iPad, ranging anywhere from a screen width of 360, 480, 768, or 1024 pixels, depending on the resolution, the website layout should change to fit your screen, not the other way around.

In a move that was greatly applauded by the web community, the Boston Globe launched a responsive version of their website in September 2011. Visit iPadGeek.com to use an iPad simulator and see the newly designed Boston Globe site.

Also, visit DONOVANcreative.com on your tablet or smart phone to see how our team built the site to respond to your device’s screen size. We practice what we preach.

Check back over the next few weeks as we go into further detail about responsive web development practices and other means of building websites optimized for mobile devices.

Kevin Newcombe is Senior Web Developer at DONOVAN. Comments on this post or suggestions for future topics are welcome.