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

enter image description here

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?


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

  • Thanks a lot :) Just a quick Question about implementation. Do i have to have these new HTML elements show upon change in resolution ?
    – Harsha M V
    Jun 6 '12 at 12:23
  • 2
    No. look into CSS media queries and use existing classes as much as possible. You may have to make a new class or two; something like "mobile-only" and attach special styling for the different media sizes you want to manage.
    – JeffH
    Jun 6 '12 at 13:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.