"Responsive Web Design" as its name suggests is the concept of "Responsive Design" adapted to the Web. It is sometimes shortened by the term "RWD" or simply by "Responsive". (People usually ask "is this website responsive?") And, in ideally, any website that's going live should be responsive as it has gradually become very vital with the rise of mobile devices.
Photo imported from Unsplash
The truth is that Responsive Web Design is only one of the many concepts applied to a website to make it "pleasantly usable" on mobile while knowing that it is not limited to mobile phones and that it is worth just as well for:
- ► a tablet,
- ► a phablet (intermediate terminal located between the smartphone and the tablet),
- ► a computer and all its types of screens,
- ► a modern television,
- ► a car dashboard,
- ► a portable game console, …and pretty much any device capable of viewing a website through a web browser. In addition to the fact that Responsive Web Design therefore does not necessarily mean "mobile version", which opens the door for concepts like "Adaptive Web Design".
Adaptive Web Design
The idea behind this term is that the user interface of a website is different depending on the device that requests the web page. So for example, if I request a map on computer, the page will load a Google Maps frame, but if I were to make the same request on mobile, it might show the map's link instead. This happens for different reasons which are mostly quality of life adjustments. A mobile doesn't necessarily work the same as a computer, but it also is usually less powerful in terms of specs.
This concept is therefore based on a functional (and therefore visual) design adapted to the user's device. The most extreme case of this concept could be to offer not only adapted functionalities but a complete dedicated site (a computer version site at one address, a mobile version site at another).
Responsive Web Design
The one-size fits all term that is the most popular.
I will start with an example for this one: A 4 large column flex box display on the big screen will boil down to 2 elements on top of the remaining two as a grid display on mobile. It is therefore quite possible that with the same device, depending whether it displays the page in portrait or landscape mode, the rendering is different.
Desktop First
This concept did not have a name before the advent of the concept of "Mobile First" but it simply refers to a site that was created to display on a computer in the first place. It is only then that visual gaps are added for the tablet and mobile versions.
Mobile First
This is the closest approach to the original idea of "Responsive Web Design" allowing Responsive display from small screens to very large screens. This approach involves first thinking of the site and design on a small device like mobiles (hence the name) and then scaling up the design to larger devices.
This approach, in addition to allowing infinite responsiveness, also helps ensure that the smallest devices load the least amount of resources. It is the recommended and more practical way of going about making a website.