With the rise of tablets and smartphones there’s also been the rise of buggy mobile websites, unresponsive buttons and pages that just won’t load on tablets. With such a variety of browsers and products comes concerned website owners, who just don’t know the best solution for an easy-to-use interface.
Responsive Website Design, (RWD) and Adaptive Website Design, (AWD) share the goal of solving these problems, but they use very different approaches.
Responsive website design
Responsive websites use CSS3 to create a website that responds to the device it’s on. This gives the site the ability to adapt, with text and images resizing to fit the screen. These websites are great examples of responsive design:
- https://morehazards.com
- https://thisismadebyhand.com/
- This one! Try resizing the window and see hot the site shifts and moves to respond.
Adaptive website design
Adaptive websites feature a series of static layouts, which are based on breakpoints for different screens. Adaptive websites do not respond fluidly, like responsive websites, but detects the device prior to loading and calls up the correct resolution. The following links are examples of adaptive websites:
- https://ia.net/
- https://teixido.co/
| Positives | Negatives | |
|---|---|---|
| Responsive Website Design |
|
|
| Adaptive Website Design |
|
|
So what should we take away from this? Well, responsive website design may lend itself to a less formal and minimalistic format, perhaps with a focus on arts or retail, whereas adaptive design may be more applicable to a more formal site, where a customer’s interests may lie in text-dense or informative articles.
Using these methods will ensure that you can rely on your site being visited and used effectively across devices and screen resolutions, whilst retaining customer satisfaction with a positive experience for user.
If you’d like to learn more, check out these sites:
- https://blog.catchpoint.com/2014/07/16/adaptive-vs-responsive-web-design-quantifying-difference/
- https://blog.wphub.com/pros-cons-responsive-adaptive-designs/
- https://www.webdesignerdepot.com/2014/05/responsive-vs-adaptive-webdesign-which-is-best-for-you/
- https://www.mediumwell.com/responsive-adaptive-mobile/
- https://blog.catchpoint.com/2014/06/02/adaptive-vs-responsive-web-design-right-site/
- https://managewp.com/5-reasons-why-responsive-design-is-not-worth-it
- https://www.isadoradesign.com/blog/benefits-of-responsive-web-design/
