What are responsive and adaptive websites?

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	Responds to all screen resolutions, whilst holding consistency. Can be efficiently managed, with a single set of hyperlinks. Increased visibility in search engines.	Resolutions may lead to site distortion. Takes longer to create. May not be as cost effective in certain circumstances.
Adaptive Website Design	Pixel perfect control Every relevant resolution designed for. Directed towards desktop computers, tablets and smart phones	May lack consistency and flexibility across platforms. May suffer with layout from design choices and browsers May not be extensive testing across obscure platforms

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://www.webdesignerdepot.com/2014/05/responsive-vs-adaptive-webdesign-which-is-best-for-you/

• 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/