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
How to Review a Website — A Guide for Beginners

How to Review a Website — A Guide for Beginners

A company website is crucial for any business's digital marketing strategy. To keep up with the changing trends and customer buying behaviors, it's important to review and make necessary changes regularly...

Digital Doughnut Contributor
Digital Doughnut Contributor 25 March 2024
Read more
The World Is Shrinking: 6 Degrees of Separation Is Now 2!

The World Is Shrinking: 6 Degrees of Separation Is Now 2!

Six degrees of separation is not just a party game, it's a reality. Everyone is the world is interconnected, and thanks to social media, that connectedness gets tighter and richer each day. See the research...

Scott Christley
Scott Christley 9 August 2017
Read more
The Impact of New Technology on Marketing

The Impact of New Technology on Marketing

Technology has impacted every part of our lives. From household chores to business disciplines and etiquette, there's a gadget or app for it. Marketing has changed dramatically over the years, but what is the...

Alex Lysak
Alex Lysak 3 April 2024
Read more
Sales and Marketing Collaboration: A Recipe for B2B Success

Sales and Marketing Collaboration: A Recipe for B2B Success

In the world of B2B, the age-old rivalry between Sales and Marketing often overshadows the potential for a fruitful partnership. Yet, when these two departments align their goals, strategies, and efforts, the results...

Zsofia Raffa
Zsofia Raffa 12 September 2024
Read more
Cats and Dogs Boost Your Business By 300%. Here’s How.

Cats and Dogs Boost Your Business By 300%. Here’s How.

It’s the age-old question that has endured ever since the creation of the internet: are you a cat person or a dog person? Or do you love both cats and dogs? We have both dog lovers and cat lovers at Sortlist, so it...

Aline Strouvens
Aline Strouvens 27 August 2021
Read more