The global system that a visitor can use to move around a website. Orients users by reinforcing the context of a destination prior to navigation.
A masthead is a collection of navigation elements (structured nav, search, and elevated links to the mostly frequently used features including account and cart) that provide users with global pathways to the most important information across the site.
The masthead promotes the company brand and makes it instantly recognizable to the user (via the Dell icon and brand colors).
Masthead navigation should not be a sitemap or a table of contents. Some patterns don't belong in the global navigation menu.
The masthead must scale to work on all digital properties owned by Dell Commerce Service Group (DCSG) including, but not limited to:
Any updates to the site structure and link labels (within the limits set when the code was written) must NOT require additional code changes.
The types and variants on this page are meant to communicate the visual and interaction design intention. Taxonomy and content herein should be consider placeholder.
The unauthenticated masthead is used for all experiences on Dell.com. Before a user signs-in, they are presented with the unauthenticated state.
After the user has signed in, they are shown the authenticated masthead in a state that's contextual to their account (personal or Premier).
The unsegmented masthead menu (seen on the homepage of Dell.com) provides users the option to browse deeper into the For Home (personal) segment or For Work (business) segment via products, solutions, services, deals or financing.
A segment-specific masthead menu is seen after users navigate to a For Home or For Work destination, or as the result of navigating to Dell.com via organic external search.
The Premier masthead has an additional menu for Premier tools.
The sitelet masthead is for Dell-branded pages or sitelets that are not within Dell.com’s navigation structure.
The simplified masthead keeps users focused on the task at hand and limits the likelihood that they will navigate away. Used predominately in cart and checkout, and workflow pages.
Don’t put too many links in the masthead. Google suggests no more than 100 total links per page (including the masthead menus and the rest of the page).
Link labels must take popular keywords into consideration.
“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” - Antoine de Saint-Exupery. This guidelines is very important when it comes to the masthead because it shows on every single page. The more we have in the masthead, the farther we push down the page content, and the more we overwhelm the site visitors.
Footer navigation is used to link to parts of a website that are more frequently used than others, but does not follow the hierarchical structure of the masthead navigation.
Footers also house functionality that's important regardless of what page users are visiting, such as language and country selection.
A footer has two sections - the top footer and the legal footer ...
Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.
Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.
To be completed.
The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.
The A11Y Style Guide has excellent examples of markup for site logos.
Please follow the best practices for menu bars from WAI-ARIA authoring practices 1.1.
Please also refer to these recommendations for menubars from WAI-ARIA 1.1.
You may refer to this example of a navigation menubar from WAI-ARIA practices 1.1.
You may also refer to this tutorial for flyout menus from Web Accessibility Tutorials.
Please follow the best practices for contentinfo from WAI-ARIA authoring practices 1.1.
Please also refer to these recommendations for contentinfo from WAI-ARIA 1.1.
You may refer to this example of a contentinfo landmark from WAI-ARIA practices 1.1.
You may also refer to this tutorial for page footer region from Web Accessibility Tutorials.