Sample of Web Page design

The rise of the smartphone has ushered in a new way of thinking among web designers and developers, who need to create websites that work on smaller screens.

The constraints of smaller screens have actually helped the web to become that little bit more modular, with responsive design now one of the foremost web design trends: pages can be broken up into their constituent parts, and reordered on the fly, depending on browser or screen sizes. Content spread over three or four columns can be repositioned into just one.

This has refocused attention on 'cards', as a design pattern for displaying information in bite-sized chunks. Cards are ideal for the TL;DR generation, perfect for mobile devices and responsive design, and I think we'll be seeing a lot more of them in the months and years ahead. The format may not be new, but it's on the rise.

What is a card, exactly? Well, they come in all kinds of shapes and sizes, but commonly cards will include information such as a title, a user name, a picture, and various icons. Sometimes there might be a brief amount of text, for example a product description. In a sense, they are miniature, condensed web pages.

Wander Card

A picture and brief description, plus icons that convey further information.

Mail Client

A concept by Roman Shkolny.

Food widget

Cards, like your smartphone, don't always have to remain in portrait mode. They can be landscape too...

Prismatic story card

An avatar, a user name, a timestamp, a category tag, a title, a nice picture, and a bunch of interaction icons. Who says cards and mobile screens are limited? Nice work, by Nate Navasca.

Pinterest

Pinterest has been highly influential around visual design in recent years. Countless websites have emulated its easily-digestible, card-based layout.

ReaLync

Cards work well when you need to condense key information and a picture in a highly browsable format.

Newsfeed

Edi Gil designed this as a concept.

Meditation

I'm about a 2.

City Guides

Cards are a perfect choice for guidebooks and apps.

Placeley

Justin Woods embraced the card format for this location-based social network.

Supermanager ACB

Some card patterns look more like traditional cards than others. Anybody fancy a game of Top Trumps?

Temperature Card II

I keep seeing so many good looking weather apps! Bruno Passos mashes up a card-based approach with flat design and accumulates more karma from the Gods Of Design.

Etoilate

A rather beautiful card-centric Tumblr theme by Oliur.

Pravda

Speaking of themes, here's one for Wordpress.

Linkedin homepage concept

Emerson McIntyre imagined browsing LinkedIn in passive mode, and used cards to render content in a snackable format.

For further reading on cards, check out this excellent overview by Paul Adams, and also this practical piece on design patterns for cards.