Article

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
4 Important Digital Marketing Channels You Should Know About

4 Important Digital Marketing Channels You Should Know About

It goes without saying that a company can't do without digital marketing in today's world.

Digital Doughnut Contributor
Digital Doughnut Contributor 5 November 2014
Read more
Digital Marketing Vs. Traditional Marketing: Which One Is Better?

Digital Marketing Vs. Traditional Marketing: Which One Is Better?

What's the difference between digital marketing and traditional marketing, and why does it matter? The answers may surprise you.

Julie Cave
Julie Cave 14 July 2016
Read more
Life of a Twitter Influencer [Infographic]

Life of a Twitter Influencer [Infographic]

The following infographic Illustrates the life of a Twitter Influencer and includes everything from earnings, cheatsheets and social movements started on Twitter. While Twitter may not be the most popular social channel it is still one of the most powerful channels to spark online conversation. If you're a Twitter influencer, this infographic is the ultimate guideline to your future tweets.

Chiara Di Rago
Chiara Di Rago 30 November 2016
Read more
50 Chrome Extensions That Will Boost Your Productivity

50 Chrome Extensions That Will Boost Your Productivity

Today you can find Google Chrome extensions for almost anything that you can think about. In the sea of available extensions, it can be a hustle to choose which one are the best for your type of the business.

Aleksej Durdevic
Aleksej Durdevic 29 November 2016
Read more
Digital Marketing - The Wave of the Future

Digital Marketing - The Wave of the Future

With social media platforms like Facebook holding well over 1.6 billion users world-wide (and counting), these digital platforms have become the new marketplace. In order to properly promote business brands and products or services, an online company needs to employ the services of a specialist known as a digital marketer.

Mohammad Farooq
Mohammad Farooq 29 November 2016
Read more