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

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

***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

C14f6f7b7ce45e286106e7e7d5421f40?s=128

Chris Tse

June 05, 2014
Tweet

Transcript

  1. 1.

    Stacking The Card Deck Reclaiming Our Mobile Future with HTML5-based

    Cards Chris Tse Presented by Follow @christse on Twitter AOL + Huffington Post Event Location NYC CSS/UX Meetup Meetup Organizer Presentation Date June 5, 2014
  2. 11.
  3. 12.
  4. 15.
  5. 16.
  6. 21.
  7. 22.
  8. 27.

    Power “Your connecting flight is late. You may have time

    to get a latte.” Flight Tracker via @khoi To See the Gist
  9. 28.

    Power “Before you call, know that a $10,000 deal is

    on the line.” Cloud Magic via @khoi To See the Gist
  10. 30.

    Power “I know what I’m getting myself into if I

    flip this open.” To See the Gist Citia
  11. 32.

    Power “Don’t you want to watch this video?” “Proclaim your

    love about Sricaha” “Don’t show me again.” “Tell your friends you like Sriracha!” “Find out what’s the big deal about Sriracha.” “Gotta blog this.” “Defend Sriracha!” Facebook Newsfeed To Act Upon it
  12. 33.

    Power Facebook for IOS Source: http://techcrunch.com/2014/05/14/facebook-now/ via @khoi After you

    post this photo at Yosemite See who else is here And what they’ve been doing here To Act Upon it
  13. 34.

    Power Jelly via @khoi “Your next action is either answer

    or forward. Choose one now.” To Act Upon it
  14. 35.

    Power via @khoi Jelly “Your question is answered. Don’t you

    want to share your gratitude?” To Act Upon it
  15. 36.

    Power To Act Upon it “I better spend more time

    reviewing these DNA things.” Medici for Ipad
  16. 53.

    Cards Like Pinterest “Board” Photo Photo Photo Photo Photo Photo

    Photo Photo Photo Photo Photo Photo Structure
  17. 56.

    Cards Like Apple Passbook “Stack” United BOARDING PASS AMC Movie

    Ticket Starbucks Card Target Coupon Starwood Loyalty Card
  18. 59.

    Cards Like Project Medici “Tree” ebook Excerpt Lecture Video Quiz

    PDF Paper Slide Deck Document Video Photo Document Lesson Lesson
  19. 60.

    Instructor can mix and match different cards to shape the

    curriculum tree. Medici Builder metaphor Card
  20. 61.

    Instructor can mix and match different cards to shape the

    curriculum tree. Medici Builder metaphor Card
  21. 62.

    Students can navigate the curriculum structure curated by the instructor

    and access the mixture of cards from tablets or the Web. metaphor Card Medici for Ipad
  22. 78.

    CardRuntime Native App Start with a normal native app, even

    an existing one that is already in the App Store.
  23. 79.

    CardRuntime Native App Embedded Web Browser webkit / Chrome /

    IE That app probably already has a built-in browser to consume mobile-optimized web pages.
  24. 80.

    CardRuntime Native App Embedded Web Browser webkit / Chrome /

    IE Card Runtime Add a Card Runtime, which provides a bi-directional communication channel along with set of contracts, so that...
  25. 81.

    CardRuntime Native App Embedded Web Browser webkit / Chrome /

    IE Card Runtime HTML5 Cards You can embed HTML5- based cards, built by you or a third-party that extends the capability of your app experience.
  26. 82.

    CardRuntime Native App Embedded Web Browser webkit / Chrome /

    IE Card Runtime HTML5 Card HTML5 Card HTML5 Card Objective-C JavaScript JavaScript JavaScript
  27. 83.

    CardRuntime Native App Embedded Web Browser webkit / Chrome /

    IE Card Runtime HTML5 Card HTML5 Card HTML5 Card Container APIs Objective-C JavaScript JavaScript JavaScript
  28. 84.

    CardRuntime Native App Embedded Web Browser webkit / Chrome /

    IE Card Runtime HTML5 Card HTML5 Card HTML5 Card Container APIs Objective-C Card APIs JavaScript JavaScript JavaScript
  29. 85.

    CardRuntime Native App Embedded Web Browser webkit / Chrome /

    IE Card Runtime HTML5 Card HTML5 Card HTML5 Card Container APIs Objective-C Card APIs JavaScript JavaScript JavaScript
  30. 86.

    CardRuntime Native App Embedded Web Browser webkit / Chrome /

    IE Card Runtime HTML5 Card HTML5 Card HTML5 Card Container APIs Objective-C Card APIs JavaScript JavaScript JavaScript
  31. 87.

    CardRuntime Native App Embedded Web Browser webkit / Chrome /

    IE Card Runtime HTML5 Card HTML5 Card HTML5 Card 1 Render to Size/mode 2 React to Actions/events 3 Restore saved states 4 Report Metadata
  32. 88.

    Render to Size/mode 1 CardRuntime Image Full Content SMALL List

    Size: Grabbable Inline Size: Embeddable Full Size: Readable, Editable Image Title Title Partial Content Image Medium Large Description Title
  33. 89.

    Render to Size/mode 1 CardRuntime Image Full Content Shrink List

    Size: Grabbable Inline Size: Embeddable Full Size: Readable, Editable Image Title Title Partial Content Image Expand Fill Screen Description Title
  34. 90.

    Render to Size/mode 1 CardRuntime Image Full Content Shrink List

    Size: Grabbable Inline Size: Embeddable Full Size: Readable, Editable Image Title Title Partial Content Image Expand Fill Screen Description Title SAVE Edit mode
  35. 91.

    Restore saved states 2 CardRuntime AAPL Stock Price 2006 2010

    From To { “symbol”: “AAPL”, “from”: “2006”, “to”: “2010”, } Store into Restore from Card STATE Remote Stock Data \
  36. 92.

    Restore saved states 2 CardRuntime Ben Jolley benjolley@coolstartup.io I have

    noticed that our invoices are not getting paid on time. Are we following up to with your client to remind them? Let me know when you have done that. INVOICE AGE CARD Snapshot Live Data Apr 25, 2014 Card SNAPSHOT Payment Terms Unpaid Count Paid Count 0 29 0 1 17 2
  37. 93.

    React to Actions/events 3 CardRuntime Current Time Playback finished IF

    playback finishes THEN start playing next video ALWAYS remember the time of the playback time Video Playlist Vimeo Card Start Playback YouTube Card VEVO Card CNN Video Card HBO GO Card
  38. 94.

    REport Metadata 4 CardRuntime My Trip to New York EXPENSE

    ITEMS (0) PURPOSE: $0.00 USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item $336.87 USD 09/01/2013 $981.08 USD 08/23/2013 $1,223.41 USD 09/07/2012 $1,223.41 USD 09/07/2013
  39. 95.

    REport Metadata 4 CardRuntime My Trip to New York EXPENSE

    ITEMS (0) PURPOSE: $0.00 USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item $336.87 USD 09/01/2013 $981.08 USD 08/23/2013 $1,223.41 USD 09/07/2012 $1,223.41 USD 09/07/2013
  40. 96.

    REport Metadata 4 CardRuntime My Trip to New York EXPENSE

    ITEMS (0) PURPOSE: $0.00 USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item $336.87 USD 09/01/2013 $981.08 USD 08/23/2013 CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2012 W Hotels $1,223.41 USD 09/07/2013 REPORTED
  41. 97.

    REport Metadata 4 CardRuntime My Trip to New York EXPENSE

    ITEMS (0) PURPOSE: $0.00 USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item $336.87 USD 09/01/2013 $981.08 USD 08/23/2013 CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2012 W Hotels $1,223.41 USD 09/07/2013 REPORTED
  42. 98.

    My Trip to New York EXPENSE ITEMS (0) PURPOSE: $0.00

    USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item $336.87 USD 09/01/2013 $981.08 USD 08/23/2013 CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2012 W Hotels $1,223.41 USD 09/07/2013 REPORTED REport Metadata 4 25 25 W Hotels NYC @WHotelsNYC Thank you for your stay from 9/4 to 9/7. Hope to see you again! CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2013 W New York 541 Lexington Avenue, New York, New York 10022 • United States • Map Phone: (212) 755 1200 Fax: (212) 319 8344 Thank you for staying with us. RECEIPT Aloft Milwaukee Downtown 1230 Old World Third St Milwaukee, WI 53212 414-226-0122 / 414-266-0133 http://www.starwood.com/ Mr. Stoltz, Robert Page Number 4 Invoice Nbr 1000009494 1515 N Wakefield St Guest Number 58912 Arrive Date 07-01-2011 Arlington, VA 22207- 2137 Folio ID A Depart Date 07-05-2011 No. Of Guest 2 Room Number 2001 Club Account SPG - A41911610734 Time 07-06-2011 03:08 Duplicate Invoice EXPENSE SUMMARY REPORT Currency: USD Date Food/Bev Telephone Misc Room/Tax Other Total Payment 09-01-2012 $ 0.00 $ 0.00 $ 23.00 $ 159.16 $ 0.83 $ 182.99 $ 0.00 09-02-2012 $ 0.00 $ 0.00 $ 23.00 $ 57.25 $ 0.30 $ 80.55 $ 0.00 09-03-2012 $ 4.71 $ 0.00 $ 23.00 $ 216.41 $ 1.42 $ 245.54 $ 0.00 09-04-2012 $ 0.00 $ 0.00 $ 23.00 $ 216.41 $ 1.13 $ 240.54 $ 0.00 09-05-2012 $ 0.00 $ 0.00 $ 0.00 $ -171.75 $ -0.90 $ -172.65 $ -576.97 09-06-2012 $ 0.00 $ 0.00 $ 0.00 $ 0.00 $ 0.00 $ 0.00 $ -0.00 Total $4.71 $0.00 $92.00 $477.48 $2.78 $576.97 $ -576.97 Aloft Milwaukee Downtown 1230 Old World Third St Milwaukee, WI 53212 414-226-0122 / 414-266-0133 http://www.starwood.com/ Mr. Dale, Tom Page Number 1 Invoice Nbr 1000321123 San Francisco, CA Guest Number 58912 Arrive Date 09-01-2012 Folio ID A Depart Date 09-06-2012 No. Of Guest 2 Room Number 2001 Club Account SPG - A419321810734 Time 09-06-2012 03:08 Date Food/Bev Telephone Misc Room/Tax Other Total Payment 09-01-2012 $ 0.00 $ 0.00 $ 23.00 $ 159.16 $ 0.83 $ 182.99 $ 0.00 09-02-2012 $ 0.00 $ 0.00 $ 23.00 $ 57.25 $ 0.30 $ 80.55 $ 0.00 09-03-2012 $ 4.71 $ 0.00 $ 23.00 $ 216.41 $ 1.42 $ 245.54 $ 0.00 09-04-2012 $ 0.00 $ 0.00 $ 23.00 $ 216.41 $ 1.13 $ 240.54 $ 0.00 09-05-2012 $ 0.00 $ 0.00 $ 0.00 $ -171.75 $ -0.90 $ -172.65 $ -576.97
  43. 99.

    My Trip to New York EXPENSE ITEMS (0) PURPOSE: $0.00

    USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item $336.87 USD 09/01/2013 $981.08 USD 08/23/2013 CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2012 W Hotels $1,223.41 USD 09/07/2013 REPORTED REport Metadata 4
  44. 100.

    My Trip to New York EXPENSE ITEMS (0) PURPOSE: $0.00

    USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2012 W Hotels A card is:
  45. 101.

    My Trip to New York EXPENSE ITEMS (0) PURPOSE: $0.00

    USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2012 W Hotels A PAGE 1 Render to Size/mode A card is:
  46. 102.

    My Trip to New York EXPENSE ITEMS (0) PURPOSE: $0.00

    USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2012 W Hotels A PAGE 1 Render to Size/mode An APP 2 React to Action / Events A card is:
  47. 103.

    My Trip to New York EXPENSE ITEMS (0) PURPOSE: $0.00

    USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2012 W Hotels A PAGE 1 Render to Size/mode An APP 2 React to Action / Events A FILE 3 Restore to Saved States A card is:
  48. 104.

    My Trip to New York EXPENSE ITEMS (0) PURPOSE: $0.00

    USD STATUS: DRAFT Submit for Approval Onsite Work with MHE Labs REQUESTER: Tom Dale @tomdale Drop receipts here to add to expense report TOTAL AMOUNT REQUESTED APPROVER: Christopher Tse @christse Last saved on September 10, 2013 at 4:30 PM PDT Change REPORT New Blank Item CATEGORY: PAID VIA: Lodging Pay with Square VENDOR: W Hotels REFERENCE #: AMOUNT: 8886747766 $1,223.41 USD DATE: 09/07/2012 W Hotels A PAGE 1 Render to Size/mode An APP 2 React to Action / Events A FILE 3 Restore to Saved States An API 4 REport MetaData A card is:
  49. 106.
  50. 122.

    Agenda To a build a Card Ecosystem based on Open

    Web technologies and Open Source ethos that fights back against lock-in CardStack
  51. 129.

    Show the World what a Card-centric world looks like Card-based

    e-commerce Card-based collaboration Card-based games Card-based communications Card-based governance card-based learning Step 1
  52. 130.

    Show the World what a Card-centric world looks like Card-based

    e-commerce Card-based collaboration Card-based games Card-based communications Card-based governance card-based learning Step 1
  53. 131.

    Show the World what a Card-centric world looks like Card-based

    e-commerce Card-based collaboration Card-based games Card-based communications Card-based governance card-based learning Step 1
  54. 132.

    Make some cards that are useful and share the source,

    allow derivatives Step 2 Existing APIs Fresh Card UI HTML5 Card HTML5 Card HTML5 Card HTML5 Card HTML5 Card OAuth / JSON
  55. 133.

    Make some cards that are useful and share the source,

    allow derivatives Step 2 Existing APIs Fresh Card UI HTML5 Card HTML5 Card HTML5 Card HTML5 Card HTML5 Card OAuth / JSON
  56. 134.

    Building an open Card Catalog based on open source reputation

    Step 3 Cards for End-Users Code From Developers
  57. 135.

    Building an open Card Catalog based on open source reputation

    Step 3 Cards for End-Users Code From Developers
  58. 140.

    Web The most open, amazing, transformative human-made ecosystem ever. This

    is not going to last… Apps The greatest breakthrough in how we use technology in our everyday lives.
  59. 141.

    Web The most open, amazing, transformative human-made ecosystem ever. This

    is not going to last… Apps The greatest breakthrough in how we use technology in our everyday lives. We can’t stay here for ever……
  60. 145.

    Card Engine allows Mobile Web people to builds features that

    go into and extend a native app Open Web Native Apps Good
  61. 146.

    Card Engine becomes a standard extension and plug-in system for

    apps that want to integrate third- party functionalities via HTML5 cards Open Web Native Apps Better
  62. 147.

    HTML5 Cards becomes the successor of native, app store distributed

    “apps” as the interface to the services on the Internet. Open Web Native Apps Best
  63. 148.

    CardStack.io Visual Format Language Container AppLication Card Contracts Secure Data

    Passing Card Execution Environment Card State Persistence Grid Style Sheet (Next talk) Glazier (Reference implementation) Conductor.js, library for writing card contracts Oasis.js, a polyfill for MessageChannel Info on UIWebView / IFrame / WebComponent ZINC via WebSocket / LocalStorage Pre-Announcing Everything you need to build HTML5 Cards and Containers
  64. 149.

    Stacking The Card Deck Reclaiming Our Mobile Future with HTML5-based

    Cards Chris Tse Presented by Follow @christse on Twitter Watch out for the dates for the Card Designathon this summer How to Contribute Designers Check out Glazier on Github. Try it. Developers https://github.com/yapplabs/glazier Look for the launch for CardStack.io later this month Learn More Design and HTML/CSS and help wanted