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, like in Internet Explorer) and adjusts the layout of the web page to that fits the visible area. appropriately (as the web designer or creative director sees fit).
Although this is most commonly used in web designs, responsive web design can go far beyond layouts. Primarily accomplished using code known as media queries (see my article The Media Query), responsive web design allows you to produce web pages that are independent of the viewable area.
Responsive Web Design Case Examples
A good example of using this would be in the case of a website that is optimized to adapt to mobile devices, as well as desktop computers, where the links in the top menu would be more practical repositioned as a vertical list, instead of a horizontal bar that goes to the other side of . This kind of detail is supported by responsive web design.
If you have a grid in your layout where 10 thumbnails fit perfectly on a regular desktop computer monitor, those thumbnails would have to be awfully small to fit 10 on an iPad or iPhone. With a responsive layout, you can change it so that if the width of the device is as short as an iPad, it only puts 7 thumbnails. So maybe 4 wide for an iPhone.
Many website contact forms come with a sidebar area (or two) for upselling and other purposes. This is great for a desktop computer, but on a smartphone, by default, the form and sidebar are too small to read. With responsive web design, the form can be made to fill the screen and the sidebar can be hidden, placed below, “replaced” by another smaller version with the same message, almost anything is possible.
Responsive Web Design vs. liquid designs
For a long time, there have been web page layouts that adapt to the size (usually the width, specifically) of the browser 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 on to fit all mobile device screen sizes. This type of layout is usually very simple, like a grid of thumbnails or a list of buttons. But if you take the same design and let it span the width of a desktop monitor, you often find it too sparse, too stretched out, or all too big.
Responsive web design includes taking advantage of liquid and fixed layouts to accommodate all screen sizes.