What is Responsive Web Design?

Draft definition

Responsive Web design is a web design approach that aims at developing websites that offer an optimal reading and navigation experience for the user, regardless of its range of devices (mobile phones, tablets, readers, desktop computer).

A successful "Responsive" user experience involves minimal resizing (zooming), cropping, and multidirectional page scrolling.

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

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

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

A dedicated website

mobile web

A dedicated site project consists of designing two or more different entities depending on the intended device: a main site, a smartphone site, a tablet site, etc.

Typically, an initial server-side test detects the device type and returns to a dedicated web address (eg m.monsite.com).

The advantages of dedicated websites are:

The possibility of precisely refining the structure of the site and its contents in relation to the device used
The ability to target and adapt to a variety of features (including touch)
Can be a "quick" alternative, waiting for a complete (and responsive) redesign of its website
But a dedicated site is not free from disadvantages:

The duplicate content
Maintenance of multiple site versions and multiple web addresses (less easily indexable by a search engine)
UA sniffing often biased or not up to date
A native application A native application is a product developed specifically in various "languages" (iOS, Android, WindowsPhone) and which downloads and refers within a "Store" (AppStore, Google Play, Windows store). This gives it some advantages: Easy support for native functionality (touch, accelerometer, notifications, GPS, etc.) A possible installation on its device A total "acclimatization" to the device (ergonomics, performance, pixel density) The presence of his brand on the AppStore (to name but him) and to be able to have a "shortcut" on the smartphone of the user ... But also some disadvantages: A specific development in several languages ​​(specific to iOS, Android, WindowsPhone, etc.) The cost of development, licensing, and maintenance for each operating system Content not indexable by a standard web search engine Updating the application requires user action
A responsive version

At a time when hundreds of different screen sizes and formats are connected at any time, the Responsive Web design method appears as the "ease solution" under its main objective:

adapt to any type of device in a way that is transparent to the user
Costs and delays generally lower than the techniques cited above
Easier project maintenance (a single style sheet, a single HTML file, etc.)
A transparent update and a multi-platform deployment
The Responsive can be considered after the initial design of the site (although this is not ideal)
One of the undeniable advantages for some time is that Google puts forward "mobile-friendly" sites within its search results:
The disadvantages are not, however, Good technical knowledge and constant technological monitoring are essential It is necessary to plan numerous and varied tests throughout the project ("device labs", simulators) It is difficult to bypass the ergonomic and performance limits of web browsers Making responsive is ... longer than doing nothing (25% of overtime) In the end, Responsive Web design is only one means among others to achieve its objectives but should not be considered the only eventuality nor as a "magic solution" to all the problems. Moreover, it is often the case that a combination of different methods is used: for example, a site that is both dedicated and responsive, or a responsive site packed with certain server-side detections (this is called RESS) and so on. The site mediaqueri.es 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 synonymous with "adaptive web site".

Technically, Static, Liquid, Adaptive and Responsive web sites should be distinguished:

A "Static" design

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

A "Fluid" design

A liquid website is a web site where all column widths are expressed in variable units (percentages, em, vw, etc.) and which usually adapts automatically to the window size, to a certain extent.

An "Adaptive" design

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

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

A "Responsive" design

A Responsive website is an enhancement of the liquid design associated with CSS3 Media Queries methods that allow you to modify styles (re-organization of the page for example) according to certain criteria, to adapt completely to the screen size, whatever the breaking point.

and technically, the RWD implies what?

Since its first designation in 2010, Responsive Web design has evolved somewhat. It currently requires - in general - the following technologies and methods:

A fluid grid, in which the widths of the structural elements are freed from the pixel units
Images, media and flexible content that allow them not to "overwhelm" their parent when they are restricted
An adaptation of the display to the terminal viewport
CSS3 Media Queries to apply different CSS style rules depending on device size, orientation, or ratio
Possibly client-side conditional adaptations (menu navigation), 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 here in particular to speed up the display of certain components or resources.
In the end, Responsive Web design is not that easy!