Mobile Cards Are Changing Web Design

Thu Apr 5, 2018

Just a few short years ago, few people took seriously the idea of browsing the web on a smartphone. There were too many pitfalls to overcome, not least of all screen size. Now, smartphone technologies have advanced to the point where they are influencing the next wave of traditional web design–in the form of cards.

Twitter CardInformation on smartphones is stored in small packages called cards, and as this design has received more and more good feedback as a positive UX (user experience), websites are increasingly borrowing the model in their designs, making it an important new development in web architecture.

How Mobile Cards Work

The idea behind cards is relatively simple, and definitely not new—small pieces on information are put on one or both sides of a card, which can then be reversed, stacked with other cards, or organized in any number of configurations. It's the familiar concept behind baseball cards, credit cards, playing cards, business cards and the myriad other cards we use daily.

The way cards work on a website is by taking small bits of media–a news headline with a teaser, a soundbite, etc.– and organizing them as independent entities. Much of the work here is done by APIs (application programming interfaces) that collect data automatically from sources like newspapers, Facebook, Twitter and others, then parses it into these bits.

Using cards allows the inclusion news stories taken from favorite media sources next to a friend's tweets, or any number of feeds. It also allows content to be refreshed more frequently and independently of the page. This marks a shift in thinking from website design focused on providing one static type of content to one combines various content cards, and has the potential to re-write the rules of web design.

Why Cards Rose in Popularity

In the early days of mobile browsing, data and user experiences needed to be condensed to fit on hundreds of different screen sizes and shapes, and be easy to browse. As it became clearer that many traditional web designs would simply not work on small screens, the idea of breaking down content into smaller independent pieces gained popularity.

Another large factor mentioned above is the rise in popularity of third-party APIs. These allow sites to offer dynamic content—for example, by placing the day's New York Times headlines on scrolling card, a user can have a scrolling newsfeed in just one small area of a page. There are hundreds more APIs that provide a wealth of data that be easily organized on individual cards.

The biggest factor, of course, in the shift towards cards is a change in thinking towards a more user-centered experience, which is a relatively new concept in design. Let's take a look at some of the major companies already jumping on the card boat.

Sites Using Cards

Google and Amazon have recently unveiled new card structures that will be incorporated into their designs more going forward. Pinterest launched with a design based around cards, and has influenced many other sites to follow suit.

Twitter recently launched a new service called Twitter Cards, allowing users to “attach media experiences to Tweets that link to your content.” By adding a few lines of HTML (check out for a guide) to a page, users who tweet a link from it will have a card with your content added to their tweet. As these major players start using cards, more smaller sites will inevitably jump on board and start using them as well.

What is most worth noting is the way cards, and mobile design in general, has begun feeding back into the way websites are designed for desktop browsers. The card revolution appears poised to stick around, and will dramatically influence the next wave of web design.