A responsive web design (RWD), or adaptive web design, is a concept of web design that includes various principles and technologies in which a website is designed to offer the visitor an optimal consulting experience, easy reading and navigation. The user can view the same website through a wide range of devices (computer monitors, smartphones, tablets, TV, etc.) with the same visual comfort and without the need for horizontal scrolling or zooming/back on touch devices including manipulations that can sometimes degrade the user experience.
The concept of adaptive web rethinks how to design web browsing path, since it is not to design courses as there are terminal family but to design a single self-adaptive interface. Thus, the sources of information and technical bases are not duplicated. This creates economies of scale in the design and maintenance of web sites with this type of design.
A website designed on the RWD principle uses CSS3 media queries technology, an extension of the @media rule to adapt the layout to the consulting environment through a fluid grid in which stuck the different contents of page.
Media queries allow the page to use different CSS rules based on the characteristics of the consultation terminal. Most commonly it is the rules applied according to the width of the terminal. These widths are called “break points” and correspond to a need to change the layout from a certain critical threshold for facilitating navigation and rendering of content.
Fluid grid concept is a relative sizing of the various blocks of the page. Relative units as percentages or quads are quite suitable for this, much more than the absolute units such as pixels or points.
The images with a need for flexibility are also resized in relative unit to prevent a possible overflow of content outside of its container element.
The concept of RWD, as described by Ethan Marcotte, is based on three technical elements listed above.
If media queries are often put forward as the main technical element of Responsive Web Design for E. Marcotte they only serve to make some changes in the interface when using fluid grid does not solve all the problems related to the adaptability of the product.
This “sacred trinity”, as called by Raphael Goetter, is sometimes criticized, some considering that the fluid grid is not necessary to have a fully adaptive product.
To facilitate the creation of adaptive models for the web, and save time, there are many framework in responsive CSS (Bootstrap, Foundation, Gumby, Skeleton …).