implement a modern footer

[ghwood]

The footer currently contains a mix of links of different types, including links to affiliated sites, a link to a part of the main site, and a link to key legal information.

This mix of link types has no apparent organizational coherence, making expectations about what the viewer ought to find there or where the links will lead them. For example, it is unclear that “IRTF” leads to an entirely different website.

Also, the footer does not currently contain information and items that are commonly included in current webpage footer areas. Examples of these include copyright information, links to social media channels, and a summary version of a sitemap.

A modern approach to the footer section would allow for more of the commonly accepted links and information (social media and copyright), clearer organization of information and links, and greater context for links that would benefit from that.

A full specification for how this will be implemented is yet to be developed

[mgax]

We could implement a column-based footer, such as on the Cloudflare website, with a StreamField editor, that allows creating columns, and links within columns. The links could either be external or internal, like in the Megamenu (#367). @ghwood would that provide the right editorial flexibility to organise the footer properly?

[ghwood]

Yes, that would work to provide the footer navigation links. Would it also be possible to have the kind of elements below the stacked columns on the Cloudflare site?

[mgax]

Would it also be possible to have the kind of elements below the stacked columns on the Cloudflare site?

Yep, sure, we can set up a list of links for that too.

[ghwood]

The Cloudflare model is good. Would it be helpful to have a more detailed specification?

[mgax]

Would it be helpful to have a more detailed specification?

Here's a draft, based heavily on the Cloudflare website footer. Let me know if it matches your expectation and how you prefer to handle the optional bits.

Sections

Set up a content structure to edit footer sections. They will be displayed as columns.

Each section should have:

• A title.
• A list of links, with title, page (reference to internal page) and url fields. Exactly one of page or url may be set. Setting url requires a title; setting page will use the page's title, unless title is also specified.

For mobile viewports, the sections will be collapsed by default, and stacked vertically.

(optional) On mobile, the first section is always expanded, to make its contents more visible.

Bottom links

Set up an additional list of links (same structure as the links in a section). They will be displayed below the sections.

(optional) Move the social media links from the header to the footer, left-aligned, on the same line with the additional links. The various URLs can be configured at /admin/settings/utils/socialmediasettings/ but are currently not specified.

(optional) Add © {year} IETF Administration LLC at the start of the bottom links.

[ghwood]

@mgax Looking at the www.cloudflare.com footer as the example, this looks good to me.

On the (optional items), please do:

• handle mobile as described, and
• include the social media links on the same line as the bottom links.

However, do not add the © notice

Thank you!

[ghwood]

This works as expected on https://ws-modern-footer.dev.ietf.org, however the styling of footer column elements needs to be updated so that the line spacing between footer links that wrap and the footer links above/below are more clearly differentiated. Reducing the vertical spacing between wrapped lines would be my vote to try first. Rough mockup here to illustrate the idea.