Henry Kogan
Henry Kogan 7 September 2016
Categories Content, Mobile, Technology

Creating Your Mobile Experience: Responsive Vs. Adaptive Design

My very first cellphone was a Nokia 7110. The year was 1999 and back then, the device was considered cutting edge technology. It was a few inches thick and had a sliding cover, easily fitting inside my pocket.

This also happened to be the same year when I began shopping for my first car. I was still in high school and didn’t have a driver’s license yet. But I wanted to get an early start by doing some research. When I had free time in class I would take out my trusty Nokia and go online. Sitting in the back of the room, nobody noticed. The phone was small except for a small antenna that stuck out like a magic wand.   

My phone had a browser back then. Nothing fancy. Just plain old WAP (Wireless Application Protocol). Introduced in 1997, this was one of the first standards specifically designed for showing internet content on mobile clients. In general, phones equipped with WAP browsers (then also called “micro browsers”) could display specially optimized WAP sites. Despite the lack of graphics, I found the browsing experience quite pleasurable. I had no trouble finding the data I needed.

With WAP, regardless of the phone you had, the site would look the same.

Today my iPhone has three browsers: Safari, Chrome and Opera yet I can’t confidently say my browsing experience is as easy. Most of the time, I have to pinch the screen around, zoom in and out and rotate from landscape to portrait. All this activity requires a significant amount of exercise for my fingers. And it usually doesn’t produce the desired result. There are certain sites of large corporations and government entities I will not name that should be ashamed of themselves. When I go online through my phone’s browser I regularly encounter issues with how fast a page loads, how images are displayed and sometimes even have trouble navigating  through drop-down menus. Sometimes, I even miss my Nokia and the trusty WAP sites that loaded ever so slowly but surely.

2016 and Mobile Browsing

Mobile phones today have the ability to render just about anything that appears on a desktop. There’s even a workaround to support Flash through the cloud if you use an iPhone. And even though most of my mobile experience takes place inside apps, I still need to use a browser. And I’m not alone. There are millions of web pages accessed through mobile every day simply because there’s no alternative at that specific time and place. For me, issues happen mostly when I click a link from a Google search or visit an affiliate referred from Facebook.

Even some of the content farms with those lovely slide shows (supposedly optimized for any device) don’t always render correctly. It’s sad to see these sites have not been properly optimized for mobile browsing. This, in turn, results in a huge potential loss of advertising revenue. Many users end up closing the browser, usually in frustration. Considering 77% of cellphone users do indeed perform some kind of search on their mobile browser both at home or work (where a desktop browser is available), it’s important to not lose engagement.

If you are building out your site with an experienced partner, you shouldn’t have a problem with a page rendering correctly on mobile. The look and feel of your web property will go through a considerable amount of testing and consideration before it launches. Agencies today will use CMSes with flexible capabilities, such as eZ.

But if you are tackling a web project on your own or with a small team, you have to be very careful. It’s easy to overlook design elements and fail to deliver a mobile-friendly user experience. There are two distinct approaches to designing a website: adaptive and responsive design. While responsive design is clearly one of today’s buzzwords in digital experience management, considering the pros and cons of each approach before embarking on your next project will save you headaches and ensure you select the right path for your business needs and your users.

Responsive Design

Responsive design is based on fluidity. The webpage adapts to the size of the screen no matter what the target device is. The website is designed in such a way that it will change style based on predetermined criteria on the client side such as display type, width and height. Designers can choose to hide or change some elements as well as their styles using media queries).  Most CMSes have templates that have been set to be responsive automatically. Usually, there’s less work involved.

Hootsuite on eZ Publish

Social media management giant Hootsuite uses a responsive template in eZ Publish to deliver users a consistent experience across devices.

Adaptive Design

Unlike responsive design, adaptive design uses static layouts based on breakpoints. The server detects the screen size, device, browser and OS. Afterwards, it loads the most appropriate layout.

In essence, an adaptive design approach is a bit like retrofitting your website for specific users. You have more flexibility in selecting the look and feel of your site per device. In turn, adaptive is mobile friendly and the multiple viewpoints give you the ability to control your content and layout for a particular device. You can serve completely different content based on what kind of device is detected.  The adaptive approach is more expensive, requiring a higher budget because of ongoing work needed to maintain multiple layouts for different breakpoints.

resp vs adap

  • With responsive design, the layout is determined on the client side. The design is based on a universal template and will reflow across various displays. 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 not be shown.
  • With adaptive design, the layout is determined on the server side. The design generates templates which are optimized and unique for every device class. Layout decisions are made on the web server, not on 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.

Taking both approaches into consideration it’s controversial to confidently advocate one over the other. A purely adaptive approach is more expensive to implement due to more resources. However, you have the ability to cater specific content to various devices. Adaptive may display better on older phones in more developing countries such as Africa and India.

Responsive sites will look great on newer browsers on the latest devices with unique resolutions and sizes, scaling to fit the screen. Logistically, you are able to manage all your content in one code base and have a central location. This is a cheaper solution and often faster to implement.

At the end of the day, you have to understand what you want your website to do, what the demographic is and where your users are coming from. Either approach can deliver a beautiful website on mobile. The important thing is to understand the limitations of each.

The following tables summarize the pros and cons of each approach:

responsive vs adaptive table comparison


Please login or register to add a comment.

Contribute Now!

Loving our articles? Do you have an insightful post that you want to shout about? Well, you've come to the right place! We are always looking for fresh Doughnuts to be a part of our community.

Popular Articles

See all
7 reasons why social media marketing is important for your business

7 reasons why social media marketing is important for your business

Social media is quickly becoming one of the most important aspects of digital marketing, which provides incredible benefits that help reach millions of customers worldwide. And if you are not applying this profitable...

Sharron Nelson
Sharron Nelson 6 February 2018
Read more
Top 10 B2B Platforms to Help your Business Grow Worldwide

Top 10 B2B Platforms to Help your Business Grow Worldwide

Although the trend of a Business to Business portal is not new but the evolution of technology has indeed changed the way they function. Additional digital trading features and branding has taken the place of...

Salman Sharif
Salman Sharif 7 July 2017
Read more
The 3 Most Important Stages In Your Presentation

The 3 Most Important Stages In Your Presentation

If you want to deliver a presentation on a particular topic and you have to prepare yourself for it you should make sure that you go through several very important stages in order to craft a compelling, persuasive and...

Nicky Nikolaev
Nicky Nikolaev 16 February 2016
Read more
How to Encourage Customers to Post Photos about Your Brand

How to Encourage Customers to Post Photos about Your Brand

Visuals impact buyer behavior – there’s no doubt about it. But not just any visuals will have the impact you planned on your eCommerce marketing strategy. If the only images your customers see in relation to...

Luisana Cartay
Luisana Cartay 8 June 2016
Read more
Top 10 Skills to Become a Rockstar in Digital Marketing

Top 10 Skills to Become a Rockstar in Digital Marketing

Technology is continuously evolving, prompting marketers and entrepreneurs to dive into digital marketing to increase brand awareness, reach their target market, and ultimately drive sales and profit. 

Jessica Andriani
Jessica Andriani 7 September 2018
Read more