Speaker Deck

Stacking the Card Deck: Reclaiming Our Mobile Future with HTML5-based Cards

by Chris Tse

Published June 5, 2014 in Technology

***NEW: Full video of this talk is now available at http://cardstack.io/video1

Designers have looked to card-based UI to present units of content responsively across a wide range of mobile devices and screen sizes. We see this with Twitter cards, Google Now cards, Passbook passes, Pinterest tiles, Facebook Paper, etc. While these popular examples have brought the card metaphor to the mainstream, they represent only a fraction of the true potential of cards.

When done right, a card looks like responsive web content, works like a focused mobile app, and feels like a saved file that you can share and reuse. As these “cards” become more interactive, they go from being just concentrated bits of content and turn into mini-apps that can be embedded, capture and manipulate data, or even process transactions.

While discussions in the field have centered on the card metaphor as a UX design pattern, it is time to explore the architecture beneath the cards, to see whether cards built on the foundation of HTML5, CSS3, and modern JavaScript, can re-inject the ethos of the Open Web back into mobile development and turn back the tide against proprietary platform lock-ins and app silos.

Drawing upon the work he led at McGraw-Hill Education Labs on an open e-learning and e-publishing platform, Christopher Tse, a technologist/designer, will show how HTML5 cards built by different individuals and companies can be mixed and matched by end users to tell stories, to work collaboratively, and to conduct business.

Chris will present a set of card interaction patterns would help designers evaluate the right mix of cards (in terms of size, variety, purpose, relationship, and intent) for different workflow scenarios. On the technology front, Chris will introduce the “4Rs”, which stands for Render, React, Restore, and Report, as the four basic services card-based applications need for interoperability. He will introduce a few promising open source libraries that give developers the necessary plumbing to get a jumpstart on their next card-based project.

This talk was originally presented at NYC CSS/UX Meetup on June 5, 2014 at AOL/HuffingtonPost in New York City.
http://www.meetup.com/nyccssux/events/179830102/

Full video of the talk will be made available soon.

For Developers:

Tom Dale (@tomdale) and Luke Melia (@lukemelia) presented the technical foundations on HTML5 Cards at the Boston JavaScript Meetup in October 2013.

Cards are the Future of the Web: How Do We Build them? [Hangout on Air]
https://www.youtube.com/watch?v=pwYwLBWvy7Q

For Designers:

Khoi Vinh (@khoi) is curating a collection of card user interfaces on Pinterest. This is the definitive gallery of all things cards: http://www.pinterest.com/khoi/card-user-interfaces

Resources & Links:

Glazier [GitHub]: https://github.com/yapplabs/glazier
Glazier [Live Demo]: http://www.glazier.io
Oasis.js [Intro Deck]: https://speakerdeck.com/christse/oasis-dot-js-sneak-peek
Oasis.js [GitHub]: https://github.com/tildeio/oasis.js
Conductor.js [GitHub]: http://conductorjs.github.io
Grid Style Sheets: http://gridstylesheets.org
ZINC: Coming Soon...
CardStack: http://cardstack.io

A collection of essays on Cards: https://medium.com/understanding-the-future-of-the-web-its-cards

Join the NYC CSS/UX group for announcements for the Card Designathon:
http://www.meetup.com/nyccssux/

Follow @christse on Twitter for updates on the Card Movement
http://twitter.com/christse

Join the Card Movement at http://cardstack.io