DIGITAL

How Responsive Web Design Works

CSS3 is the latest version of the web standard used to add a design layer to web pages. Responsive web design primarily uses a new feature of CSS3 called media queries, which literally asks the browser about the environment it is in and then delivers styles based on those responses. For example, a media query might ask if the screen size is within a certain width range and then deliver styles that will best ﬁt that screen width, possibly making text larger or smaller to accommodate.

On this page:

Progressive enhancement
Media queries
Interface breakpoints
Fluid grid
Relative image sizes

Progressive Enhancement

Progressive enhancement uses the latest capabilities of HTML5 and CSS3 to structure and design the page, but with an eye toward backwards compatibility. If particular advanced styles are not supported, the code will gracefully degrade, providing fallback default styles where needed to ensure that content is displayed and basic functionality can be performed by the user regardless of the browser being used.

Media Queries

Media queries are used to set styles based on the display environment. Added as part of CSS3, media queries effectively “ask” the application (browser or other web-enabled application) about its capabilities and can then deliver styles based on the response. For example, the server may query the web browser about its display width and then deliver styles that are optimal for that width. Keep in mind that no response is still a response. If the web browser does not support media queries, default styles are delivered that will look acceptable on any web browser that supports basic CSS.

View client-side and server-side techniques for use of media queries

Interface Breakpoints

Interface breakpoints are techniques where media queries are used to define where the interface radically alters to optimize for the platform's environment, changing the content and navigation layout to fit. The breakpoints chosen will depend on the needs of the particular design, but they generally fall into the categories of small, medium, and large, corresponding to smartphones, tablets, and desktop/laptop computers. Additional thought may also be given on the small and medium breakpoints to landscape or portrait orientation. Finally, an outlier breakpoint for larger screens (larger computer monitors and television sets) might also be considered, but as yet there is little evidence to support that this is a growing target audience. The main user experience concern would be in making the interface larger proportionally to account for users who may be sitting further from the screen. As yet, web surfing from the couch has not gained much popularity, and most users with larger computer monitors are still sitting close to their machines and do not need to have the interface be larger than if they were using a smaller monitor.

Fluid Grid

Between breakpoints, responsive web design uses a fluid grid with columns that expand, contract, or collapse to meet the specific dimensions of the screen. This means that the exact width of the display area may change, either due to the limitations of a particular device or the user preferences. The fluid grid is especially important for adapting the design to the screen width to allow for smaller differences between different device widths that do not require dramatic changes to the interface. Fluid grids require that dimensions use relative widths such as ems (em) or percents (%) rather than absolute units like points or pixels.

Relative Image Sizes

Relative image sizes will proportionally scale images to the optimal screen size. One technique is to provide different versions of the image that are pre-scaled and thus allow for smaller file sizes to be deployed to smaller devices, which are generally on slower networks or where users are charged by the amount of data they are downloading. However, this technique is still not perfected, with different solutions offering different pros and cons. There is also currently an update to the HTML specification to include conditional images for media queries, but wide-scale adaption of this is several years away.