In egg-cellent taste

Responsive Web Design (Lite)

Posted by Jasminn, Froglord Ken in on January 03, 2012

What is Responsive Web Design?

Responsive web design is the art of building websites that look good on all sorts of devices, from wide-screen monitors to smartphones and tablets.

The ability to tailor a website’s interface to a detected screen-resolution has become immensely important due to the sheer variety of devices in today’s market. Designing a fixed interface for a widescreen computer just isn’t enough anymore.

2 or more years ago, desktop computers/PCs were what most of us used to surf the Web. We used fairly standard size monitors, with resolutions of no more than 1400 pixels in width. Designing websites was easier then, with standard screen widths and resolutions allowing us to code static designs that worked with very specific screen resolutions.

It’s a very different story now – the face of the mobile web has changed, virtually overnight.

Computers, be they laptops or desktops, aren’t the only pieces of hardware people use to surf the web these days. Today’s mobile devices such as netbooks/notebooks, phones, and tablets, all come with browsers capable of providing a decent web experience. This makes the mobile web-surfing experience more important than ever.

What’s more, the huge variety of resolutions available these days isn’t just limited to small screens. Large, high-resolution displays are becoming much more common, and display sizes can range from 1024 pixels to 2560 pixels or more. Users expectations have changed along with the web-surfing landscape. They now expect their mobile surfing experiences to be just as easy, intuitive and efficient as their desktop experiences.

This is where responsive web design comes in. The term itself was first coined by Ethan Marcotte in his introductory article in A List Apart in May 2010, where he suggested ideas and techniques to help web designers and developers make optimal use of screen real-estate across the multitude of devices available today.

The ideas and techniques in Marcotte’s article include:

• Fluid Grids
• Flexible Images
• Media Queries

The Pros and Cons of Responsive Web Design

Pros
• Flexible - Delivers an experience tailored to the user’s device, with UI elements that scale to fit
• Device aware – Only content relevant to the device is displayed
• No wasted screen real estate – Content scales perfectly to fit any screen size
• Less maintenance – One source file for multiple devices
• Future proof – Websites automatically scale to accommodate new devices

Cons
• Longer design & development time – Greater complexity means longer time taken, as the same site must be tailored to fit multiple screen resolutions
• Compatibility issues with older browsers - Lack of support for media-queries on older browsers means that older devices may not display the correct version
• Longer load time – Increased load time for small-screened devices as compared to a standalone mobile site
• Inflexible Information Architecture (IA) – The website’s user experience must be broadly similar across all devices, as similar structure and navigation is used throughout all displays. This may not gel with some project objectives

Responsive Web Design in a nutshell

In short, responsive web design means that a website’s design should:
• Adapt its layout to suit different screen sizes, from widescreen desktops to mobile devices
• Resize images to suit the screen resolution
• Serve up lower-bandwidth images to mobile devices
• Simplify page elements for mobile use
• Hide non-essential elements on smaller screens
• Provide larger, finger-friendly links and buttons for mobile users

Further Reading

A List Apart: Responsive Web Design

Web Design Shock: Responsive Web Design, most complete guide

Think Vitamin: Beginner’s Guide to Responsive Web Design

Wordcamp San Francisco 2011: Responsive Web Design video