What's the most effective means of annotating scientific web pages?

Question

I was wondering what evidence there is on the most effective means of presenting annotations to scholarly (or quasi-scholarly) work on the web.

I'm planning to put some articles onto the web, each of about 2000 words. Pop-science stuff, with a range of readership, from lay public to subject professionals.

On paper, we might use footnotes, endnotes or the like. The "...for dummies" books (pdf) use a wide left margin with "tip" and "technical stuff" icon plus text, as well as pull-outs and bordered boxes. Across the web, I see footnotes, occasionally sidebars, popup tooltips. WHATWG used a left-margin with callouts into the text

These annotations should be noticeable but not intrusive, insofar as that's possible.

The annotations I have in mind might be sentence or four, possibly containing links, but rarely (if ever) needing images as part of the annotation. (icons to indicate an annotation, and maybe the nature of the annotation, would be fine by me - as per the "... for Dummies" books)

I expect most of the readers to be using large-screen browsers rather than small-screen mobile devices such as mobile phones (cellphones). I've no objection to using javascript to give the annotations a web-app feel to them.

Answer 1

Grantland, a sports website that's an offshoot of ESPN, has a nice-looking solution that's similar to WHATWG's sidebar callouts, except they do it on the right, use a wider sidebar, use smaller grayed-out text, and make use of linked numbered annotations. I think that their particular implementation would be a good match for your use case. You can see an example in this article about the NBA draft.