The web has come a long way from chirping dial up modems and service provider CDs stuffing our snail mailboxes. (Some of you remember what I mean!) Thanks to the explosive pace of technology, we can now access any information, anywhere, anytime, at blazing fast speeds with a device that fits in a pocket.
This also makes creating websites and content much more difficult. Long gone are the days of simply building a site and posting it online. Now, websites are advanced pieces of software that must work across many browsers on multiple platforms with different capabilities encompassing desktop computers, tablets, phones, watches, and even refrigerators!
To address all of these wildly different platforms, modern web development techniques rely on two different strategies known as Adaptive and Responsive. Both have their place in the world and both have their strengths and weaknesses. At RevUnit, we work with our clients to determine the best one to use to make each project a success.
Let’s explore each one a little more:
Adaptive techniques customize the content, layout, and graphics to the specific device being used to view the website. Consider a knife, fork, and spoon – all three utensils are made of the same material, but each has a very different use. Knives are great at cutting, yet they are all but useless in a big bowl of soup. Adaptive websites are just like individual utensils; unique layouts are adapted to each device and its unique use case. Though the content may be the same, users will interact with phone, tablet, and desktop versions very differently. It’s all about using the right utensils for your dinner.
So, just how are things different on each layout? There’s no one answer because every project is unique and has it’s own requirements for each device. But, in general:
Tablet and phone layouts are optimized with larger fonts for the smaller screen sizes, lighter graphics to reduce download times, different navigation controls built on mobile best practices, and touchscreen specific interactions that can’t be done with a mouse and keyboard. Many things may be completely removed from the mobile version because of technical limitations, a poor user experience, or would take too long to load.
A desktop computer has the horsepower to do all of the heavy lifting needed to display complex websites, but they lack touch screen controls and can’t be carried around in your pocket. Like the gold tableware that comes out for holiday dinners at grandma’s house, the desktop version is heavy, more complex, and made for a more impressive experience.
Occasionally, we see workflows or functionality that simply can’t work across all devices, or would be best suited to one but not the other. Take camera and GPS capabilities – these are features we can access on a mobile device easily, but are often not available on a desktop computer. Or the reverse, it’s easy to enter and manipulate large amounts of data on a desktop computer with a mouse and keyboard, but it would cause a serious case of road rage trying to do so on a mobile device with just your thumbs.
Some features are simply best when restricted to certain devices, and it would create a poor user experience – or be very expensive – to try to implement them across every one. This is where adaptive websites shine.
Adaptive's Good & Bad
There are many benefits with an adaptive website: the same content is used everywhere, pages are optimized for the device where they’ll be viewed, and features and functionality are targeted to specific devices. Like most things, adaptive websites are not perfect. Some of the downsides are that they take longer and are more expensive to develop because each layout must be individually designed, coded, and optimized. Graphics and other assets have to be generated at multiple sizes, and new features added in the future must be considered and implemented across all variations.
When to Use Adaptive
We’ve found that adaptive sites are best for web apps that rely heavily on user interaction, and have lots of key functionality rather than simple blogs or informational websites that are simply displaying content. We employed adaptive techniques in our employee engagement project for Virgin Hotels called VSocial because it allowed us to have a very lightweight and easy to use mobile experience while keeping all of the advanced administration functionality on the desktop version. It was the right tool for the right job and proven to be a great success.
Responsive websites are based around the idea of build once, show everywhere. Think of the humble spork. It's a fork and a spoon. Equally at home with lasagna or soup. There is no need for multiple utensils because one can do the job. It’s the Swiss army knife of the table. Well, responsive websites are just like a spork; a single layout for every device that can respond to any screen size or use case. There is no need to develop unique screens and functionality for each device. By using carefully crafted HTML and CSS, the content can expand or collapse to fit the screen.
In fact, you are viewing a responsive website right now! If you are reading this on your phone, open up our site on your computer and check them out side by side. But, if you are on a desktop, you can see it right now: First, grab the edge of your browser window in the lower right corner and drag it to the left to be about the width of a smartphone. (Or, you know, just open it on your phone and look at both side by side.) Then scroll up and down. Be sure to check out how our top navigation and footer change to the smaller window size. Now make it wide again. See how the things changed? That’s responsive in action.
Like an adaptive website, responsive sites can tweak a few things to provide a more tailored experience on different screen sizes. Though, instead of defining them for mobile, or tablet, or desktop, variations are set through screen size ranges. Once your browser window hits a certain size, you see those optimizations.
On mobile and tablet devices we might show a mobile-friendly navigation, slightly larger fonts, and stack images over text instead of being side by side. On desktop, still images could be swapped for videos, more content can be displayed, and we add additional effects for interactive elements. Yet, we’re still using a single file for every screen!
Though the spork is amazing, there is always a but. Any navigation, imagery, or functional items present on the desktop version, say a form or YouTube video embed, will also be shown on a mobile view. So great care must be taken when developing content, assets, and interactive elements to assure they will scale properly on any screen.
Responsive's Good & Bad
Responsive websites have a number of advantages over adaptive sites: there is a single layout to develop and maintain that can cover any screen size today and for years to come, it’s generally faster and cheaper to implement, and every device gets the same great content. The downside to responsive is that every device gets the same functionality, whether it makes sense or not for that device. For example, if we add a tappable phone number for mobile, the desktop version will show it as a link even though you can’t call the number. Additionally, if the code is not carefully constructed, a mobile user could experience a heavy page that requires a long wait to download and fully render since the same assets are being shown as on a desktop.
When to Use Responsive
Responsive techniques can be used on any site that’s primarily about displaying content to a viewer and much less about interacting with it - which is the majority of websites online today. However, if your project requires a lot of interactions by your user or complex functionality, adaptive is most likely the better way to go.
Thanks to Google’s new ranking algorithm that ranks a site’s mobile presence more heavily now, responsive design has become one of the most common techniques in web development. In fact, almost every news site, blog, and corporate website is responsive because content can be displayed on every device with much less work.
Adaptive is like a fork, knife, and spoon. Multiple layouts for specific uses. Responsive is more like a spork. A single layout able to tackle anything.
To put it simply, adaptive websites use a series of custom layouts adapted for specific devices, and responsive websites use a single layout that can respond to any device. Both have strengths and weaknesses and have earned their place at the table; each one is suited to a particular job better than the other. While there is a lot more technically that goes into each of these techniques, hopefully this made it a little easier to understand the choices. Curious about what goes into our web development process?