With more users browsing the web on their phones and tablets, a good pricing page needs to work on all devices, including mobile. If you’re browsing a pricing page on your phone, it can be hard to compare plans because of the lack of space. When comparing two plans on a website, it’s almost always necessary to scroll up and down several times to get a sense of the differences. This is inconvenient for users and often leads to them selecting the first plan in the list, even if there’s a better plan lower on the page. In this article, we'll walk you through a few ways you can make your pricing page mobile-friendly.
Don’t force your visitor to scroll up and down to see the price of each tier. Instead, you can stack the plans vertically to display them all in one view. For example, Veed.io stacks their plans vertically on mobile, while showing only the plan name and the price. The visitor can simply tap on a plan for more details.
Pricing tables are great on mobile because they compress the data and make it easier to digest. It's important that your pricing page is responsive and doesn’t just change the layout but the actual text. For example, Culture Amp removes the plan description from their pricing table on mobile so that it fits within the reduced space. This means that users don't have to scroll to the left or right to see the entire table. When designing a pricing table, I would recommend that you start by creating the mobile version of your pricing table first. This will force you to prioritize the essential information, while using titles and labels that will fit on mobile.
You can display the plans side-by-side, which will make it quicker and easier for users to compare the features of each plan. However, make sure it's easy to tell that there's more plans to the left or right. Gitlab does this by adding a tab for each plan and displaying the edge of the plans within view:
When it comes to pricing pages, there’s no question about the importance of mobile. More than half of all searches are now conducted on smartphones, so it’s vital that your pricing page is responsive and easy to navigate. Ultimately, designing for mobile is about distilling content so that it fits in the reduced space. If you enjoyed this article, consider sharing it and subscribing to our newsletter. If you'd like to learn how top SaaS companies design their pricing pages, Glance has a library of 200+ examples that you can use as inspiration.
.png){kind=avatar}
