What is Responsive Web Design?

Responsive Web Design was a coin termed by web designer Ethan Marcotte and he has written two books on the subject, A Book Apart, Responsive Web Design and Response Design: Patterns and Principles. Responsive web design suggests that a web page be adaptable to a user’s device screen size and their environment and behaviour. This approach is more efficient than designing a different web page or website per device, rather web designs are programmed to automatically adjust to and accommodate to the user.

Why Responsive Web Design?

Designing a web page is usually done on a desktop computer. When the web site is then viewed on other devices, for example tablets or mobile phones, the web page may not exactly fit the screen as expected, since it was designed for the proportions of another sized screen. Screens on a tablet may also be rotated, and these orientations are completely different to the proportions of a desktop computer. Websites should always be easy to use, and a lack of compensation for use on alternative screens may result in information chopped off the edge of the screen or images becoming partly unviewable. There are too many different screen sizes to build customised adjustments for every single one. In comes responsive web design. With responsive web design, CSS and HTML is used to resize, hide, shrink, or relocate content in order for the site to be functional and aesthetically intact on any sized screen.

Fluid grid & Flexible images

There are a few techniques in practice to change the format of the screen to accommodate the screen size as shrinking and squeezing content into place is not always desirable. Examples of these techniques are, hiding and revealing portions of images, creating sliding composite images and foreground images that scale with the layout. Even in these fixes, the outcome is not necessarily perfect for every size of screen. Fluid grid is a technique first recommend by Ethan Marcotte where an image should be resized relatively, rather than pixel determined, according to the size of the screen using CSS to support relative size adjustment. There are even options to fix resolution rendering issues. The Filament Group has presented recommendations where the size of the image also shrinks resolution for smaller screens so that the quality of the image remains intact.

Media queries

Media queries allow the page to use different CSS style rules, determined by the features of the device in use. This means creating multiple style sheets and basic layout customisations for a wide variety of screen widths, including the orientation of the page.

Now we know…

Ethan Marcotte has recommended that fluid grid, flexible images and media queries are three key elements in responsive web design. These techniques have been put into practice with great success and are a great leap forward in our use of the flexibility of code. Media queries will improve the web design within the various contexts for web site viewing. Instead of designing specifically for a device screen, we can adjust code so that customisation is automatic.