We love how Harvard Law Review has implemented responsive footnotes as sidenotes, and would like to adopt a similar approach for our to be launched site, which uses dynamic content.
On HLR, they have annotations in the text which is connected visually to a side note in the right side margin.
On smaller screens, the user has to click on the annotations to show the sidenotes:
Responsive foot notes are described here by Brad Frost's design patterns and we found this tutorial, but that seems like a lot of custom javascript.
Maybe I could have done this with page by page layouts, but since we are using the Webflow CMS and dynamic content, we are struggling.
I will try to explain via screenshots:
This is our current solution (slightly censored):
At the moment we have played around with using an ordered list....
...which we have linked nd create manual links from the text using in-page linking, but this does not work with our dynamic content, and I do not think this will be possible make responsive.
Any help is much appreciated!
Public share link
