Table of Contents
Creating visually appealing pricing tables that will provide both, clear information and good design, are sometimes hard to make. Let’s forget that simple three-plan lists with couple lines at this moment. I want you to think about more complex ones. Think about a table containing couple different pricing plans with several lines in each of them, legend on the side and CTA’s (i.e. “call to action” buttons) for every plan. Until this point, it still sounds easy to manage. All you need is to use HTML table elements and job is done. Right, but what if I tell you to make the table responsive …
Here are two examples from Hootsuite and avast! websites.
Both of these plans share some elements. They both have three plans, tons of various information and … They both don’t care about responsive design. In case of Hootsuite, the table will stay as it is no matter the resolution. On mobile and tablet you will just have to scroll horizontally. On the other hand, avast! solved this elegantly. They removed the table completely. Really! If you open the website (I used avast.cz as an example) and change the size of your browser window, table will silently disappear.
Now, I want to show the last example. This one is a bit more complex because it contains four pricing plans and the information density is similar to Hootsuite. The last example is RiteTag.
How can we make the pricing table or list, like in examples above, responsive? There are couple ways. Let’s ditch the avast! solution as first. That is not a responsive solution at all no matter the world you are living in. The second option is to follow hootsuite. You can leave the table as it is and let the user scroll horizontally. Similar solution provides also bootstrap for “responsive tables”. You just wrap your whole table inside the div and add class “table-responsive” to it.
HTML:
<div class=”table-responsive”> <table class=”table”> … </table> </div>
The result will be container with inner horizontal scrollbar. The browser window will remain untouched. Fast, simple and easy to do. My objection is that if you use this approach on complex table such as hootsuite or RiteTag, content can be hard to read on smaller devices.
Yet Another Solution for Pricing Tables Dilemma
So, I was thinking about another way to solve this problem because the solutions above seems like the laziest and boring one. The idea I came up is to create four separate tables instead of one – each for one plan (first will include also the legend) – and wrap all of them in side a div. On bigger screen, all the plans will be placed next to each other like in the example above. However, when the screen will shrink, they will stack themselves vertically. Following this option, no horizontal scrolling is needed and even on smaller screens information in the table are still readable.
Before celebration, another interesting problem appeared. If the plans are stacked vertically and the legend is only included in the first one, how will you know what individual lines mean? There is no point in having beautiful responsive pricing table if people will not understand it. Since good design has to be both, beautiful and functional, this is not that case. What to do now? Trash the whole idea and start all-over again hoping for something else? Follow the “scrolling” option used by hootsuite and Bootstrap? There must be something else that can be done …
After a while one idea actually came.
Warning: This idea is experimental and I am not sure about how will it work. So, use it only at your own risk!
The idea is to include the “legend” part in every single plan and then hide it on bigger screens. So, when you browse the site on desktop, you will see legend and four plans on one line. On smaller screen, when layout of the table will break or cause horizontal scrolling plans will switch to vertical version and hidden legend on the left will be shown.
In theory it sounds simple, or at least not that hard to do, but in practice it can be a different story. The main concern I have about this solution is functionality and maintainability of code. Let’s just think about it. It will require to create three separate tables. All of them will contain their own legend hidden under specific conditions (device resolution). When the resolution is wide, the plans will be held on one line. Otherwise, they will be forced to stack.
Also, don’t forget the SEO. Who knows how robots will understand this … complex HTML structure. Search engine robots don’t like hiding to much text on the website. In case of table column containing only a few data it might not be that serious, but I will still look for some information on this topic.
Well, let’s end it here.
Conclusion
More complex pricing tables can be harder to do if one of your goals is to make them responsive, which is necessity in this “mobile” world. To achieve this, you can use various options. You can hide the table completely – avast!, use scrolling the bad way – hootsuite, use scrolling the good way – Bootstrap or try separate tables I talked about today. What’s your idea or solution for responsive pricing tables?
I have to make a confession here. Those of you following me on twitter will probably know it, but it is important to mention it. Recently I joined the team behind RiteTag (optimizing hashtag use in social media) as a designer and front-end developer. One of my goals is making whole website responsive and also redesign it. Now, I’m working on new responsive design of the pricing table above. So, now you know who to thank you or punch in the face when new design will come live.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
