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.
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.
- 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:
