Responsive Web Design and tables are not necessarily the best of friends. Many people have researched the situation and a lot of approaches have been devised (some of them were even rounded up in a recent article here on SitePoint). However we are still far away from the perfect solution and the search continues.
While things are still complicated in the generic case, certain specific cases can be treated with a lot more attention. I am talking here about the feature comparison table. We encounter it in many places – when choosing a car and trying to decide what extra options to choose; on web hosting websites when comparing plans and features; on any membership-based portal that lets you decide what features you need to receive in exchange for your money.
Because this kind of table has a relatively stable and consistent structure, it is possible to coax a better behavior when displayed on small screens.
Anatomy of a Feature Comparison Table
The classic comparison table brings together at least three products (displayed in columns) while the features are displayed on rows below. In the traditional structure, the first cell of each row has the name of the feature, while the cells under each product have a checkmark or some other symbol, showing whether that feature belongs to the product or not. We can find great examples of this classic structure: here, here, and here
Based on these examples, we can summarize the structure of a comparison table with the following code:
[code language="html"]
| Product 1 | Product 2 | Product 3 | |
|---|---|---|---|
| Feature 1 | ✔ | ✔ | ✔ |
| Feature 2 | — | ✔ | ✔ |
| Feature 3 | — | — | ✔ |
| Feature 4 | — | — | ✔ |
[/code]
It is easy to identify the elements mentioned earlier: the product names, the feature names, and the marks that show whether the feature is present or not. Note that the ✔ code represents a checkmark (✔) character.
We now arrive at the root of the problem. In order for the table to maintain optimum effectiveness at low screen widths, a few conditions must be fulfilled:
- The user must be able to easily differentiate the products;
- The features must be easily identifiable; and
- It must be clear if a feature for a product is present or not.
The best way to achieve this result is to shift the cell containing the feature name on top of the other three cells that mark the presence or absence of the feature.
First Solution: Flexbox
How can we get this to happen? One answer is flexbox. If you don’t know what flexbox is or if you need a refresher, you can check out Nick Salloum’s recent article on the topic. The rest of us can dive into the solution.
First we need to make sure our changes happen only on small screens. For this to happen, we target our code using a media query, using the classic width of 768px as a breakpoint:
Continue reading %Responsive Solutions for Feature Comparison Tables%
by Adrian Sandu via SitePoint
