Add header and footer guidance

[stephiescastle]

Description

Our documentation does not include any guidance or examples for the header and footer. We should add this to the Explorer-1 storybook, as users have been requesting this guidance, and it's also one of the final pieces to providing a full site template.

Some notes to consider to help determine scope:

• Do we want to add both internal and external header/footer? Based on user requests, the external header/footer should be prioritized if we don't have time for both.
• What is our goal with providing the site header and footer? Is it to provide templates for building an external site with its own site navigation? Or is it to provide templates for building an external site that mimics a WWW sub site, such as: https://www.jpl.nasa.gov/go/astronomy-and-physics ? Note that in the sub-site, the header and footer are unchanged. Only the secondary navigation is custom.
• If the goal is to allow users to create WWW sub-sites, then we will also need to add guidance on secondary navigation and how it interacts with heroes on the page (scope increase)
• If the goal is to provide a customizable header and footer, note that in the external header:
  • There are no guidelines on where to put a site title since the header was originally designed for a single site: www.jpl.nasa.gov. Do we want to provide an alternative that includes a site title? We will need design guidance if so.
  • There is no "home" button or a way for users to navigate to the homepage. This wasn't an issue for JPL, as the tribrand logo was the "home" button. A simple solution, if design approves, is to add "Home" as the first item in the navigation. We could alternatively link the site title, if it gets added.
• How does this affect applications that only need the header and footer? Should we provide a separate resource for that?

[stephiescastle]

Results from a quick chat in our team meeting:

• We need both external and internal header/footer
• External header and footer designs: External header and footer design mockups #185
  • For the external header, we will probably need to offer a new option, as the header should be different from the public JPL website
  • Footer: should relate to the site that it is on--its content does not need to be the same as the public JPL website (this is in response to the legacy guideline that would require the footer to match the footer from the public JPL website)
• Setup pattern for documenting internal and external components: Combine Storybooks #9
  • We need clear documentation about how to use these external and internal components. A couple places this documentation could live:
    • All on Storybook
    • JPL's branding site could be the "accompanying documentation website" to Storybook, with more detail being covered there regarding internal and external site guidelines.
    • We may do a hybrid of the two approaches.

[Scotchester]

We need clear documentation about how to use these external and internal components. A couple places this documentation could live:

• All on Storybook
• JPL's branding site could be the "accompanying documentation website" to Storybook, with more detail being covered there regarding internal and external site guidelines.
• We may do a hybrid of the two approaches.

I would personally prefer not to put policy-type content in Explorer 1's Storybook, and would prefer to keep that to usage guidelines for designers and developers.

[stephiescastle]

I would personally prefer not to put policy-type content in Explorer 1's Storybook, and would prefer to keep that to usage guidelines for designers and developers.

Agreed. I'm thinking policy type documentation would go on the branding site, but I think we may need a clear indicator in Storybook differentiating the components. Perhaps just the organization in the sidebar is enough, or maybe even a visual badge, flagging something that needs special consideration (ex: ).

[gekim84]

https://www.figma.com/file/4w0ycZrXntqiJU9K6zfyvZ/?node-id=0%3A10658

Barebones Header and Footer

Example - Science and Technology

Example of Hover States: (Follows WCP styling except the down chevron arrows)

[gekim84]

submitted for design review

[gekim84]

v9 - Uncertainty Hidden

v9 - Uncertainty Visible

v9 - Mobile

Airplane Replacement

Filters