1. Reclaiming Our Mobile Future with HTML5-based Cards

    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.
    meetup.com/nyccssux/events/179830102/

    Video shot by David Randag. Motion graphics and video editing by Chris Tse using Keynote and Final Cut Pro X.

    # vimeo.com/100662919 Uploaded 5,419 Plays 1 Comment

UX

TJLeach

Browse This Channel

Shout Box

Heads up: the shoutbox will be retiring soon. It’s tired of working, and can’t wait to relax. You can still send a message to the channel owner, though!

Channels are a simple, beautiful way to showcase and watch videos. Browse more Channels.