/
Brief: Footer v. 0.1 [Variant]

Brief: Footer v. 0.1 [Variant]

Owned by nathan.mckean@reckitt.com (Unlicensed)
Last updated: Jun 28, 2022 by Sergiy Nalyvayko (Unlicensed)
5 min read

Component type

Footer

Document status

DRAFT

Design source (in Figma)

Footer Block

Author

@nathan.mckean@reckitt.com (Unlicensed)

Responsible

@Julia Boyarshchikova (Deactivated)

The global footer sits at the bottom of the page and delivers navigation paths to key content that isn’t delivered in the header. This is traditionally legal and policy content and social pathways.

Use When 

  • (Use always)

Don’t Use When 

  •  

Related/Similar Components 

  • X 

  • X 

Key Content  

Item 

Type 

Notes 

Legal Statement/s

Text

e.g. © 2022 Reckitt Benckiser - All Rights Reserved

(Additional) Legal Statements

Rich Text Area

Not currently in design, but Nurofen UK gives an example. Short term need to cover legal bases, but eventually should be evolved. Naming is TBC.

Link list

Sub-component?

 

Social links list

Sub-component?

Whilst social links could use “icon buttons” in a list, it might be worth elevating to a component in case it is needed to be repeated contextually within a page or elsewhere across the site

 

 

 

 

 

 

NOTE: Due to the relative simplicity of the components that make up the base footer, they haven’t been split out into separate briefs, but could be if needed.

Visual Style 

The MVP deliverable for footer has a single visual style - effectively a simple footer.

The wide viewport view of Chameleon (base) footer.
The narrow viewport. Not the potential conflict on order of items which may require a design tweak or discussion.

 

Behaviour 

  • The MVP footer only includes basic behaviour - text and links

  • Because links sit within the footer, they can take the “subtle” link style as they are recognised to be links

  • Links will take standard link states (default, hover, focus, active). As menu items, visible visited states are unlikely.

  • External links will take the external icon style as is a general style across all links.

  •  

Editorial 

  • Ensure legal content is approved by legal. DISCUSSION: Is there value in driving the year dynamically?

  • Keep navigation links clearly named and reflective of their destination

Accessibility 

  • The footer content is a landmark by wrapping in <footer>. Like header, only <footer> tags directly under <body> are a landmark. <footer> can be used within other elements such as cards, etc as appropriate without taking a landmark role.

  • Whilst social links are shown in the icon-only presentation, it is possible that brand may want to display text and icons in the future. Ideally, text is still present in the HTML but is visually hidden so that it appears as a text link in HTML only views. Icons could equally sit out of the HTML and be delivered with CSS only.

  • Ideally social links have a heading above them (in this case, visually hidden). This will help screen-readers navigating by heading to locate the content easier. In some Reckitt footers, we also see these headings being applied visually. See examples below.

  • MDN notes: “Prior to the release of Safari 13, the contentinfo landmark role was not properly exposed by VoiceOver. If needing to support legacy Safari browsers, add role="contentinfo" to the footer element to ensure the landmark will be properly exposed.”. This is simply a note that as part of accessibility testing, we might find the need to gap-fill deficiencies in browser support. Best practice would not normally duplicate roles as well as semantic HTML5, but occasionally it is necessary until the browsers or screen-readers fill their gaps.

Analytics & Data 

  • Standard ability to isolate elements within GTM to be able to track clicks, visibility and other common metrics.

Future Expansion 

  • Footers may be enhanced to allow nested links (e.g. mini site maps) like on Dettol - once tested to show use and value.

  • Contact details will also become available within the footer. These can reuse content from contact-us content.

  • Footers may include optional slots for additional functions - most commonly expected to include:

    • Country selection (if not in header)

    • Language selection (possibly, but with testing and consideration of header duplication)

    • CRM Sign Up (but also potentially delivered separately as an <aside> before the footer

  • When DTC functionality is integrated, additional shopping contexts (e.g. shipping policies, payment gateway logos etc) may also be required.

  • Footers may ultimately repeat logo usage.

Wider Conversations that may impact this 

  • Legal & Regulatory Auditing: Some footers, particularly across Health brands include a visible reference to page approval in the DAM. This may be a requirement (in either the header or the footer). It is hoped that because this is internal, we can start to deliver this content within the code and not publicly visible -which would be a backend element.

Inspiration from elsewhere 

  • X

  • X

Examples

 

Useful links