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

Conversion-Centered Design

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.

Baines and Ernst responsive web design on a desktop

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, 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.

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.

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.

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 Headshot Jacey 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.