Pitfalls of card UIs | Dave Rupert

In some ways this outcome is the opposite of what you were intending. You wanted a Card UI where everything was simple and uniform, but what you end up with is a CSS gallery website filled with baby websites.

A great breakdown from Dave as to why the typical card UI pattern has some inherent issues. Some elements – like making cards all the same height and dealing with responsively collapsing card lists – are now irrelevant thanks to flexbox and CSS grid, but others are inherent to the format. Issues with block links are one potential headache, but you also present information in a slightly bizarre reading format and create a default UI hierarchy that demands a lot of borders. I feel like that last point subtly hits an issue I have with this site's design on the head. Interesting.

Explore Other Notes

Older

The perfect block link solution

An interesting look at a "block links" at "card links": when you want large sections of HTML to be one big clickable link. It's a very common pattern and something I've done a lot, […]
  • A great breakdown from Dave as to why the typical card UI pattern has some inherent issues. Some elements – like making cards all the same height and dealing with responsively collapsing card lists […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.