How Many Customers Are You Losing Due to Responsive Web Design?

adaptive vs responsive web design feature image

The increasing popularity of a variety of devices to access the internet—ranging from small handheld phones to tablets and laptops—have led web designers and marketers to work on approaches to make the devices more compatible with Internet usage. They are studying ease of scrolling and navigation, visual appeal, support of different screen sizes, richer experiences and faster page loads.

Adaptive Web Design (AWD) and Responsive Web Design (RWD) are different methods that arrive at the same solution. RWD is the hotter and more popular approach now, but before you decide to jump on the bandwagon, take a look at AWD. It may prove to be a better and more far-sighted approach for mobile web design.

At the heart of it, both AWD and RWD are two different ways of approaching the same goal: to create effective and impactful, functional and customized web design which can be easily visualized on any device. But as you read on, you will find that it may be the more complex and resource intensive AWD which may be a better option for designers in the long run.

The Difference Between RWD and AWD

Responsive Web Design

RWD is the popular design choice right now. It is a dynamic rendering of a web page based on fluid changes in layout according to the screen size and resolution. Thus, the design is responds to the screen size dynamically and instantly.

The images are flexible in size and the use of fluid grids is necessary. There are changes in the width of the elements in response to changing window sizes. This kind of web design makes use of queries to detect devices, so it is useful for advanced phones with certain operating systems versions.

Ethan Marcotte introduced this strategy. The basis behind it was the permanent state of impermanence in the web design world —the web design has to keep evolving and shaping itself in response to changes. Thus, the advantage of this design is this: the same design can be used for viewing the website on different devices. This change in design is made possible by changes in the width and number of columns for storing text (container fields) in the code for the web page.  RWD is a real-time, dynamic, changing web design.

An example of RWD is that used by Barnes and Ernst, debt management experts in the UK. As you can see [need figure reference, or move images closer], the content is configured keeping in mind the interests of desktop and mobile users. Because of the increase in mobile users who were accessing their website through their smart phones, the company introduced mobile-specific search advertising and subsequently mobile-optimized websites.

Their aim was to deliver the required information to customers in a speedy way, without pushing down too much information. Based on their long-term goals and requirements, they went with the RWD one-size-fits-all approach: a single platform for all devices. Through this approach, they were able to optimize their site experience without the hassle of creating multiple websites. The site makes use of the smart-phone technology (touch/swipe), JavaScript, fluid queries, and flexible queries.

Responsive web design on a desktop
Baines and Ernst responsive web design on a desktop
Responsive web design on mobile
Baines and Ernst responsive web design on mobile

Adaptive Web Design

AWD requires several different formats of the website — often different templates — to be made and kept ready for different devices, unlike RWD. The version of the website displayed to the viewer is based on several factors such as the location, kind of device and OS. AWD requires more up-front effort and development, but it offers a customized experience for mobile audiences. AWD is the better option for marketers who are into content-rich marketing and who need to deliver content of all kinds to their audience.

Avenue 32's adaptive web design on a desktop
Avenue 32’s adaptive web design on a desktop

Avenue 32, a top-notch luxury retail brand, has made use of AWD to design its websites suitable for smart phone and tablet. The use of AWD has helped the brand create a visually and functionally engaging and rich experience, which matches its desktop website, which is content-rich and engaging.

This creates an equally rich mobile experience, in which customers experience content from wherever they may be. When you compare the desktop and mobile versions of the website, you can see that the content is more or less the same, but has been arranged in a way best seen on a desktop or mobile screen.

Adaptive web design on mobile
Avenue 32’s adaptive web design on mobile

The URLs for both websites can be the same (dynamic serving) or through use of different URLs (mobile specific and desktop specific, for instance), so the website visitors see is determined by the kind of device and operating system being used. Use of predesigned and customized landing pages may save time and glitches, which may otherwise happen in a dynamic RWD system.

110 Point Ecommerce Checklist

Everyday Behavioral Sciences Webinar

Our Best Ideas for Ecommerce Websites

We assembled our Conversion Scientists in a room and asked them to list out what they consider testing when given an ecommerce website.

This is what they told us.


  • 110 ideas in 17 pages
  • Full color examples
  • From the home page to the cart.

Keep this resource on your desk always.

Why is AWD the Design Choice with the Advantage?

Use of AWD makes accessing Internet pages more efficient. Pages load much more quickly with AWD, which improves the user experience and has been proven to increase conversion rates. This is because only those files which are required are transferred from server to mobile device. Optimum media files can be chosen that are suitable for the device and browser. This is how AWD delivers specific user experiences. Unlike AWD, RWD is more limited in generating optimized user experiences.

Adaptive web design can be used for older mobile phones unlike responsive web design which needs the latest technology and recent phones plus use of CSS queries.  The reason AWD doesn’t need the latest technology is because it makes use of client or server side code to detect the devices. This is good for the lower-end phones and older generation mobile phones which are not CSS optimized and thus do not have the ability to understand media queries and translate them.

Why is it important for a website to be accessible on many generations of mobile technology?  Even if a company is located in an affluent part of the world where there is a rapid turnover in technology, huge parts of the global population – in Africa and Asia, for instance – do not have the financial means to have the newest smart phone.  You would be putting your company at risk of missing out on new markets that may want what you’re selling but can’t access it easily.

You can easily deliver content to low-end mobile phone users in these countries who have much lesser bandwidth, poorer batteries and possess less power by using AWD.  Adaptive means your marketing efforts lead to maximum inclusiveness.

Another advantage of AWD over RWD is that responsive web design may not be able to integrate all advertisements into every possible screen resolution as it dynamically adjusts itself.  This problem is less of an issue with AWD since advertisements of all kinds can be tailored into it.

One example of the power of AWD is in the way Future Insights website generates pages. As you can see, the best customized webpage shows up for each device.

Example of adaptive web design
Future Insights’ set of webpages

All you need to do is to make one master version of the website, which can be tailored to make many minor versions of it. Thus, AWD offers many advantages without the drawbacks of RWD. AWD’s emphasis is on the overall functionality of the device rather than just the design. Sites using AWD can be more user-focused for mobile devices.

If you dream of achieving wider mobile Internet reach, don’t jump on the responsive bandwagon with out taking a hard look at adaptive mobile design.

About the Author

Jacey Johnson HeadshotJacey Johnson has been an administrator in higher education for over 10 years and currently works with http://aussieessays.com/essay-writers/ as a academic counselor guiding students. Most of her experiences have been in the online teaching, curriculum development and academic counseling.

  • From my view, RWD applies for any device with any resolution, but AWD has default layouts which detects the device and apply that layout.

    • In fact, RWD is great for tablet support, we find. However, small screen devices need a more dedicated approach. The two can work together.

      • I agree. You can adopt a combination of both. We can take an AWD approach to serving up content & page elements (such as different navigation) but implement the design with RWD to adjust how the content is laid out, etc.

        • vicmaine

          I need this desperately, but how do you guys detect mobile vs desktop?

          I use media queries for width obviously for responsive, but have no idea where to start with AWD because I don’t know how to detect.

          In my (wordpress) fantasy-world I imagine something like:

          if is_mobile [ do this ]
          else
          if is_desktop [ do this ]

          • This is something I’ve never implemented, but have depended on the brilliance of coding brainiacs to handle. There are a number of solutions to be found with a search, however.

            I understand that this is not an exact science, so that may be one strike against AWD.

          • vicmaine

            Howdy sir, thanx for the reply, I did some lookin’ around after leaving that comment and found some pretty good stuff I think.

            Keep in mind I haven’t actually tried or tested any of these yet, just dropping them here as a good starting point for anyone else looking:

            ===========================

            1. This one is the first article I read. It informs us about a php script you can upload to your server and implement manually on your site, called “Mobile Detect”

            http://marketblog.envato.com/tips/detecting-mobile-devices-php/

            ===========================

            2. This one is the actual “Mobile Detect” website described in that article linked above. It has a more detailed example, AND the actual download link, but doesn’t explain itself as well as the article above does. This all looks pretty easy to implement, but possibly a bit messy.

            http://mobiledetect.net/

            ===========================

            3. This one is the official wordpress plugin that uses the “Mobile Detect” php plugin mentioned above (easier if you’re better with wordpress coding than you are with actual php coding).

            https://wordpress.org/plugins/wp-mobile-detect/faq/

            ===========================

            4. This is the one that looks most interesting to me.

            It too is a wordpress plugin that uses that same “Mobile Detect” php plugin mentioned above, but instead of having to alter a bunch of code in your wordpress template files, this one is a “theme switcher”.

            If it detects a mobile device, it switches from your default wordpress theme to your mobile wordpress theme.

            This might seem a bit daunting at first because you would have to create a new theme for yourself (ie, a mobile theme) but frankly, that sounds a lot easier to me potentially than trying to hack up your default theme with a bunch of conditional tags.

            Plus, theoretically, the mobile theme you’d be creating (since it’s a mobile theme) would probably be a pretty simple bare-bones type theme which shouldn’t take nearly as long to throw together as a full-blown traditional desktop theme would take.

            https://wordpress.org/plugins/any-mobile-theme-switcher/faq/

            ===========================

            5. And finally, it turns out that I wasn’t far off in my original comment.

            Apparently wordpress DOES have a native mobile detect function. I suggested “is_mobile” in my comment, but the actual wordpress function is “wp_is_mobile”.

            ie…. if wp_is_mobile (do this) else (do this).

            Prior to yesterday I would have been really excited to just hack up my template files using this native wordpress function without using any plugins, but now I think the “theme switcher” plugin mentioned above (#4) is a way way better simpler solution.

            That’s the one I’m gonna test first… I’ll try my best to remember to come back here and update you all with the results.

            ==================================================

            Conclusion:

            I’m really excited about this AWD/ReSS thing because (as I understand it) you can avoid making mobile users download tons of data they don’t need (and will never see anyway).

            With RWD using css media queries ie, .sidebar { display:none } mobile users don’t SEE your sidebar (for example) but they still have to download it.

            I’ve wanted a solution to this for a long time, so thanks to you and this post for spurring me to finally find it.

            ps. this is a great way to solve the problem of links being too close together on mobile too.

            vic maine

            Follow me @vix_marketing
            https://twitter.com/vix_marketing

            [+]

          • This could have been a blog post in and of itself. Thanks for doing the research. If you want to write this up, we’d be happy to post on the blog under your by line.

          • Wikipedia has an interesting entry in the AWD vs. RWD argument.

            “Mobile device detection is a key part of adaptive web design, also known as ReSS: “Responsive with elements of Server-Side”. In this paradigm, the customer might experience one of many possible responsive experiences depending on device type.”

            https://en.wikipedia.org/wiki/Mobile_device_detection

            The best implementation of a responsive + adaptive content management system is Unbounce.com. Design a page there and see how it mixes responsive and adaptive capabilities.

            http://www.unbounce.com

  • Danniella Cloud

    Thank you for sharing! These tips worth attention. I am not a guru in coding but it does not prevent me to create my website by this easy in use tool http://mobirise.net/ . I save my money and time. +I am sure customers will be attracted by my website design.

  • sharithurow

    I prefer adaptive web design, personally and professionally. When I look at context on the different devices, responsive seems to have a one-size-fits-all approach…and that principle doesn’t seem valid.

    Good explanation.

  • From design point of view, the AWD get more work and also the weight of the source package is high. The main advantage of the AWD is quick loading but design works takes longer.

    • By the time you’ve customized a Responsive Design to be effective, you’ve done just as much work as an AWD. Maybe more.

  • Aman Khani

    Great post .. Both RWD and AWD are important for good UX but we need to put more effort for AWD as it requires to have different templates for different platform but in case of RWD Now, it is easy to create a Responsive website as there are many website builder provides this features and you can create a Responsive Website with few clicks. I have recently created website for my saloon athttp://webstarttoday.com with their responsive website builder. Now there are many tools and application for small business owner to bring their small business online and website builders, online store builders or eCommerce website builder are the widely used tools.

    • RWD or AWD? now the biggest debate with rise of mobile, now get better
      solution by combining RWD with AWD.

  • Pingback: SEO Malaysia 2015 | Website Design and SEO in MalaysiaWebsite Design and SEO in Malaysia()