The fundamentals of Responsive Web Design

I. Introduction ▲

Let us take two simple examples. The first could be those windows which opacify according to the external luminosity. Or the mirror walls where the closer we get, the more they seem to be distorted. In short, what architects seek in this movement is to overcome / abstract from the inherent constraints linked to the various supports. In the world of architecture, we can affirm that these supports are truly multiple and numerous.

Image not available
By a simple play of light, this building seems to have a different structure. Source:
Responsive Web Design was born, because we are increasingly confronted with the same problems as architects: adapting to the supports.

Instead, we used to have only one or two browsers and screen sizes varied little. Now we have a multitude of browsers and a large number of resolutions (ranging from 240×320 to 2515×1886 or more). But also the media: we can access the Internet from our classical desktop computers, but also via smartphones, tablets, etc. However, we know from the latter that their way of displaying a website differs from that of a desktop computer.

Image not available
The Web at the moment. Source:
And all that is what we have now. We start slowly to access the Internet via televisions (often through consoles, or boxes). Prototypes are beginning to appear, with Internet on car radios, watches, cars, refrigerators … In short, a new world where we will have to adapt ourselves.

Image not available
The Web of tomorrow. Source:
II. The three notions of Responsive Web Design ▲

To make a Web application that is Responsive Web Design, we need to establish the following three points:

a display grid that is flexible:
in other words, a template that does not depend on a minimum, maximum resolution;
flexible media:
namely, to ensure that my images, videos (if necessary), do not go beyond the scope of our grid / template;
a set of CSS rules based on Media Queries:
the principle: put conditions on the display to show / hide or even change the rendering of our web application.
If we make an analogy with architecture, the last three points represent our tools. As far as our materials are concerned, this will correspond to our browsers. Then some materials are better than others. For example, the shabby wood IE6 is less robust than reinforced concrete Chrome. Our tools, however good they may be, will not always apply easily. Because a false idea exists and resists: it is not possible to make “Responsive Web Design” on old browsers.

It is fortunately possible to adapt to achieve this. Nevertheless, the cost will be (inevitably) more important and the use of JavaScript frameworks / polyfills (JavaScript code to fill a gap in HTML5 / CSS3) will be necessary. We will see some of them throughout the article.