***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
christse
gonkun
shimacos
oracle4engineer
kazumax55
line_developers
hamadakoji
colopl
guchey
yoshiiryo1
tamaiyutaro
sansantech
scottboms
schacon
bryan
geoffreycrofte
cherdarchuk
addyosmani
tenderlove
aki_iinuma
yeseniaperezcruz
chriscoyier
vanstee
deanohume