Responsive Product Comparison Chart

14 Jan 2013 - 5:05pm
17 weeks ago
3 replies
3159 reads
Jessica Boggs
2008

We are currently working on creating responsive designs for a web site which provides/sells service-based products. The client wants the designs based off their desktop experience. One of the pages compares the service features in a side-by-side column format. Looks great in the desktop view but it not going to work in the smart phone view.

We have done a good deal of research on presenting complex data responsively but haven't found a good example of a side-by-side comparison. It's not just a table of information that can have columns turned on/off or some fields accessed by swiping. It all has to be visible at the same time.

Has anyone seen any good examples of a side-by-side comparison on a smart phone?

Thanks much!

Comments

15 Jan 2013 - 8:44am
Maurice
2009

Try these:
1) Phone size comparison
http://phone-size.com/?s=1%2C2%2C3%2C108

2) Cell phone resolutions based on model
http://cartoonized.net/cellphone-screen-resolution.php

3) Responsive Design Test
http://www.responsivedesigntest.net/

4) Media Queries (lots of responsive samples)
http://mediaqueri.es/

Hope that helps.
Good luck.

21 Jan 2013 - 2:03pm
AJ Kock
2007

Here is some examples on how to do it:

Responsive design & data tables
http://filamentgroup.com/lab/responsive_design_approach_for_complex_multicolumn_data_tables/

Responsive Data Tables
http://css-tricks.com/responsive-data-tables/

Two Methods
http://jquerymobile.com/test/docs/tables/index.html 

21 Jan 2013 - 10:45pm
sugandhastock
2013

Nice idea for side by side smartphone.

________________

Thanks,

Sugandha Livestock

 

Syndicate content Get the feed