Which one to prefer for a website: responsive or adaptive?
Due to the rapid increase in mobile internet traffic, recently one of the most frequently asked questions from project owners is if their website would be responsive. This is not a bad question; however, the question is incomplete, and also our responses are quite technical. At this point, we at SHERPA want to provide a solution without drowning everyone in terminology.
Go ahead. Read it, enjoy it, and even share your objections, but please do not ask if it should be responsive or adaptive.
As if he had heard us, Nick Davison, vice president of technology at Rhythm Agency, suggested a solution for this dilemma. (Yes, it’s possible to find an answer to almost every question on the internet.) The project Liquidapsive is just like the final answer to the discussion with four simple examples.
Let’s examine them one by one:
If you’d like a responsive website
Enter the liquidapsive.com and pick “responsive” from the drop-down on the top of the page. The user interface of the website will convert to responsive. Let’s continue for those who might be wondering what changed.
Responsive user interfaces have different layouts for different resolutions. As you drag your browser window narrower and wider, taller and shorter, you will understand how the interface responds to the changes in size. You can see that the transitions between different layouts are softer and fluid (liquid) during the change. The content and media elements within your page layout begin to vary depending on your browser’s display area. If you ask how it happened or are displeased by content not being as fluid as you would like, I can recommend a series of articles, however, be warned that if you are not a developer, they might give you a headache. In Hollywood-made horror films, remember what happens to the teenager who asks where that sound came from and still goes down to the basement all alone. Believe me, It’s better to trust the experts to design your product or service’s user experience.
If you’d like an adaptive website
Enter the liquidapsive.com and pick “adaptive” from the drop-down on the top of the page. The user interface of the website will become responsive. Let’s continue for those saying “So, what happened?”:
Adaptive user interfaces have different layouts for different resolutions. If you drag your browser window narrower and wider, taller and shorter, the page layout does not change. However, if the viewport reaches a resolution predefined by the development team, then the page layout adapts itself to the new resolution.
If you noticed, there are white columns on the right and left blocks of the screenshot above. It is because the viewport displayed on my browser is 1.440 pixels, and the upper limit for the adaptive option of liquidapsive.com is 1.366 pixels in width. In other words, the website does not adapt itself to viewports over 1.366. It is a decision which is made within the user experience design process. If your users prefer displaying your website on giant screens as much as next-generation TVs’, it would be a good idea to review your decision about 1.366 pixels for the upper limit and to consider adaptive solutions for wider resolutions such as 1.600, 1.920 and 2.500 pixels, and more.
If you’d like a fluid/liquid website getting into every form
Let’s first ask what the timing of the project is. Your answer to this question will set in motion a series of questions and answers from which there will be no turning back. Let’s assume that your answer is “Let’s first find out what is happening, then let’s see the budget, and timing is not an issue.” Enter the liquidapsive.com and pick “liquid” from the drop-down on the top of the page. The user interface of the website you are on is fluid/liquid now. So what? It’s actually almost the same as the responsive UI.
This is where our famous debate mentioned in the title (and also ego wars) begin. The comparison of responsive to fluid/liquid is not valid. Responsive is a type of development that performs responsive page layout decisions based on display areas. On the other hand, liquid is just one of the responsive page layout methods. And yes, an adaptive page layout can also be liquid. Therefore, the question if the best one is adaptive, responsive, or liquid is a futile discussion.
Content and media elements vary depending on the display areas of your browser when the page is designed as a liquid. If you try to display your website with resolutions other than the defined page layouts (that is smaller or larger than the defined metrics), you may see the page layout scattered. Here you can see an example of what happens when you display a page prepared as liquid, in 628 px as an undefined page layout. This interface is a dead-end of a project providing a user experience that ignores the widths below 1.024 px.
We know exactly what we want: Make it static
Then let’s ask: why static? Enter the liquidapsive.com and pick “static” from the drop-down on the top of the page. The user interface of the website you are on becomes static. Let’s keep for those who say “Is this all? Is it done?”:
The static page layouts, as can be seen from the name of the preference, are static, so they do not vary according to the condition. Whatever your screen resolution, they’re always static. Whether it is wanna-be-smart phones, laptops, tablets, it does not matter on which device you display your website, you always see the same page layout. Of course with a small difference: you see some different kinds of scroll bars to view the content outside the viewport. Here you can see an example and then decide how many times you have to scroll the bar to see the whole content.
If you read this blog post, I first want to thank you. From now on, you are one of us. Unless the speed of the development of mobile internet quite slows down, I am worried that this debate will be exacerbated and I considered to write this blog post as public debt. If you have any questions, please comment below.
Finally, I would like to emphasize that I avoid providing technical details in the article as I was trying to explain the matter in an understandable language. The necessity of the language of expression that I used to describe the issue plainly. My sole purpose in writing this article was not to make it easier for you to decide whether your site should be adaptive or responsive, but to help you get information first and so idea when conducting a discussion on the user experience.
But not finished yet…
Frequently asked questions
1. In the 2nd paragraph of your article, I got bored, and I jumped to the last section, and I did not understand anything. Well now, we have a mobile website. We would like to turn it into responsive. What do we need to do?
First of all, I assume that your mobile website runs on a subdomain such as m.yourfabulousdomain.com. If this is the case, I feel bad for saying this, but I cannot hide the truth. Google does not like you. If you wonder why that is the case, I recommend you check out this article. In case you don’t read the article, here is the summary: Google does not like URL redirection. If you would like to learn more, you can contact us via this form to get an SEO 101 education pack.
2. Do I have to know all this mumbo-jumbo? What does my agency do?
If your agency is free to make the user experience decisions which can affect the KPIs of your web assets, you don’t need to know all about this. If you’re not satisfied with your agency, we say “Oh! Look at the delegation discipline!” and we would be delighted to meet you. In other words, if you are the one who makes the user experience decisions of your web assets, you must know about it to answer the questions of your agency or other service providers. If not, you sometimes are tricked, generally, have wrong feelings and mostly make a false budget allocation, and you become pretty exasperated when you’re writing your year-end reports.
3. Nice. I got the point. But I am not sure about which resolutions should be responded by our website?
If you use any tool such as Google Analytics to measure the performance of your web assets, you can find out all the answers there. Analysis of these answers, more precisely the interpretation, will require technical knowledge. If your agency cannot support you in this case, you can contact us via this form to get a Web Analytics 101 education pack.
That’s all for now.