Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:15Length:47 minutes
  • Overview
  • Transcript

3.7 Think About Mobile Users

Best practice #12: think about mobile users. This is very important because smartphones and tablets are now part of our everyday lives, and a lot of people (most, in fact) access websites from these mobile devices.

That means that your website needs to be responsive. It needs to be functional and accessible on both desktop and smartphone, which can be challenging for tabular design. Let’s find out how to do it.

3.7 Think About Mobile Users

Best practice number 12. Think about the mobile users. Now, this is super important because nowadays, the majority of people have smart phones and tablets and they're constantly accessing websites from those devices. That means that your website needs to be responsive. It needs to be accessible from any kind of device. And offer the information in a correct way. Now, when it comes to pricing tables, things are a bit different because of their importance because they're the gate way to a succesful conversion or a sale basically. You need to make sure that users on mobile devices can see all the plans correctly, can see all the features and can quickly compare those plans and make a decision. Now let's take a look at a couple of examples and see what we can learn from those. The first example comes from Shopify which cleverly uses tabs to go from a normal table on large screens to one that scales so well on small screens. It's really easy to switch between tabs using the navigation on the top and bottom. Now, that's actually a very good solution because normally, developers will stack each pricing table column and create a very tall pricing table. Here's an example from Slack, they go from this to this. One thing that would work very well here, I think, would be a button that will expand or contract the features. Box is actually doing that. Once we get to a mobile size, you can click the See Features button, to toggle their visibility. This is a good practice because it doesn't take up a lot of vertical space, but the information is still there if you need it. Wufoo is doing something very interesting, they go from four columns to four rows, like this. They show the essential information for each plan. And then clicking an info button will show the rest of the features. Very well done. Fresh desk is also doing a great job with their mobile pricing tables. They're going from multiple columns to stacked columns that display the essentials. And clicking this arrow will expand or collapse the features. And that's best practice number 12, think about the mobile users. Of course, the examples can go on and on but I hope these that I showed you give you a pretty good idea of what direction you can take when it comes to planning and designing a pricing table. Now this was the last lesson of the course. We have finished our little, let's call the exploration trip [LAUGH] into creating pricing tables. The next video will contain a summary of everything you've learned so far. So, I'll see you there.

Back to the top