Review marketing and cloud website navigations

[kwm14]

Sites to review

• ubuntu.com
• canonical.com
• jujucharms.com
• snapcraft.io
• maas.io
• landscape.canonical.com

[kwm14]

Navigation audit

vanillaframework.io

• navigation-height: 48px
• navigation-logo-height: 32px
• navigation-item-padding: 20px
• navigation-font-size: 14px

ubuntu.com

• navigation-height: 54px
• navigation-logo-height: 25px
• navigation-item-padding: 12px
• navigation-font-size: 14px

canonical.com

• navigation-height: 48px
• navigation-logo-height: 30px
• navigation-item-padding: 20px
• navigation-font-size: 14px

jujcharms.com

• navigation-height: 59px
• navigation-logo-height: 32px
• navigation-item-padding: 19px
• navigation-font-size: 14px

snapcraft.io

• navigation-height: 48px
• navigation-logo-height: 32px
• navigation-item-padding: 20px
• navigation-font-size: 14px

maas.io

• navigation-height: 59px
• navigation-logo-height: 25px
• navigation-item-padding: 20px
• navigation-font-size: 14px

landscape.canonical.com

• navigation-height: 48px
• navigation-logo-height: 25px
• navigation-item-padding: 14px
• navigation-font-size: 14px

[kwm14]

• Snapcraft matches vf.io as it's on the latest version of Vanilla vanilla-framework 1.6.5

• Ubuntu, MAAS and Canonical are using vanilla-framework 1.6.3 but since then we've made updates to the header navigation in v1.6.4 and v1.6.5 releases, so they're also out of sync but also have custom CSS styling

• Juju and Canonical currently are running on an old version of Vanilla cloud-vanilla-theme 0.1.0 so we expected these values to be different.

[kwm14]

Next steps

As Vanilla is the source of truth and the default we should use these styles:

• navigation-height: 48px
• navigation-logo-height: 32px
• navigation-item-padding: 20px
• navigation-font-size: 14px

We will review and update paddings so that they follow our new baseline of 1rem. Also we need to consider the font size, as our Tabs pattern currently uses 16px so we want to retain typographic hierarchy with navigation items.