Make a plan for footnotes going forward

[JonellaCulmer]

What we're after: We need to standardize our footnotes in two ways:

• All visually structured the same way.
• Ensure they are used in the same way and function the same way. The application of footnotes is different across the site and we need to bring them in line everywhere they are present.

Things to consider:

• Should these include links?
• Do we retain footnotes at all?
• How should they be formatted, in paragraph and as a reference? Superscript?
• What can we accommodate technically?

Action items:

• Mock up a pattern of how footnotes should be used and styled
• Include details about when they should be used and when alternatives should be employed instead (ex. where to include that same information elsewhere)
• Loop in content-type offices (Info, RAD, Press, Public Records, OGC(?)) to get buy-in and establish consistency

Completion criteria:

• Style and use-case for footnotes is documented and shared with offices
• Open followup tickets to:
  • Add to pattern library
  • Add to content guide
  • Wagtail rich-text editor modifications

[JonellaCulmer]

@AmyKort @dorothyyeager @patphongs @johnnyporkchops Kathy, David and I discussed footnotes and have some thoughts on ways to improve and/or reduct our use of footnotes. Footnotes are used heavily on court case pages and reporting period pages. Removing these footnotes entirely would prove to be a difficult conversation to have with these offices.

Below is a list of ways we can improve what we have now. Please let me know your thoughts. Happy to discuss this further with the larger group to strategize on how we would accomplish some of these items.

• Need to consider adjustments to the reporting period table. Smaller tables, or filtered tables, that embed the footnote within the table also display the footnote right below it. This is redundant. We should consider alternatives, or improvements.
  • Example: https://www.fec.gov/help-candidates-and-committees/dates-and-deadlines/2020-reporting-dates/24-and-48-hour-reports-independent-expenditures-periods-congressional-primaries-2020/
• Consider glossary items to replace header notes on Congressional pre-election reporting dates, or other static content. Technical question: Can we include glossary items inside tables?
  • Examples: https://www.fec.gov/help-candidates-and-committees/dates-and-deadlines/2020-reporting-dates/prior-notices-2020/election-report-notice-alabama/,
  • https://www.fec.gov/help-candidates-and-committees/dates-and-deadlines/2020-reporting-dates/congressional-pre-election-reporting-dates-2020/
• Consider incorporating text on screen instead of relying on footnote to display pertinent information.
  • Example: Alabama primary* https://www.fec.gov/help-candidates-and-committees/dates-and-deadlines/2020-reporting-dates/congressional-pre-election-reporting-dates-2020/
• Cannot currently display multiple footnotes at the same time. Example: Alabama primary* https://www.fec.gov/help-candidates-and-committees/dates-and-deadlines/2020-reporting-dates/congressional-pre-election-reporting-dates-2020/
• Bring styling in line with court case footnotes.
  • Example: https://www.fec.gov/legal-resources/court-cases/baker-v-fec/

cc: @djgarr @kathycarothers

[dorothyyeager]

I'm fine with this, being someone who thinks footnotes have a place in legal documents but not so much in writing for the web. I've found through years when I did the Record that OGC is usually OK with actually bringing the footnote into the body of the main text, especially when you explain the constraints in Wagtail with anchor links. That would be my suggestion for the other offices that need to buy into this that you listed. Not to mention that if the information is important enough to include, it will get lost in the footnote.

Wagtail tables have a lot of constraints. To include the glossary link, you would have to do the table as html code rather than using the glossary tool, which doesn't work in the Wagtail table tool. And we'd have to test if that works. The way we coded glossary links before was this code:
<span class="term" data-term="term">term</span>

Needless to say, manually coding glossary links is not going to be a fun chore for the person who does it for reporting pages.

[AmyKort]

This all looks good to me. I'm also happy to meet to talk more specifically.

[JonellaCulmer]

Followup tickets to handle the next steps of this work have been opened.
#4406
#4407
#4408
#4409