Guy Podjarny - Responsive & Fast: Implementing High-Performance Responsive Design

In May 2010, Ethan Marcotte proposed an alternate approach to dealing with mobile browsing Responsive Web Design .

Conceptually, Responsive Web Design (RWD) means having a single website that responds to the current device, and changes its design accordingly. The use of a single URL, also known as a One Web approach, makes sharing links across devices easier, saves time by removing the need to redirect users from one domain to another, and is likely to improve search engine ranking because the single URL fits Googles Dynamic Delivery recommendation. The adaptation means the web page would modify its design and interaction model to match the current device, striving to achieve an optimal user experience for a specific device.

To achieve this flexibility, Responsive Web Design relies on three primary building blocks:

Implementing Fluid Grids means replacing any fixed size element on the page with a percentage, making its dimensions relative to its parent element andeventuallythe display size itself. For instance, instead of saying that the main content column is 512 px wide, say that its 50% of its parent container. On a 1024x768 display, the resulting size will be the same, but on a smaller screen, the column will adapt to take up half the screen width, implicitly improving support for different display sizes.

Flexible Images is essentially the application of Fluid Grids to images, specifying their size as a percentage of their parent container. Note that this means the page needs to explicitly state the (relative) size of every image, using style rules for the image itself or a parent container. Responsive pages cannot rely on the actual dimensions of a downloaded image to determine how much space it will take on a page (a limitation that helps performance, as it avoids unnecessary reflows).

Lastly, Media Queries is a styling capability introduced with CSS3 to extend the simpler media types. These queries allow websites to set different style rules for different display properties (or any media feature). For instance, a three-column layout is common on desktop screens, but on a 320-pixel-wide smartphone screen, each column becomes too small to use. A Media Query triggers if the window is below (or above) a certain width, and overrides the styling to use a single column instead. The transition points specified by the Media Queries are known as breakpoints.

These three building blocks, when combined and well implemented, enable powerful web pages that seamlessly work on many devices and appear as though they were written exclusively for it. This helps battle device fragmentation, and even addresses devices that did not exist when the website was created, making RWD Future Friendly.

Its important to notice two properties that these three techniques share.

First, theyre all client-side techniques, applied in the browser. This trait is expected, as RWD aims to eliminate the need for server-side device detection, replacing it with client-side feature detection (such as display size). Nevertheless, it has significant implications, as well soon see.

Secondly, all three techniques focus solely on styling. They dictate the way a page is displayed to a user and how users interact with it, but not the parsing and processing of a page, nor how its resources are downloaded. This property matches the problem RWD set out to addressthe design of the page, not the underlying mechanisms.