Responsive Product Comparison Chart

14 Jan 2013 - 5:05pm
2 years ago
3 replies
6671 reads
Jessica Boggs

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!


15 Jan 2013 - 8:44am

Try these:
1) Phone size comparison

2) Cell phone resolutions based on model

3) Responsive Design Test

4) Media Queries (lots of responsive samples)

Hope that helps.
Good luck.

21 Jan 2013 - 2:03pm
AJ Kock

Here is some examples on how to do it:

Responsive design & data tables

Responsive Data Tables

Two Methods 

21 Jan 2013 - 10:45pm

Nice idea for side by side smartphone.



Sugandha Livestock


Syndicate content Get the feed