Responsive Design Explained

Web site redesigns are expensive. And with more portable devices being released every day, redesigning for each new device would quickly get out-of-hand. A mantra in the web standards community is, “design once, publish everywhere.” Responsive Design is a new design methodology intended to help us meet that ideal in the face of all the ways your users can now get to your website.

Desktop monitors have steadily increased in size since the death of CRT. In the web design community, this has been liberating; allowing designers far more room to lay out the information on the site. But now that high-speed internet connections are available on small devices, far more of the web’s audience have been arriving on very small screens. But this is not just a problem of meeting the needs of mobile browsers. Instead this should be seen as a problem that is an essential aspect of the web. Unlike print design, there is no way to have complete control over the final presentation of the content.

This in not a new problem however. Even when the primary mode of viewing websites was on a desktop computer, there was the issue of the user being able to resize the browser window. ‘Liquid layout’ design was used to make the layout fit the browser window comfortably. Liquid layout didn’t really catch on as a wide-spread practice. A more popular solution is to set the content in a fixed width box and then center that box in the browser window. This rigid approach allows more control, but does not work when the viewing window is smaller than the containing box.

Recognizing that designs on the web are too rigid to accommodate the ever-increasing number of web-capable devices, Ethan Marcotte wrote an article on how to ‘future-proof’ your design. He called this new approach ‘Responsive Design’ which uses some of the concepts of liquid layouts along with some new web technologies. Like any good article on responsive design, I’m going to recommend you read Ethan Marcotte’s original article. The basic concept is that the layout of a website should react to the environment in which it is being presented. That way a page that works on a large cinema display will work just as well on a tiny phone (or maybe someday a watch.)

I’d like to point out that responsive design is not a technology in and of itself. Instead it’s more of a methodology, or philosophy. But it certainly does make use of some technology. Specifically, flexible grids, flexible images, and media queries.

Most layouts are constructed on a grid, which sets the widths of columns, and generally acts as a framework for the content. These grids are typically specified in fixed column and row intervals. Flexible grids are a way of setting those widths in percentages instead of in fixed units. That way when someone resizes the window, the content inside the grid expands or contracts, filling the space appropriately and maintaining the correct proportions.

Just like flexible grids, flexible images are meant to respond to the available space. Most of the images on the web have a fixed size specified in pixels. If the size is specified as a percentage however, the image will resize with the containing element. This is important so that the images do no overwhelm the layout as the size of the grid changes.

Even if the images and columns can stretch a bit, they reach a point where it doesn’t make any sense to scale them any larger or smaller. Instead, the overall layout of the page needs to be re-arranged. This can be accomplished by using ‘break-points’ in the style sheet called ‘media queries’. Media queries are a fairly new technology that allows the web developer to make radical changes to the layout depending on the size of the browser. Some things that can be changed include adding or removing items, changing the number of columns, and reordering the elements. Media queries are very powerful and important addition to the web developer’s tool box and are really what take responsive design past the limitations of liquid layouts.

All three of these elements together make a powerful formula for creating a design that will fit naturally and comfortably in the window no matter how wide or narrow. And that’s a comforting thought when web browsers start appearing in refrigerator doors.

Cool Responsive Sites

stephencaver.com
clearairchallenge.com
bostonglobe.com

Be Sociable, Share!

• 

Mitch Dunaway

Mitch, the Junior Front-End Web Developer, fills the niche that lies somewhere between graphic design and computer programming. Although he writes code, that code is mostly concerned with type, colors, placement and images. As a dyed-in-the-wool geek and technophile, He enjoys things that celebrate technology like sci-fi movies, electronic music and fantasy art. He spends most of his time bathed in the light of a monitor of some sort. His favorite food is pizza (sushi is a strong contender).

More Posts - Website