{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

Responsive design may be the more popular option for business right now, but that doesn't mean that alternative approaches like adaptive design shouldn't be considered. 

Today sees the release of our Mobile Web Design and Development Best Practice Guide, which looks in detail at mobile site design and development. 

This taster from the guide looks at the pros and cons of an adaptive web design... 

What is adaptive design? 

Companies often design mobile sites for the lowest common denominators, such as screen size, device, browser and OS, which can mean ignoring all the other exciting stuff that mobile apps provide, such as location.

If your business could benefit from delivering a more contextually relevant experience, then adaptive design, while it is an expensive solution, could be worth the investment.

Adaptive sites are created in several different versions beforehand. The server detects factors like device and OS, and then sends the correct version of the site.

Adaptive design is a lot more complex and expensive, but it’s the only way to reach the broadest mobile audience. That’s because responsive design uses CSS media queries, a relatively recent technology that is not supported by older mobile phones.

Adaptive and responsive: key differences

  • With responsive the layout is determined on the client side. The layout decision is made on a user’s browser, so the same file is sent to all consumers but significant parts of the file may be hidden from the user.
  • With adaptive the layout is determined on the server side. Layout decisions are made on the web server, not the client or browser. The server detects factors like device and OS, and then sends the correct version of the site on the fly, making it quicker for the consumer.

The other key difference is in regard to feature phones, thanks to adaptive design’s more sophisticated device detection scripts.

Low-end mobile phones are not capable of understanding media queries and require a more complex solution.

For low-end devices in developing countries in Latin America, Asia and Africa, you could serve the lightest content such as automatically streaming lower-resolution video to users with less bandwidth, lower-power processors and worse batteries.

This means more reach for your site to more mobile devices. 

Pros and cons of AWD

The case for...

1. Super-efficient page loads

Adaptive websites are much better for load time performance and overall user experience. This is because adaptive delivery works by only transferring those assets necessary for the specific device and optimising images and multimedia content on the fly to suit display resolution and size.

For example, when a high-density retina display is detected, high-resolution images are transferred and used instead of defaulting to high-res images for everyone.

This opens up the opportunity to have, for example, three weights of experience: high, medium and low, and deliver these based on location, connection speed etc.

So rich assets are developed to quick smartphone owners connecting over wi-fi in developing countries.

2. Allows you to tailor the experience based on user intent and context

For some businesses, a mobile user’s intent is to engage with the business in a very specific way that is different from their behaviour on a desktop website.

The experience on an adaptive site can be finely tuned to the device, so that it is intuitive, super quick and takes advantage of things like location, voice and HTML5.

3. No need to scratch your existing website completely

Developers don’t have to go back to the drawing board and re-code the existing website from scratch.

This is important because many websites are complex, with a lot of legacy code built up over time, and scratching all the effort that has gone into it is generally not an option.

4. Reach the maximum mobile universe (more than RWD) including non-smartphones

If developing markets are important to your business this is the most inclusive globally robust approach.

5. One URL with associated SEO and discoverability/sharing benefits

As is the case with RWD, this approach is Google friendly and reduces the need to maintain two content management systems with the mobile-specific site development approach.

If you need a highly interactive, secure site that works for everyone who might ever visit your site with any type of mobile device, then you have to create an adaptive design. 

And against...

1. Resource and budget heavy

Adaptive requires a large team of developers and the budget to handle the complexity that comes with choosing to develop and support an adaptive site.

This makes it more expensive, so it's not the solution for everyone. 

2. Complexity

Adaptive is a good approach, but creating too many separate designs takes a lot of work and can defeat the purpose of trying to use one set of content on one URL.

Adaptive web design in action

Lufthansa's use of adaptive design shows how experiences can be tailored according to likely user behaviour. 

For example, the desktop site is more geared towards flight search and holiday planning, with prominence give to the search box and destinations available. 

However, the adaptive mobile site is more geared towards customer who have already booked, with flight status, check-in and my bookings some of the most prominent options. 

 

Graham Charlton

Published 14 May, 2014 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

Comments (20)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

ArleyM

I think there's a discrepancy in the way that you're using the term "adaptive" in this context. This is the generally agreed upon difference between Adaptive and Responsive: http://stackoverflow.com/questions/14831530/responsive-design-vs-adaptive-design

What this post is addressing is called Responsive Server-Side, or RESS. http://www.lukew.com/ff/entry.asp?1392

RESS is great when you have information about the devices to expect, but the lifespan of your site should extend into a time when devices that don't yet exist will visit it. That's where RWD is so valuable - being fluid makes it completely agnostic.

Adaptive (as defined above) is more like the cheap version of a responsive site. A few set breakpoints are picked, and only those will work. So some devices end up with wasted space.

over 2 years ago

Avatar-blank-50x50

ArleyM

Hm. I did a bit of Googling and actually found a number of other sources calling RESS Adaptive. This is a really confusing topic, as the term "Adaptive" is used for both the server-side approach as well as the set-breakpoint approach.

The real lesson here is that vendors and clients need to make requirements very clear! Expecting one of these "adaptive" approaches and getting the other would be a pretty brutal mistake!

I think this post could bear a distinction between the two definitions of the term!

over 2 years ago

Avatar-blank-50x50

Nirav

this would be a better approach (adaptive design) 3/4 years back when phones didn't had good browser with all mentioned capabilities .. even Africa, Asia now moving 3G to 4G/LTE to support internet and local companies selling phones equipped with android os in those markets.

over 2 years ago

Avatar-blank-50x50

Sandra

Our website (www.ackermans.co.za) is built on Expression Engine and we have adaptive web design. In our target market, there is only a 30-40% smartphone penetration which means we have to consider lower end, 'dumb' phone technology first.

This was a good choice for us, but we have learnt that it does require 3 designs for each page, which is rather resource heavy.

over 2 years ago

Grant Kemp

Grant Kemp, Omnichannel and Mobile Practice Manager at Inviqa/ Session Digital

Graham, you missed out two key benefits

-> Speed to implement and iterate on.
Typically a mobile adaptive site can be setup in weeks using platforms like Moovweb which is used by companies like Macys, bloomingdales and Asda.

--> Able to Quickly spin up an app.
Adaptive technology also allows for you to build a hybrid app really quickly just by generating additional views. You can then have bespoke touchpoints on Desktop, mobile web and app.

Even if you don't use a platform most modern cms will allow mobile adaptive templating. We have done this a few times on magento when clients want to follow this strategy.

Responsive works for somethings and adaptive works for others. Make sure you pick the right choice for you!

over 2 years ago

Avatar-blank-50x50

Hayden

Adaptive Design can be particularly useful when you are targetting users in low bandwidth situations (e.g. where the latest 4G - or even 3G - connections are less likely).

Assuming the user always has access to the latest technology and connection may not be the right call.

over 2 years ago

Avatar-blank-50x50

Tasha Harrison, Owner at SpireLight Media

Although it's true that some older devices aren't capable of understanding media queries, a mobile first approach will address this. Then there's no need for the mobile's browser to use the media queries.

I'm not sure that it's correct to choose either responsive or adaptive, you're bound to have elements of each and it will depend on the project.

over 2 years ago

James Gurd

James Gurd, Owner at Digital JugglerSmall Business Multi-user

Afternoon all,

I think this is a great discussion.

@ArleyM - the reason we wrote the report was to address the confusion around definitions. There isn't 100% agreement on the exact distinction between adaptive and responsive. We wanted to produce a report that provided a clear distinction and then discuss the commercial & technical implications based on this distinction.

For me the challenge is to understand the implications of a mobile development approach, rather than obsess over the semantics.

I personally think the distinction of responsive being client-side (in the browser) and adaptive being server-side is clean.

Of course the two aren't divorced. A site built on a responsive code base using RWD principles can also use adaptive techniques. It doesn't have to be one or the other - hence the role of RESS. RESS is like a middleman.

As @Tasha points out, it really depends on the project. A key thread of the report is advising people to think through what they're trying to achieve based on their business and customer needs, then find the tech solution that best delivers that. Don't start with a solution and try and shoehorn a business/customer solution into it. In my experience, that's the wrong way to approach tech architecture.

Thanks
james

over 2 years ago

Grant Kemp

Grant Kemp, Omnichannel and Mobile Practice Manager at Inviqa/ Session Digital

@Tasha and @James, - Another use case where adaptive works particularly well is in areas/ countries with slow internet connectivity. ( including some parts of uk)

There are web techniques to measure the speed of connection at load time, and if its really slow then we display a more basic page.

I have had conditions even in the UK where a webpage is unusable because of connection speed and this method still allows people to use it to achieve kpis.

The only thing you should consider is that your dwell time metric may not be reflective of actual site dwell time ( because of the loading time) but I usually segment these users into a separate bucket in Google Analytics so they don't break numbers

over 2 years ago

Roland Latzel

Roland Latzel, Director of Marketing at MailStore Software GmbH

Thanks for the good overview, great article! Do you have some good ideas where "old-fashioned", seperate mobile sites make sense?

over 2 years ago

Avatar-blank-50x50

elliott

I'm surprised you didn't mention wordpress and adaptive sites. Given the huge amount of sites that are powered by wordpress and the relative ease of using an adaptive template, every site that is on wordpress should be taking advantage of it.

over 2 years ago

James Gurd

James Gurd, Owner at Digital JugglerSmall Business Multi-user

Hi Grant

Yes that's a good point about detecting slow connectivity and serving appropriate content.

Have you got any specific tips for readers on how to define thresholds for this?

Thanks
james

over 2 years ago

Grant Kemp

Grant Kemp, Omnichannel and Mobile Practice Manager at Inviqa/ Session Digital

James

I am going to use the ultimate accoutant's cop out - and say.. "It depends....."

Varies based on content, user target, etc.

If you are mindful of what clients target is for user objective, then you can really go crazy and give them a really powerful set of options.

Mobile is becoming the first screen, and tools like #webperf apis when the come out will be awesome. But till then we need to make our own solutions to fill the gap.

over 2 years ago

Avatar-blank-50x50

Mark Simpson

Hi Guys,

I don't think that the personalisation capabilities of Adaptive/RESS should be underplayed.

Understanding the explicit capabilities of a device can help to deliver an improved experience for the reasons mentioned above. To add to that as well, the implicit factors can also be used to target the user with relevant and personalised content.

For example
- A mobile phone network provides its customers with devices from multiple manufacturers (e.g. Apple, Nokia etc)
- A customer accesses their support website from an Apple iPhone
- The website detects that the customer is using an Apple iPhone and prioritises iPhone-focused knowledge-base articles and faq's within the content hierarchy, making it easier for the customer to find what they are looking for

@Roland - adaptive technology enables you to achieve most of the things you would want to with a dedicated .m site, with a few additional pros and cons. The key is figuring out how your customers want to interact with you via mobile channels and in what context, then letting that insight lead on the technology/implementation choice (as I think James may have pointed out in one of his responses).

Mark

over 2 years ago

Avatar-blank-50x50

Noah Breen, Web Designer at brite pixel

Great article, are there any sites that you would recommend for tutorials on adaptive web design?

Thanks,

Noah

over 2 years ago

Avatar-blank-50x50

Jason Goldberg, VP Strategy at Razorfish

Aaron Gustafson coined the phrase "Adaptive Design" when he wrote the book "Adaptive Web Design".

As you can see from his blog post here: http://blog.easy-designs.net/archives/on-adaptive-vs-responsive-web-design/ is NOT an alernative to responsive design. Adaptive Design is a high level design philosophy, and responsive design is one of the tactics one might use to achieve adaptive design.

What you're calling "Adaptive Design" is what google would call "Dynamic Design" server side device detection.

over 2 years ago

Avatar-blank-50x50

website designing

Very inspiring article for us Thanks for the great article. ….
It’s definitely a good idea for me and my
friends to learn
the things that’ll expand their skill set
Your ideas and presentation is very
effactive and useful for all. I am loving all of the
in turn you are sharing with each one!…

Being a user i really like your visible information on this page

over 2 years ago

Avatar-blank-50x50

mick jacqub

Your article was great and very knowledgeable. In my case it is responsive and the website Sagipl helps me in this problem I also want to share the url with you all http://www.sagipl.com/ this site have good contents I hope it will also helps you.

over 2 years ago

Avatar-blank-50x50

Tony Edey, .

Someone (*hint hint*) needs to make a web site that asks all the key questions about the nature of your company, location, budgets, technology, resources etc and at the end it recommends whether responsive/adaptive/RESS is best for you and why. Essentially an online personality test for your tech needs, or a flow chart that leads to a decision ;) go go interweb!

over 1 year ago

Jacob McMillen

Jacob McMillen, Copywriter at JacobMcMillen.com

Great piece Graham. You should check out UnDelay. Their adaptive landing page builder eliminates the cons mentioned here while retaining the benefits.

http://undelay.io/

6 months ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.