I’m sure it’s not a rare use case, but between working hours I’m a mobile-only user. Young kids mean I need my hands free and not having a laptop in the house has made for better work/life balance. As a result of being mobile-only for half my waking hours, I get the opportunity to see where web designs phoned it in on mobile (pun intended). I could probably write a whole book1 about where things go wrong, but the summary is designers don’t test their sites on mobile.

The Comparison Shopping Problem

One area that is particularly frustrating is Comparison Shopping. Antithetical to most “mobile contexts” I’ve heard thrown about, I do a lot of comparison shopping for little things (gadgets, gear, design assets, clothing, etc) and big things (cars, computers, home furnishings, etc). It’s never a great experience.

I should take a step back and explain the issue from a technical level. There are only a few tried and true solutions for dealing with tables in a responsive design:

  1. Do nothing and let the table overflow miserably.
  2. Wrap the table in a div with overflow-x: auto; -webkit-overflow-scrolling: touch;
  3. Stack the table, using pseudo elements each row of the table becomes like a definition list.
  4. Add column toggling to the table.
  5. Freeze/Fix the left header column and make visible cells swipeable.

The latter three scenarios are covered excellently by Filament Group’s Tablesaw library. Most comparison shopping tables opt for the “Stack” option. This is probably a great place to start. I think this works well for smaller data sets but with anything with lots of columns or rows, it becomes an unpassable user experience; rows bleed into rows and it’s difficult to understand the context of the data.

I’m not the only one who has felt this problem:

Of the two links Soopa mentions, one is unusable on mobile and one just gives up entirely and hides the pricing and comparison tables (the only feature on the page).

Workshopping a Solution

Frustrated, I took a stab at fixing this one particular component. UX and accessibility can be improved, feel free to modify and rebound as necessary.

See the Pen Responsive Product Comparison Table by Dave Rupert (@davatron5000) on CodePen.

At smaller breakpoints, the table becomes a carousel of cards. It’s similar to the Swipe solution from Tablesaw, except this presents one column of data at a time and stacks the row header above the data cell. The problem I think this solves is getting all the information about a single product in a single view. I can fix my eyes on one row and cycle through features I care about.

Some guy named Ethan on Twitter mentioned that SBNation has a similar pattern for their playoff brackets:

And that leads me to the main point I’d like to make…

Different Patterns for Different Content

We’ve done a great job pattern-izing our designs into reusable components, but patterns need to suit the content. Not all content serves the same purpose and therefore deserves different treatments. I harked on this in a recent post, but a list of movies and a list of coupons should function and look completely different. Similarly, some tables you navigate by the column headers, other by the row headers, others require both to make sense.

As a larger design community, we tend to glom onto existing patterns and trends without regard as to why. We inject card interfaces without considering if that metaphor applies to the content. We overload our marketing pages with saccharine eye candy, burying the lead on our billboard websites.

I’d love to see and read about more hyper-specific solutions that cater to specific content. I recently spent over a year thinking about responsive online coupons, not very exciting but very thought-provoking.

Using prefabricated, road tested solutions from Apple’s Human Interface Guidelines, Google’s Material Design, Twitter’s Bootstrap, and Brad Frost’s Responsive Patterns is always a good place to start, but don’t settle there. My biggest advice would be to turn off the 27” display and use your sites and projects on your phone, there’s lots of low hanging fruit that could give way to new patterns, tailor-suited to your content.

  1. I’m happy to announce my new book Mobile Faux Pas coming soon on A Book Apart! ↩