Responsive Website
a modern web design approach that allows websites and pages to render (or display) on all devices and screen sizes by automatically adapting to the screen
Responsive Web Design
is about creating web pages that look good on all devices
Responsive Web Design
- Fluid networks: website elements are measured in relative units, such as percentages, rather than fixed units, such as pixels.
- Common code base: Responsive design typically involves a common code base that responds to different conditions using CSS media queries.
- Flexible images: Images are also measured in relative units to ensure that they scale proportionally with the rest of the content.
Adaptive Web Design
- Multiple fixed layouts: adaptive design, on the other hand, involves the creation of multiple fixed layouts designed for specific screen sizes or devices. Instead of one flexible layout, separate layouts are created for different breakpoints.
- Improved performance: Adaptive design can potentially deliver improved performance on specific devices, as the design is tailored to each class of device.
| Responsive Web Design | Adaptive Web Design | |
| Flexibility | More flexible as it can dynamically adapt to any screen size or device. | Less flexible as it relies on a predefined layout for specific breakpoints. |
| Development Time | In general, it requires less development time because it covers a single code base. | May require more development time as several designs need to be created. |
| Maintenance | Easier to maintain as there is only one code base to update. | May require more maintenance as each design needs to be renewed separately. |
| User Experience | Provides a more consistent user experience across devices. | Provides a more consistent user experience across devices. |
I think I’m closer and clearer to using Responsive Web Design