Responsive & Mobile Design

RWD allows easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors). A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule.

• The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
• Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
• Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
• Server-side components (RESS) in conjunction with client-side ones such as media queries can produce faster-loading sites for access over cellular networks and also deliver richer functionality/usability avoiding some of the pitfalls of device-side-only solutions.

Related Concepts

Audience and Device Aware (ADA)

Audience and Device Aware is an approach aimed at ensuring that a site is optimised to deliver what a user wants and that works effectively on the device being used to access the site. Unlike Responsive web design (RWD), which crafts a site visually for a range of devices, ADA aims to reflect the many different elements that enhance and impact on the performance and usability of a site. The predominant application for the ADA approach is for mobile and smaller screen devices. The principle truly sees the adoption of a “mobile first” strategy and focuses on the performance of a site and value that it delivers to a user and the business.

Mobile First

“Mobile first”, unobtrusive JavaScript, and progressive enhancement (strategies for when a new site design is being considered) are related concepts that predated RWD: browsers of basic mobile phones do not understand JavaScript or media queries, so the recommended practice is to create a basic web site, and enhance it for smart phones and PCs—rather than try graceful degradation to make a complex, image-heavy site work on the most basic mobile phones.