Merge

By now we’re all aware that mobile web browsing is becoming increasingly popular.  A lot of companies have created a mobile version of their website, which is a simplified version or design made to fit a phone screen.  Just check out the example of Amazon.com in my phone’s browser. 

These mobile sites are a great step... but, now we have netbooks and tablets.  Let’s not forget that websites are also being viewed on TV’s now, via Google TV for example, but that’s not as mainstream...yet.  So, are we supposed to keep designing specific websites for all these devices?
Nope! There’s no longer a need to design multiple versions of a website thanks to responsive web design.

Amazon’s mobile phone website. 
(By the way, if you’re a Tolkien fan you should check out that book front and center.  That’s my “Recommendation for YOU”)

What is it?

If you’re thinking of a new website or a redesign of your existing one, you need to be aware of responsive design.  You might also hear the term adaptive design- the word choice usually depends on the philosophy of the developer- but in the end the main issue addressed is the same.  Responsive design is designing your website so that it will adjust to the size of the viewport- a desktop/laptop, netbook, tablet, phone, tv.  No more multiple sites for multiple screen sizes, just one website to fit them all.

How does this work?

Responsive web design is achieved with a new CSS3 specification- Media Queries.  Media queries allow us to inspect a device’s physical characteristics and provide styles targeted at that device.  Say you’re viewing a website on your 21” monitor at work.  This will be the “default” view of the website, if you will (if you view this on a device with an older browser that doesn’t support media queries, this is what you will get).  Later on, you view it on your iPad, and the design has adjusted a bit to fit your device. 

Adjusted how?  Could be a number of things, really. The font might have slightly resized for better readability, the images might rearrange themselves a bit, even the navigation might have shifted slightly to a better position.  Whatever it is, it provides the best viewing of the website at that size.  This means no zooming in to read the font and no scrolling around to view the entire page.  Same things applies to netbooks and phones.  What’s not to love?

Let’s see it in action

The following examples were found on www.mediaqueri.es, which is collection of responsive web designs.  The images show how the website displays on different devices from left to right: Smartphone, Tablet, Netbook, and Desktop. 

AND, I have a secret tip just for you: you don’t need a smartphone, netbook, or tablet to view the different sizes for yourself.  Just grab the bottom right corner of your browser window and slowly resize it.  Et voilà!

About.com

About.com’s homepage has a lot going on.  As you view the different sizes, you can see how they site starts to resize and simplfy, taking away the scrolling feature at tablet view, and cleanly listing the stories one by one for the phone view.

The Baker Street Enquirer Responsive Web Design Example

This website was created by Ethan Marcotte as an example to accompany his popular Responsive Web Design article on A List Apart. You will see this website includes the resizing of images and the repositioning of the navigation as the devices gets smaller.

3,200 Tigres

The World Wildlife Fund’s 3,200 Tigres is a good example of how the content appropriately and effectively repositions itself to allow the large eye-catching image to remain.  Once we get to the phone design, the site does away with the image and some of the extra features, focusing on the main content of the site.

Bottom line: With responsive web design, there is no longer a need to design multiple websites to fit multiple devices.  This will save you time and money, and insure your website will always look and act it’s best.