Definition of Responsive Web Design

Definition of Responsive Web Design


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.