HTML5 & Friends

HTML5 slide from Chris Heilmann's lecture


This week’s MoJo featured more great material from Chris Heilmann, John Resig, and Jesse James Garrett that mostly focused on building a user experience.  Of course, when thinking about open projects “user” takes on an expanded meaning and, as Resig stressed, every user is a potential future collaborator.  In a previous post I talked about the old design of Re:Poste that featured some of the ideas discussed last week, but compared to the sites we saw presented this week, really shows its age both conceptually and technologically.  This week I’m doing some v2.0 design prototypes that take advantage of some of newer possibilities.

To start, I’m throwing out the pseudo-window that contained the old design.  It’s no longer necessary: it was intended to create context, but with the development of microformats and some new CSS3 tricks we can do much better.  The application Readability demonstrates this to great effect by transforming content from its original look and feel to a beautiful, text-centric look:

Readability, applied to a Fox News article

Readability, applied to a Fox News article


This is a perfect technique for an application like Re:Poste.  Instead of trying to fit everything into a little window that loads on top of the article and all its clutter, I can free the text and overlay my own interface that emphasizes just the content and the commentary.  Even better, I already know it works despite the fact that Fox News doesn’t actually use the microformats Readability asks for.  They appear to just be parsing the site’s div ids and classes, which means that I can do the same thing on a variety of sites (though it’s more labor intensive than microformats).

Now that the text is isolated I can start adding my data and metadata.  My first attempt looked like this:

Re:Poste 2, sketch 1

First sketch of a modern Re:Poste interface (click to enlarge)


This interface is starting to integrate the article with the commentary and recognize specific segments of the source content.  The strips along the left are color-coded data about the text to the right of them, the far left column characterizing the entire article, the second column is the paragraph level, and the third is line by line.  Click on any signifier and the pertinent section is highlighted, carrying over to the right where comments about that section are displayed.  In addition to the text, comments show the author’s rating of the highlighted section and their claim of expertise (the CFL icon, which is pretty horrendous).  While this version adds granularity and integrates with the article better than the original, there are obviously still some issues.

Re:Poste 2, sketch 2

Second Re:Poste 2 interface sketch (click to enlarge)


Sketch 2 changes the comment column to show all four rating options, with the vertical size proportional to the weight of comments in that category (this is a weighted trust metric that includes reputation and metaratings).  There are fewer icons to display data, but the data is used to adjust the order of comments.  I would still like to expose the raw data, but as long as it is represented I think the actual numbers can be hidden behind a button on the chrome.