OBIEE Tutorial: Oracle Business Intelligence For Beginners

Adaptive web design: pros and cons

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.