Responsive web design

Not long ago, if you wanted to browse the web you had to hand crank your desktop PC (or command the hamster to run faster in its wheel if you were one of the lucky few), then sit solemnly in front of a screen that looked a lot like a breezeblock with a window.

Today, people have a lot more choice about the way they browse the web, with smartphones and tablet PC’s soaring in popularity. Sadly, many websites are yet to catch up with the trend for having devices with much smaller, and differently shaped, screens to the once ubiquitous desktop monitor or laptop screen. The result? Text that’s difficult to read, pictures that appear stretched, users having to scroll in all directions to get the full view, and a variety of other problems that can hamper website usability.

As businesses are becoming more attuned to the fact that the experience they deliver to web users will directly affect whether a customer makes a purchase, the hunt is on for solutions.

One solution is to design a number of versions of your website to account for different types of users. However with an increasingly vast array of mobile devices with different resolutions and browsers, pleasing everyone in this way could soon become unwieldy.

What is responsive web design?

One bright spark thinks he has the answer though, and many people seem inclined to agree. Since publishing the article ‘Responsive Web Design’ on design website A List Apart in 2010 (http://www.alistapart.com/articles/responsive-web-design/), US web designer Ethan Marcotte has received much praise for his ideas. So what are they?

Marcotte says that: “Rather than tailoring disconnected designs to each of an ever increasing number of web devices, we can treat them as facets of the same experience.” The basic idea is that, rather than creating different versions of the same website, companies and web designers could create a single version that will adapt itself according to the specific user visiting the site and the device they are using.

This is done using ‘media queries’- a type of CSS3 programming command that enables a website to automatically discover what type of device and resolution size a visitor is using. The content that appears on the user’s screen can then be adjusted accordingly to provide the best possible user experience. And providing the best possible user experience should be a top priority for any company with an online presence.