Most web pages that have footnotes blindly mimic paper and put them at the bottom of the page, jumping the user to the footnote when clicked on:
This is silly for many reasons. First, computer screens aren't paper; they can easily accordion open and show extra information based on user intent. Second, they cause a user to lose context while reading an article, forcing them to jump away from what they are doing; this is annoying.
Finally, and this is the most damning, they don't actually work correctly on many mobile devices. If you click on a footnote anchor, read it, then click back, most mobile browsers will incorrectly jump you back to the complete top of the page, not where you were reading before. This makes footnotes essentially impossible to use on mobile web browsers; you don't want to take the cost of clicking them since you will completely lose your position when you try to go back to reading the main article or story.
So how should footnotes work on the web and eBooks? They should popup immediately next to where you are reading, so that you won't lose context or run into any of these problems. For example, click the star next to this paragraph to see how footnotes should work*.
Both Inkling and iBooks do the right thing for their footnotes, popping footnotes up in context. The Kindle doesn't, jumping you out of context of what you are reading, which is difficult when dealing with a footnote heavy work. After awhile you just give up and stop clicking them on that platform.
How do you get these kinds of footnotes yourself? The easiest solution is to use bigfoot.js, an excellent open source library that will add contextual footnotes to your web page. You can also use Inkling Habitat to author footnotes that will contextually appear in eBooks published on Inkling or exported to ePub 3; iBooks will display contextual footnotes for ePub 3 footnotes as well.
Subscribe to my RSS feed and follow me on Twitter to stay up to date on new posts.
Please note that this is my personal blog — the views expressed on these pages are mine alone and not those of my employer.