IndieWebCamp is a 2-day creator camp focused on growing the independent web

event


An event is a type of post that in addition to a post name (event title) has a start datetime (likely end datetime), and a location.

For information on IndieWebCamp events themselves, see:

Contents

Marking up

Event posts must be marked up with h-event.

Optionally they can be wrapped in an h-entry as well (though it's not clear this is necessary). Parsers should be prepared to handle events without an h-entry tag.

Accepting RSVPs

A site publishing event posts should accept rsvp webmentions and update the event's attendance information accordingly.

See: http://microformats.org/wiki/rsvp

Accepting Invitations

A site publishing event posts should accept invitation webmentions and update the event's "invited" information accordingly.


IndieWeb Examples

In implementation order:

Ben Werdmuller

Ben Werdmuller uses idno on werd.io to post events since 2013-06-25 (right after IndieWebCamp 2013!), which automatically accept RSVPs from other sites using RSVP webmentions. Events may also be replied to in the same manner as notes and articles. E.g.

Aaron Parecki

Aaron Parecki uses p3k on aaronparecki.com to post events since 2013-07-08, which automatically accept RSVPs from other sites using RSVP webmentions. E.g.

Bret Comnes

Bret Comnes has implemented events inside of jekyll for bret.io since 2013-07-25. It supports receiving webmentions, but does not parse responses for RSVP status or display reply contexts at the moment. Example:

The event data is stored in the YAML which separates the final layout and the event data. A form is used to assist in creating the event post via prose.io.

Silo Examples

Facebook pre-2014:

Facebook pre-2014

Design Brainstorming

As ideas here are implemented, they should be moved to actual sections of their own with links to examples.

Image header

Typical silos event posts (e.g. Facebook, Google+) provide (encourage) the option of an event image - used as a header for the event. This header is used at the top of the event permalink page, and also often shown in an event list view (e.g. on Facebook).

Such header images are often quite a good visual/emotional draw for the event. Header images are typically representative of the event, sometimes displayed with the name of the event superimposed on top.

If you're posting events, consider providing this option for yourself (in your event posting UI or otherwise as part of your publishing system) as part of your indieweb event posts as well.

Since the photo would be deliberately chosen and associated with the event, we could extend h-event to represent the photo as well with:

  • u-photo (re-used from h-card).

Screenshots needed

Map image

Some silos event posts (e.g. Facebook, Plancast) automatically generate a horizontal rectangle map view of the event location.

In particular, on event posts, the location is shown *first* as a centered dot in a wide and short rectangle map that shows the local area, and then second underneath as text address.

Showing a map and showing it early is both visually striking and instantly provides a sense of "is this near me", or "is this near somewhere I'd like to be or might be anyway". It quickly gives you context in a way that a purely textual address does not.

Screenshots needed

A horizontal map (banner map?) from a Facebook event:

event-map-horizontal.jpg

Attendees

Every event silo by default shows who else is going, and more so, often show first who else you know that's going to the event. Quickly seeing "who else is going" or might go or is invited is a huge sense of context/comfort as well, especially with little face icons.

E.g. Facebook clusters (potential) attendees by:

  • Going
  • Maybe
  • Invited

(and declined is typically hidden)

Screenshots needed

Event attendees on Facebook:

event-attendees-facebook.png

Note the going/maybe/invited sections on FB first show *only* those you know (if any), and *only if* there's no one you know in a section, does the section show 5 icons of others who said they're going/maybe or were invited. In either case, the order of icons is most recently responded/invited first.

Public events don't necessarily have a public list of invited users, depending on the system, but nonetheless list attendees. For example, on Plancast:

public-event-plancast.jpg

Plancast only shows invitees on an event to the event organizer, i.e. when the event organizer themselves is looking at the event permalink page.

Invitations

Main article: invitation

People like being explicitly invited to events. One way to send invitations with indieweb events is:

  • Add people explicitly to an invited list on the event (present on the event page as noted above in Attendees) - with icon and name linked to their home page.
  • Send webmentions to their home page from the event permalink.

The idea is that a person's site's webmentions queue sees webmentions from the event to the home page and interprets that as an invitation to the event. If needed we could add some markup like rel="invitee" or class="u-invitee" or class="p-invitee h-card" to the event page so that consuming applications could tell the difference between mentions and invitations of people.

Also see indieweb messaging, which also uses a webmention to the user's homepage.

POSSE

How and where should event posts be POSSEd?

Event-aware destinations to consider:

Problematic event-aware destinations:

Other destinations:

  • Twitter - can we compress the details of an event post into 140 characters or less? (117 to leave room for event permalink URL, 116 for https).
    • How do we abbreviate what/when/where "fields"? E.g.
      • What: summary... (ellipsed)
      • Where: @-alias of venue (how do we do venue lookup on Twitter? Perhaps use Foursquare to lookup the venue and see if their venue entry has a Twitter for the venue?
      • When: YYYY-MM-DD HH:MM (seems quite long, what's the best way to compress a datetime in a human readable way?)
      • CC: @-names (of folks to explicitly notify, like an invitation)
    • Should such fields be explicitly labeled e.g. with "What: / Where:" etc. with linebreaks between them?
    • Or should we figure out a plain text event serialization format since things like an @-named venue already reads well "at venue"? (see picoformats for prior work/research on this)

Events index

Indieweb sites with event posts (and perhaps even just RSVP posts) could also provide an index of what events they're attending, e.g.

  • at a /events URL

From a human design perspective this makes sense as:

  • "these are the events I'll be at"

which is likely a union of personal event posts and RSVP yes (and maybe maybes too?) posts.

Kind of like a view of your public calendar of events, regardless of whether you're organizing/hosting or just attending.

Such an events index could be displayed as a list view (similar to the default view of fb.com/events) or as a calendar view (like gCal), or with an option to toggle between them.

An easily-discoverable link should probably be displayed from the user's index or homepage.

  • Potential for microformats or microformats-like markup to indicate a user's calendar as linked from their h-card?

Silo Examples

Facebook

Facebook has had one of the more interesting/nicer/cleaner event page designs for quite some time.

Here is a screenshot of the 2014-02-12 Homebrew Website Club event (for the SF location) on Facebook, manually POSSEd by Ben Werdmuller from http://werd.io/2014/homebrew-website-club-meeting :

20140227-facebook-event-example.png


Mobile Web UI:

Mobile iOS Screenshot


Redesign 2014-02-27

Here is what the 2014-02-27 redesign (limited rollout as of that date) looks like:

Screen Shot 2014-02-27 at 16.10.11.png


Mobile Web UI:

2014-03-03-fb-event-new-ios-web-ui-1.jpg
2014-03-03-fb-event-new-ios-web-ui-2.jpg
2014-03-03-fb-event-new-ios-web-ui-3.jpg


Shall we count the design regressions?

  1. Global noise in the left column replaces the very relevant and easily skimmable who is going, maybe, invited lists of people
  2. Big blank area where there is no event header image
  3. Lots of visual noise from the gray background between the white blocks of text
  4. Missing the map overview graphic
  5. Less clear who is going/maybe/invited
  6. Lack of hierarchy (ordering) of going/maybe/invited removes subtle invitee incentive to upgrade from invited to maybe to going.
  7. ... more?

See also