Responsive Pricing Table

Question

I am designing a simple Landing Page which has 2 lines about the product and the Pricing Table.

I want to Make a Responsive Layout for Mobile. Not sure which is the best way to display the Pricing table. Or should I have a separate design for the mobile web?

Answer 1

Based on your image above, I would suggest something similar to the mockup below. For a pure mobile (smartphone) I personally believe that you need to reduce the number of images that a user might have to download only to help save on their initial bandwidth. For Tablet user I restored some of the images because of the screen size, it really helps to give the the best experience possible that closely resembles the desktop experience. In some case devices like the iPad, screen sizes are so large they will see a desktop version of the site depending on how your media queries are setup.

Also I stacked the plans in descending order. I did this to push the free service closer to the top so more users see it. The idea behind this is hopefully users will sign up for a free account and then your service will impress them enough to purchase a higher level plan.

Hope this helps.

^{download bmml source – Wireframes created with Balsamiq Mockups}