Web Actions

A New Building Block for the Web

1. What are they?
2. Best (and worst) practices
3. Future of web actions

Web Actions: What are they?

• "the interface and user experience of taking a specific discrete action, across the web, from one site to another site or application."

Web Actions: Demo

• Follow
• Tweet

Web Action Anatomy

1. Button (or link) - user-visible
2. Markup (today: <a href>)
3. Script (unobtrusive) enhancement
4. Interstitial confirmation/choices/input URL
5. Action ("activity"/"intent") URL

Web Action User Flow

1. Click web action link/button
2. Authentication (if necessary)
3. Confirmation (or input, if necessary)
4. Action Completes
5. Return to previous page

Web Action: Worst Practices

• Publishers/UX: media sites / NASCAR
• Providers: Facebook & Google
  • use non-semantic <div> (or worse)
  • require script
  • privacy?
  • slow or memory hog

Web Action: Best Practices

• Publishers/UX: Independent design blogs
• Providers: Twitter, Pinterest, Foursquare
  • use <a href>
  • optional script
  • works on mobile / slow networks

Web Actions: Future UI

• Chrome "Web Intents" developer build
• Mozilla F1/Social (see @mixedpuppy slides)
• Safari Share button built-in
• OSX Facebook integration

Web Actions: Future APIs

• Mozilla Social API & Web Activities
• Google Web Intents

Web Actions: Future Markup

• from <a> to <action>?

• 
    <action do="post" with="permalink">
     <a href=twitter>..</a>
     <a href=pinterest>...</a>
     ...
    </action>
  

• do - verb registry like rel
• with - direct object URL

Web Actions Future: Independents?

• Post to my blog
• Peer to peer: from indie site to indie site
• Discuss and create this weekend in Portland:
  • IndieWebCamp.com - still a few spots left!