2015/Post Styling

Notes archived from: http://etherpad.indiewebcamp.com/poststyling

---

Post styling

July 11, 2015 IWC Portland Led by Tantek

Making content look good is one of the toughest problems for indieweb, reason the silos have taken over.

Challenges

Types

• notes
  • be better than Twitter = probably good enough
  • mobile readability
  • best way to make streams look good without taking up tons of whitespace

• articles
  • challenges
    • summary
    • type hierarchy
    • featured image
  • good examples
    • Medium
      • depends on header image
      • single column, no side-by-side
    • Tumblr
    • Ghost default templates

• photos
  • Instagram - full-bleed on mobile
  • also-ran: Flickr

• podcasts
  • good examples
    • soundcloud
      • embeds especially good
      • comments on timestamps (timeline based marginalia?)

• time series data
  • examples
    • cubism.js
    • D3.js
  • challenges
    • pretty static graph generated server-side
    • use R to generate a PNG

• likes
  • good practices
    • include title or some context, not just "likes this post"

• bookmarks
  • good examples
    • pinboard.in - highlight text + bookmark = grabs the text in description of bookmark
    • tumblr reblogging + add a tag
    • pinterest - for things that have a photo "image is the primary reason"

• check-ins
  • Examples
    • Swarm stream
    • benwerd: http://werd.io/2014/checked-into-moscone-center
    • mowens: https://mowens.com/checkins/2014/09/07/1/checking-in-from-my-own-website

• comments
  • threading
    • Facebook: 1 deep

• very long form story
  • stories with chapters
  • books
  • technical docs
  • web standards

• • challenges
    • scrolling vs pagination
    • offline vs multipage per chapter

• events
  • good examples

notification vs mobile vs large display

• truncation?