01384 487 800
support@freecom.net
Customer Area
my.freecom.net LoginWebmail Loginfirst4apps LoginMicrosoft 365 LoginRemote Support
  • Home
  • Online Digital Services
    • Creative Website Design
    • Simple Website Hosting
    • Website Security
    • Search Engine Optimisation
    • Bespoke Development
    • Creative Design FAQ’s
  • Domain Names
  • Microsoft 365
  • Support
  • Contact Us
Product has been added to your basket.
Login
my.freecom.net LoginWebmail Loginfirst4apps LoginMicrosoft 365 LoginRemote Support

The Difference Between Adaptive Design And Responsive Design

Posted on 4 January 2021
Web Design West Midlands - Freecom

Google outlines in its quality guidelines for building smartphone-optimized websites 3 configurations which they recommend.

1. Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.

2. Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device.

3. Sites that have separate mobile and desktop URLs.

We have all jumped on the responsive design bandwagon and have also been creating separate URL mobile sites for years. Its the second option, dynamic serving or Adaptive Design which is just starting to be talked about in Web Design & Development circles.

Users don’t care how you give them the information as long as it’s accessible on a computer, their phone or any device capable of viewing it on.

Adaptive Vs. Responsive What’s The Difference?

Adaptive web design – Coined and explained by Aaron Gustafson, Adaptive Web Design Crafting Rich Experiences with Progressive Enhancement is a simple set of design methods that concentrate on the user experience of a site on devices rather than the browser itself. Its all about layering your design through defined layout sizes, CSS and JavaScript allowing the user to have the best experience with the technology they are equipped with. This is called Progressive enhancement.

It allows the user to have as much capability as the device will allow them to use. It’s about form and functionality all in one.

As similar as they may seem they actually are quite different from a user experience point of view and the way they serve up content to different devices.

Both have defined layouts for different resolutions. With responsive, it doesn’t matter what device you are on, the queue point to display the different optimized layout of the same HTML is dependent on screen width. With adaptive, the server sends a message to Googlebot-Mobile (or any other search engine bot) using the Vary HTTP header. This message will tell the bots which separate optimized variation of the sites HTML to display depending on different factors such as the device or OS. So when using a Windows OS, you will be scrolling left to right through the headlines or up and down; using a MAC OS.

Responsive is relying on fluid and flexible grids giving the user a single experience across multiple devices. This is great for simplistic sites but what happens when all your conversion points have reconfigured to the bottom of the page

What happens to my online media buy?

Adaptive design allows you to monetize mobile ads and offer up Geo-specific information. This is a plus for marketers and their targeted media buys.

Performance Benefits

The biggest downside to Responsive design is the performance implications that come with serving the same content scaled for mobile devices. When dealing with images, designers and developers are struggling to implement concrete solutions on how to handle image optimization for experiences on a large desktop screen vs. a small mobile device. Serving the same hi-res image scaled down in size as the device gets smaller is not optimal and requesting a new image for each layout causes too many HTTP requests.

With adaptive, designers and developers have complete control over what content will be served up when. Think of it as serving completely different websites depending on which device the user is on. This means that all the content, functionality and layout can be customized and optimized for that particular device.

I’m Developing A Mobile Site, Which Implementation Do I Choose?

With all the facts on the table about the pros and cons between responsive vs. adaptive as well as good old separate URL websites the decision on which implementation to choose still might not be clear. The answer of course is it depends! Googles preferred method is a responsive design; this is because they have no extra URLs the need to crawl. Google just looks for the rel canonical and rel alternate markup and they are happy. But what if my users require a completely different experience on mobile than on a desktop? If my company is an insurance claims organization my mobile site could be specifically developed so users can submit a claim quickly and easily right from the road if they get in a car accident. This goal would easily be achieved using a separate URL implementation. The adaptive design would be beneficial for mobile sites targeting different regions as the content, colour scheme etc. can be swapped out.

What it comes down to is that all 3 implementations are correct when done properly. It is up to the goals of your business which approach is right for you.

This post was co-authored with web design specialist Alexis Elliot.

 

/images/doyouneedhelp.png

Check out some of our other top blogs here:

How To Double You Business Page Likes From Companies On Facebook In 1 Week
How SEO Services Can Give Your Business A Strong Online Presence
6 Ways to Tell if Your Website is Healthy or Terminal
Previous Post
How to Track Brand Mentions on Social & The Web
Next Post
Want To Use Twitters New Voice Tweets Feature? Here Are 5 Top Tips

Recent Posts

  • How To Create A Website 8 September 2021
  • 5 Reasons Your Website Needs An SSL 21 June 2021
  • The Sales Sweet Spot Four Stages Of The Content Marketing Sales Funnel 4 January 2021
  • Drive Real Footfall To Your Business With Local SEO 4 January 2021
  • 6 Security Tips To Protect Your Website From Hackers 4 January 2021

Popular Tags

blogs business business growth business help business leads business tips business website ecommerce facebook food google search help with sales lead generation leads more clients more customers more leads more sales plugins responsive web design sales sales help sales tips Search Engine Optimisation SEO seo help seo support seo tips skype social media tips webdesign web design web design tips website design website design tips website help website optimisation website security website support Website Tips website traffic wordpress wordpress help wordpress support Zoom

Contact Us

01384 487 800
support@freecom.net
Cradley Enterprise Centre, Maypole Fields, Halesowen. B63 2QB

Social Media

Online Digital Services

  • Creative Website Design
  • Simple Website Hosting
  • Website Security
  • Search Engine Optimisation (SEO)
  • Bespoke Development
  • Domain Names
  • Microsoft 365

Additional Services

  • Hosted Email
  • Superfast Fibre Broadband

Useful Information

  • Abuse
  • Complaints
  • Privacy Policy
  • Cookie Policy
  • Code of Practice
  • Terms of Sale
  • Terms and Conditions
  • Marketing Opt Out
  • Hosted Server SLA
Microsoft
Nominet

© 2021 Freecom Internet Services Limited

Company Reg No: 0665746461

VAT Reg No: GB 978 6092 61

Cookie Notice
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits.
By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
Cookie SettingsAccept All
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
_GRECAPTCHA5 months 27 daysThis cookie is set by the Google recaptcha service to identify bots to protect the website against malicious spam attacks.
cookielawinfo-checkbox-advertisement1 yearSet by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Advertisement" category .
CookieLawInfoConsent1 yearRecords the default button state of the corresponding category & the status of CCPA. It works only in coordination with the primary cookie.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
CookieDurationDescription
_ga2 yearsThe _ga cookie, installed by Google Analytics, calculates visitor, session and campaign data and also keeps track of site usage for the site's analytics report. The cookie stores information anonymously and assigns a randomly generated number to recognize unique visitors.
_gat_gtag_UA_369221_61 minuteSet by Google to distinguish users.
_gcl_au3 monthsProvided by Google Tag Manager to experiment advertisement efficiency of websites using their services.
_gid1 dayInstalled by Google Analytics, _gid cookie stores information on how visitors use a website, while also creating an analytics report of the website's performance. Some of the data that are collected include the number of visitors, their source, and the pages they visit anonymously.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
CookieDurationDescription
_fbp3 monthsThis cookie is set by Facebook to display advertisements when either on Facebook or on a digital platform powered by Facebook advertising, after visiting the website.
fr3 monthsFacebook sets this cookie to show relevant advertisements to users by tracking user behaviour across the web, on sites that have Facebook pixel or Facebook social plugin.
test_cookie15 minutesThe test_cookie is set by doubleclick.net and is used to determine if the user's browser supports cookies.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT
Powered by CookieYes Logo
Open toolbar

Accessibility Tools

  • Increase Text
  • Decrease Text
  • Grayscale
  • High Contrast
  • Negative Contrast
  • Light Background
  • Links Underline
  • Readable Font
  • Reset