Definition

Responsive Web design is a Web design approach that aims to develop sites offering an optimal reading and browsing experience for the user regardless of their range of device (mobile phones, tablets, e-readers, monitors). desktop computer).

A successful "Responsive" user experience involves minimal resizing (zooming), cropping, and multi-directional scrolling of pages.

The term "Responsive Web design" was introduced by Ethan Marcotte in an article in A List Apart published in May 2010.
He will later describe his theory and practice of responsive in his book "Responsive Web Design" published in 2011. -this is limited to client-side adaptations (flexible grids in percentages, fluid images and CSS3 Media Queries).

Dedicated site, application or responsive?

We currently have three ways to convey web content to connected devices: a dedicated site , a native application and a responsive version of the website.

Be aware that each solution has advantages and disadvantages: depending on your needs and constraints (including budget and deadlines), it may be perfectly appropriate to opt for one or the other.

A dedicated site

A dedicated site project consists of designing two or more different entities depending on the targeted device: a main site, a site for smartphones, a site for tablets, etc.

Generally, an initial server-side test detects the type of device and redirects to a dedicated web address ( m.monsite.com for example).

The advantages of dedicated websites are:

• The possibility of precisely refining the structure of the site and its contents with regard to the device used
• The ability to target and adapt to various features (including touch)
• Can be a "quick" alternative, while waiting for a complete (and responsive) redesign of its website

But a dedicated site is not free of disadvantages:

• Duplicate content
• Maintenance of several site versions and several web addresses (less easily indexable by a search engine)
• Server-side detection ("UA sniffing") often biased or out of date

A native app

A native application is a product specifically developed in various "languages" (iOS, Android, WindowsPhone) and which is downloaded and referenced within a "Store" (AppStore, Google Play, Windows store).

This gives it certain advantages:

• Easy support for native features (touch, accelerometer, notifications, GPS, etc.)
• Possible installation on your device
• Total "acclimatization" to the device (ergonomics, performance, pixel density)
• The presence of its brand on the AppStore (to name but one) and the ability to have a "shortcut" on the user's smartphone

But also some disadvantages:

• Specific development in several languages ​​(specific to iOS, Android, WindowsPhone, etc.)
• The cost of development, licensing, and maintenance for each operating system
• Content that cannot be indexed by a classic web search engine
• Application update requires user action

A responsive version

At a time when hundreds of different screen sizes and formats are connected at all times, the Responsive Web design method appears to be the "easy solution" by virtue of its main objective:  to adapt to any type of device transparently for the user

• Costs and times generally lower than the techniques mentioned above
• Easy project maintenance (one style sheet, one HTML file, etc.)
• Seamless update and cross-platform deployment
• Responsive can be considered after initial site design (although not ideal)

One of the undeniable advantages for some time now is that Google has been promoting "mobile-friendly" sites within its search results:

However, the disadvantages are not zero:

• Good technical knowledge, and a constant technological watch, are essential
• It is necessary to plan numerous and varied tests throughout the project ("device labs", simulators)
• It is difficult to circumvent the ergonomic and performance limits of web browsers
• Doing responsive is… longer than doing nothing (25% of the extra time)

In the end, Responsive Web design is only one way among others to achieve its objectives but should not be considered as the only possibility or as a "magic solution" to all problems.

Moreover, it is common for a combination of different methods to be used: for example a site that is both dedicated and responsive, or a responsive site with certain server-side detections (we then speak of RESS), etc.

The mediaqueri.es site is an excellent resource for discovering other responsive websites through a directory.

Responsive, Adaptive or Fluid?

In France, and according to Wikipedia , Responsive Web Design is a synonym for "adaptive website".

Technically, a distinction should be made between Static, Liquid, Adaptive and Responsive websites:

A "Static" design

A static (or fixed) design refers to fixed dimensions (eg 960px) regardless of the screen surface. The vast majority of websites were built on this basis before the arrival of Responsive Web Design in the 2010s.

A “Fluid” design

A Fluid (or "liquid") website is a website in which all column widths are expressed in variable units (percentages, em, vw, etc.) and which generally automatically adapts to the window size, up to to some extent.

An "Adaptive" design

An Adaptive design is an improvement of the static design: the width units are fixed, but different depending on the screen size, which is detected via CSS3 Media Queries.

Such a design only takes into account the main breakpoints (320px, 480px, 768px, 1024px, etc.) and adapts the template accordingly. In the end, we end up with as many fixed templates as breaking points.

A "Responsive" design

A Responsive website is an improvement of the liquid design associated with CSS3 Media Queries methods allowing to modify the styles (reorganization of the page for example) according to certain criteria, to adapt completely to the screen size, whatever be the breaking point.

In summary

The liquidapsive.com site offers visual testing of these different types of design.

And technically, what does RWD imply?

Since its first name in 2010, responsive web design has evolved somewhat. It currently requires - in general - the following technologies and methods:

• A fluid grid, where the widths of structural elements are stripped of pixel units
• Flexible images, media and content so they don't "overflow their parent" when the parent gets restricted
• An adaptation of the display to the Viewport of the terminal
• CSS3 Media Queries to apply different CSS style rules depending on the size, orientation or ratio of the device
• Possibly client-side conditional adaptations (navigation menu), based on JavaScript or jQuery
• A "Mobile First" and "Progressive enrichment" philosophy facilitating the accessibility, compatibility and performance of the pages produced
• More and more often parts detected and generated on the server side (RESS), again in particular to speed up the display of certain components or resources.

In the end, Responsive Web design is not that easy!