Responsive vs. Adaptive Website Design

Written by
Time to read: 2 min, 15 sec

For those of you in the web design industry, you know exactly what this post will be about before you even read it. If you haven’t heard of responsive vs. adaptive design, let me break it down for you.

Adaptive Design: In a nutshell, adaptive design typically involves detecting or ‘sniffing’ to see if the browser is from a mobile device, and if so, make the necessary adjustments. There are two forms of adaptive design: Client side and server side. Client side relies on Javascript to alter the website per the device. Server side detects through server side plugins and custom user agent detection.

Responsive Design: The approach uses CSS media queries to modify the presentation of a website based on the size of the device’s display. Responsive websites use one template which makes the transition from mobile to desktop much more seamless. You are 100% covered in all devices and screen sizes with this method. There are a few times with adaptive where sniffing fails.

What about SEO

In terms of SEO, Google has been known to muddy things up a bit. They have offered contradictory mobile advice, to put it bluntly. Pierre Far, Google Webmaster Trends Analyst, announced clear guidelines and recommendations on mobile SEO. Google is an advocate of using a responsive design. If you use any form of adaptive design Google asks you to take certain steps to let them know when you are using user agent detection and device specific HTML.

Other important considerations

We like to lean towards responsive. It is typically more budget friendly and much easier to deploy since we usually are redesigning the site anyways. Keep in mind you can always turn a non-responsive site into a responsive site by adjusting some HTML and CSS. It makes a smooth transition from device to desktop and has produced the best results initially with our clients.

If you really want a high performing mobile experience, and the site really doesn’t need a design overhaul, and you have the budget, I would recommend considering adaptive design. You can totally revamp or change the mobile experience and have everything load super fast in the process. This process takes a lot of effort and nerdiness to do it 100 percent properly.

Got anything else to help show the difference between the two?

Of course. We found this great infographic from Skyrocket and Visual.ly.

resp-vs-adapt

What is your favorite? Why? Please let us know in the comments. 

Written by Ryan Boog

Ryan Boog

I am the CEO of Happy Dog Web Productions. I look forward to taking web, mobile design and digital marketing to the next level with Happy Dog. Follow Happy Dog at @hdwebpros or me personally at @ryanboog. Are you a fellow Google nut? Add me to your circle.

Have a suggestion?

We'd like to hear it. Drop us a line

Email us a suggestion

Like what you read?