Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question

1 Answer 1

up vote 7 down vote accepted

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
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
    
thanks a lot :) –  Harsha M V Jun 6 '12 at 13:10

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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