Adaptive vs. Responsive Design

Resources

Check out Google’s “Building Smartphone-Optimized Websites”

Transcript

Adaptive and responsive – two of the newer buzzwords in the automotive website space.

What are the differences? How can you tell which is which? Here’s the lowdown…

Adaptive is a website design choice that makes assumptions at the server level based on the “user agent. In other words there is a different page served up depending on the visitor’s device. For example, an i-phone will get served a different page then a desktop computer.

I started to brainstorm the advantages of Adaptive over responsive for automotive websites. I then had a realization that every practical advantage is possible by using responsive web design. That’s not to say adaptive is bad, by any means. Not having a mobile website is bad. Adaptive and responsive design are both two great steps forward.

But, yet.. there are some disadvantages to adaptive web design:

1. Google has to crawl a second set of code.
2. Adaptive is more work. You usually have to create many pages in order for adaptive to work when building custom landing pages. One for mobile, tablet, and desktop.
3. Google calls user agent detection “an error-prone technique” which is what Adaptive design uses.
4. Risk (albeit low) of Link dilution since there are two separate URL’s sharing the same content.

So on to responsive. Responsive design happens in the browser vs. the server, based on screen size. With a Responsive website it doesn’t matter what the device is. Whether that be a mobile, tablet, desktop video game console or even a watch. Responsive websites respond based the web browser’s size.

Advantages of RWD:

1. It’s Google’s recommended method
2. Responsive has one set… and can only have one set of code. But yet, there are elements that may, and can appear different on mobile and not desktop. This fact is important to know. For example, we may choose to show a different vehicle banner on mobile because the desktop banner is not ideal for a mobile visitor. The code is there for both which is evident if you expand and contract the browser.
3. The URL structure is the same on every mobile and desktop which helps Google’s algorithms assign the indexing properties for the content.
4. In almost every case, RWD makes it easier to add custom pages. This equates to less errors and work for your team.

Myth:

1. Can’t show all the CTA’s on mobile – you can show any CTA- if there are some missing that may be a design choice.
2. The second myth is that Responsive is slower – like anything that relies on code. If its not written efficient it can be slower but so can adaptive. Just because its responsive doesn’t mean its slower.

How do you know if your website is responsive?
YOU can drag your browser’s corners to emulate different screen sizes. If that content starts to stack and continues to look good as the screen gets smaller, chances are you have responsive design. You can also check your mobile phone and see if the URL structure remains the same. If it does then it’s most likely responsive. If your website has an m dot or an alternative subdomain then it’s not responsive.

Below is also a link to an article from Google describing and recommending responsive design:
Building Smartphone-Optimized Websites

If you have any questions please feel free to reach out at questions@dealerinspire.com