The Josh.biz Blog

Embracing Responsive Web Design

Responsive Web Design

The Web Design industry never stands still. Both the way we view and design websites has continuously evolved since I was first introduced to HTML, the language web pages are written in, back in 1995.

An old beige personal computerDuring most of this time we’ve been designing websites for typical desktop and laptop computers. It was the era of the ‘beige box in the corner of the room’ for a very long time. 10 years ago laptops became very popular as mass production began and prices fell.

Web designers have always focused on designing for a minimum resolution/screen size. And on the whole we were dealing with desktop PCs and laptops.

First, websites went wider

Several years ago, we switched from designing websites with a fixed width suitable for 800 x 600 (pixels) resolution to catering for 1024 x 768 (and above) resolutions. Suddenly websites started getting wider. A narrow website became a tell-tale sign of an old website. And there are still a few lingering around even today…

So, until recently, we’ve been merrily designing websites, usually with a fixed width of 960 pixels (which caters for the extra bits around the edge of the page – window edges, toolbars, scrollbars, etc.).

iPhone 4SEnter the smartphone and tablet…

As predicted, smartphone and tablets have given traditional desktop and laptop computers a run for their money. The latest statistics show that desktop computer sales are plummeting and more of us are using phones and tablets to access information from the web.

A few website owners (mostly very large companies and organisations) have created entirely separate versions of their websites for mobile users. But for most owners, setting up completely separate versions of their website was an expense too far.

I was never keen on this direction since it clashed with the philosophy of the web being a universal medium for everyone, not just those who can afford it. Imagine having to keep 2 websites up to date.

All change…

Today, things are now even more complicated. Users are accessing the web using tiny phone screens through to huge desktop screens (and everything in between).

iPad

The variety of devices (and resolutions) keeps diversifying endlessly, with the constant arrival of new products – iPads, Kindles, Samsung Galaxies, HTC Desires, Playbooks, iPhones, Blackberries, etc. This is a growing market and prices are falling.

So websites now need to be able to adapt to any screen size. It’s a plain fact that old (fixed width) websites designed primarily for standard PCs are unfriendly to use on smaller devices. Users have to ‘pinch and zoom’, in and out of the page to be able to read information. It’s not fun. Just finding a phone number is hard work.

Responsive Web Design – one size fits all

Ethan Marcotte, generally regarded as the author of Responsive Web Design has suggested a number of new techniques when designing websites which allow websites to adapt to all devices elegantly, creating equally rewarding experiences, whatever device is being used.

Building on current web design standards, Ethan suggests a combination of several core approaches be employed – using fluid grids (based on percentages rather than pixels), relative font sizes and media queries (which adjust the page layout at different resolutions). Don’t worry that’s as technical as I’ll get!

The best way to understand Responsive Web Design is to see it for yourself. Either visit a responsive website on lots of different devices or using a large screen, slowly reduce the size of the browser window. The page will literally adapt its presentation as the window size reduces. Almost like magic!

Find out more

If you’d like to know more about Responsive Web Design and how it might affect you, please contact us.

Desktop

Scroll Up