Streaming live at 10am (PST)

Responsive footnotes or sidenotes

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

@Waldo: Here is the Public share link to webflow designer so we can continue discussion here :slight_smile:

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.