| Responsive Web Design (RWD) | Adaptive Web Design (ADW) |
| Responsive web design (RWD) or responsive design is an approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. | Adaptive web design (AWD) promotes the creation of multiple versions of a web page to better fit the user’s device, as opposed to a single static page which loads (and looks) the same on all devices or a single page which reorders and resizes content responsively based on the device/screen size/browser of the user. |
I believe that responsive design is better than adaptive, because working with responsive design is easier and more convenient since it itself adapts to the size of the screen.
What is a responsive website?
It is a website that automatically adapts to the different screen sizes of the devices on which it is displayed. It uses web design techniques such as responsive CSS.
Mobile responsive website.
It is a website designed and developed to adapt effectively to various mobile devices such as smartphones and tablets.
Elements of RWD:
Fluid Grid
It is a layout that uses relative units (such as percentage) instead of fixed units (such as pixels) to determine the width and placement of elements on a web page.
For example:
img { width: 100%; }
Flexible Media
Used to make your website look great in different sizes and resolutions. To make images flexible, you can set their maximum width to 100% of the container they’re in.
For example:
img { max-width: 100%; }
Media Queries
It is the basis of responsive web design, allowing different CSS rules to be applied depending on the characteristics of the user’s device or browser.
For example:
@media (max-width: 600px){ .nav{ display: none; } }
Responsive Web Design
To create a responsive website, you need to add the html tag:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Responsive website: https://antonbuivol22.thkit.ee/RWD/index.html
Adaptive website: https://antonbuivol22.thkit.ee/AWD/index2.html