Cards suit items that are genuinely parallel and browsed rather than compared. Where items differ in importance, or need to be read in order, or need comparing, a card grid actively obstructs the reader.

Why cards became the default

They are easy to build, they arrange themselves on any screen, and they look tidy regardless of what is in them.

That last property is the problem. A layout that looks acceptable with any content is a layout that stops you noticing when the content is not working.

The result is sites where every section is a grid: services as cards, benefits as cards, team as cards, testimonials as cards, and articles as cards.

Where cards work

A gallery of completed projects, a product listing, and an article index all fit. Each item is an entry point, they are equivalent, and the visitor selects one.

Where they fail

When items are not equal

A business with one main service and four occasional ones presents all five as identical boxes, which tells the visitor they are equally important. They are not, and the layout has flattened the message.

The fix is hierarchy: the main thing given more space and more words, the rest listed beneath it.

When the content needs comparing

Service tiers or packages as cards force the reader to hold each one in memory while looking at the next, because the comparable details are not aligned.

A table aligns them, which is the entire point of a comparison.

When there is an order

Process steps as a grid loses the sequence, particularly when the grid rewraps on a phone and the reading order becomes ambiguous.

A numbered list preserves it and takes less space.

When the text has to be truncated

Cards impose a uniform height, which means longer descriptions get cut with an ellipsis. Truncated text is unread text, and the reader is being asked to click to discover whether it was relevant.

When the images are decorative

A card grid where every image is stock photography is a grid of nothing, and it pushes the actual text below the fold.

The phone problem

Worth stating because it is where card grids do most of their damage.

A three-column grid becomes a single column on a phone, which turns a compact arrangement into a very long scroll where each item occupies most of the screen.

Nine cards that fit on one desktop screen become nine screens on a phone, and most visitors will not reach the ninth.

Which means a layout chosen because it looked efficient is, for the majority of visitors, the least efficient option available.

A simple list with a heading and a line of text per item conveys the same information in a fraction of the height.

What to use instead

A list for items that are short, ordered, or numerous.

A table for anything being compared on shared attributes.

Sections with headings for content that needs explaining rather than selecting.

One prominent item plus a list where there is a clear priority.

Prose where the relationship between things matters, which a grid cannot express at all.

That last point is the one designers resist. Some content is a paragraph, and breaking it into three boxes to look designed removes the connective reasoning that made it useful.

If you keep the cards

Making them work rather than removing them.

Write descriptions to a similar length so nothing truncates. Make the whole card a link rather than only the heading, since people tap the image. Ensure the heading is a real heading so the page structure survives. And check the tab order matches the visual order, which grids frequently break.

Also: give them different visual weight where the items genuinely differ, which is permitted and rarely done.

The test

Read the page as a list of just the card headings, ignoring the boxes.

If that reads sensibly, the cards are a container and the content is fine. If the headings alone convey nothing, the cards were carrying the design and the content was never written.

Then look at the same section on a phone and count the screens, which is the measurement that usually settles it, and it interacts with how far anybody scrolls, as covered in designing for people who do not scroll.

Frequently asked questions

Why did cards become the default?

They are easy to build, arrange themselves on any screen, and look tidy regardless of content, which stops you noticing when the content is not working.

Where do cards work?

Genuinely parallel items browsed rather than read in order, where an image carries information and the visitor picks one and leaves.

Where do they fail?

When items are not equally important, when content needs comparing, when there is a sequence, when text gets truncated, or when the images are decorative.

What is the phone problem?

Nine cards fitting one desktop screen become nine screens on a phone, so a layout chosen for efficiency becomes the least efficient option for most visitors.

What should I use instead?

A list for short or ordered items, a table for comparisons, sections with headings for explanation, and prose where the relationship between things matters.

What is the test?

Read the card headings alone as a list. If they convey nothing, the cards were carrying the design and the content was never written.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Every section on your site a grid of three boxes?

We check which ones are actually parallel, which is usually fewer than the layout suggests.

Start a Conversation