search

ietf-tools / www

A customized CMS for the IETF website
BSD 3-Clause "New" or "Revised" License
22 stars 45 forks source link

implement a modern footer #377

Closed ghwood closed 1 month ago

ghwood commented 6 months ago

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 commented 4 months ago

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 (https://github.com/ietf-tools/wagtail_website/pull/367). @ghwood would that provide the right editorial flexibility to organise the footer properly?

ghwood commented 4 months ago

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 commented 4 months ago

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 commented 3 months ago

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

mgax commented 3 months ago

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:

(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 commented 3 months ago

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

On the (optional items), please do:

However, do not add the © notice

Thank you!

ghwood commented 1 month ago

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.

image