The ever-changing landscape of the web and the technologies that access it demand for shifts in how we view websites. Most recently a trend called ‘Responsive Design’ has emerged, which allow for users viewing websites on mobile devices to access them in a user-friendly manner. Accommodating these users is something everyone should take into account for their web strategies in the future, as it enhances the overall viewing experience for mobile visitors.

Many clients may demand a mobile version of their website – one for the Blackberry, another for the iPhone, the iPad, netbook, and even the Kindle. How does one accommodate this growing population? In this article I will describe the growing prevalence of Responsive Design and factors you should consider when designing for mobile visitors.

 

What is Responsive Design?

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. The website should accommodate for:

• Resolution

• Image Size

• Scripting Abilities

In short, a website should have the technology to respond to the user’s preferences.

“Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else.”

“Web design is responsive design, Responsive Web Design is web design, done right.”

-Andy Clarke

Taking A Closer Look

In creating a Responsive Website, your goal is to accommodate the user’s viewing device, such as the iPhone. A Responsive Website can be achieved through these short features:

• The site must be built with a flexible grid foundation.
• Images that are incorporated into the design must be flexible themselves.
• Different views must be enabled in different contexts via media queries.

A responsive web design will usually use CSS @media queries to style the page according to specific rules, such as min-width.

Flexibility

Part of any good web design in these modern times is a flexible grid. This practice will accommodate a variety of browsers already that demand the design be flexible and fluid.

Grid

• Defining your own parameters for columns, spacing and containers is often the best solution for a web design and can be just as flexible as any existing system out there.
• Size and spacing are the two main components to focus on in creating your flexible grid system.

• In place of pixels, use ems and percentages as your units of measurement.

Tiny Fluid Grid is a great tool for creating fluid grids. It lets you make grids with up to 1200px maximum widths, and is based on 1kb grid.

70+ essential resources for creating liquid and elastic layouts has everything you need to get started creating your own flexible layouts.

This sample website is on a flexible grid that changes the layout depending on the size of the browser’s viewport.

Images

Another feature of Responsive Web Design is images that move and scale with your flexible grid.

• To maintain fast loading times, use images of a manageable size. Using the width and height attributes to scale them for more text content on smaller devices isn’t a good usability practice.

• An alternative to scaling is cropping. The CSS overflow property (e.g. overflow: hidden) gives us the ability to crop images dynamically as the containers around them shift to fit new display environments.

• The option is available to have multiple versions available of the same image and then serve up the appropriate sized version depending on the user.

• Finally, you have the option to hide images altogether. Media queries that serve up a stylesheet which sets the display: none property for images takes care of this function.

Unstoppable Robot Ninja has a simple script that automatically resizes your images.

Zomigi allows you to selectively hide parts of your image dynamically.

Media Queries

Media queries allow designers to build multiple layouts using the same HTML documents by selectively serving stylesheets based on the user agent’s features, such as the browser window’s size.

Other parameters Media Queries deal with:

• Orientation

• Screen Resolution

• Color

Media queries and responsive design allow us to think outside of the constraints of a screen size or resolution and start building websites that flexibly adapts to all mediums.

Adaptive Layouts with Media Queries:
NET magazine offer some insightful info on the history of responsive or adaptive website designs and the introduction of the media query module along with tips on how to implement such features yourself.

Working with Media Queries
Nathan Staines has written a great guide to the basics of responsive web design with usable code samples.

How to use CSS3 Orientation Media Queries
1stWebDesigner has some fun with CSS3 media queries to show what kind of effects can be produced. See how the orientation media query in particular can be used to change the colour of an image based on the orientation of the device or browser.

Understanding Its Value

There are obviously a lot of benefits towards getting behind Responsive Design as the number of mobile users continues to rise. It’s important to note, however, that before you go redesigning your website to first evaluate who the current users are that are coming to your site and what they’re using to access it. Responsive Design may not really be needed for some sites than others, and is best to address the topic on a case-by-case basis.

Responsive Web Designs in Action

Simon Collison

Build

Lanyrd

Luca Vercellio

Clean Air Challenge

Ribot

Sasquatch

Owltastic

Resources

Responsive Web Design by Ethan Marcotte

Media Queries – a collection of sites using media queries

Summary

People who browse the web undoubtedly have different wants and needs depending on the device they’re using. As we see this become more common, designers will have the possibility of expanding their skills in creating mobile-ready design solutions for their clients. The web is growing and with it comes a world of possibility of designers and developers who wish to pursue it.