What is responsive web design? In essence it is when the design of the website responds to the dimensions of the screen. In other words, a website built to be responsive, takes note of the height and width of the screen (actually, the viewable area is usually a browser window, as in Internet Explorer), and adjusts the web page layout to fit the viewable area appropriately (according to what the web designer or creative director deem appropriate).

Although this is most commonly used in web layouts, responsive web design can go well beyond layouts. Primarily achieved using code referred to as media queries (see my article The Media Query), responsive web design empowers you to produce web pages that are independent of the viewable area.

Responsive Web Design Case Examples

A good usage example of this would be in the case of a website that is optimized to suit mobile devices as well as desktop computers, wherein the links in the top menu would be more workable repositioned as a vertical list, rather than a horizontal bar going across. This sort of detail is supported by responsive web design.

If you have a grid in your layout where 10 thumbnails fit nicely across on a regular desktop computer monitor, those thumbnails would have to be awful small to fit 10 across on an iPad or iPhone. With a responsive design you can change it so that if the width of the device is as short as an iPad, it only places 7 thumbnails across. Then, perhaps 4 across for an iPhone.

A lot of website contact forms are accompanied with a sidebar area (or two) for up-sale and other purposes. This is great for a desktop computer, but on a smart phone, by default, the form and the sidebar both are shrunken down too small to read. With responsive web design the form can be made to fill the screen and the sidebar can be hidden, placed underneath, “replaced” by another smaller version with the same message, almost anything is possible.

Responsive Web Design vs. Liquid Layouts

For a long time, there have been web page layouts that flex to the size (usually the width, specifically) of the browsers window, known as liquid layouts. These are still in use today, although they’ve never been as common as the typical fixed layout you’ll find on most websites (where the layout remains the same, regardless of the width of the viewable area). Liquid layouts are very commonly used for mobile devices, as they can be counted upon to fit every mobile screen size. This sort of layout is usually kept very simple, like a grid of thumbnails or a list of button. But if one takes that same layout and lets it span the width of a desktop monitor, it is usually found to be too sparse, too stretched or everything is oversized.

Responsive web design includes taking advantage of both liquid and fixed layouts, to accommodate for all screen sizes.

Author: Joe Rhoney