The following layout recommendations are intended to help create more effective, user-centered experiences across the CMEI website. These recommendations are designed to improve content discoverability, support consistent navigation, and enhance overall site usability. While not every recommendation will apply to every page, CMS content editors are encouraged to incorporate these best practices when possible to create a more cohesive user experience.
This guidance will continue to evolve as new CMS templates become available. Please refer to this page regularly for updated recommendations and examples.
Visit the Template Library for examples of all CMS templates.
Return to Homepage Link
Include a prominent homepage or landing page button at the top of evergreen pages. This provides users with a clear and consistent way to return to the main page of a site, reducing navigation effort and helping them quickly reorient themselves. Consistent placement and button styling across related pages create a predictable experience, making it easier for users to navigate the site. This approach is especially valuable on content-heavy or deeply nested pages where users may struggle to find their way back to key entry pages.
Example:
Consistent Section Headers
Establish consistent headers across similar page types. This standardization creates familiarity and helps users scan for the information they need. Apply consistent heading hierarchy (H2, H3, etc.) to support accessibility and content structure.
Example:
- Overview
- Why It Matters
- Resources
- Related Content
Takeaways and Callouts
Use Key Takeaways or Why It Matters content blocks to improve readability on content-heavy pages. Incorporating a visually distinct Key Takeaways, Why It Matters, or similar summary block within the body of the page helps break up large amounts of text and provides users with an opportunity to quickly scan the page and absorb the most important information.
Place these content blocks strategically throughout the page, such as between major content sections, to create visual variety and reduce the appearance of an uninterrupted wall of text. Use concise, plain-language summaries or bulleted lists that highlight the page's primary messaging.
These blocks improve content scannability, reinforce critical information, and help users understand the value and relevance of the content, even if they do not read the page in its entirety.
Additionally, including a visual Featured Resources callout block can help highlight the most important resources, reports, tools, or webpages for users while also breaking up large sections of text on the page.
Examples:
Why It Matters
-
Improve content scannability.
-
Reinforce most important information.
-
Help users understand key content, even if they do not read the entire page.
Key Takeaways
- Improve content scannability.
- Reinforce key information.
- Help users understand the content, even if they do not read the entire page.
Featured Resources
Card-Based Listings
When linking to multiple programs, initiatives, offices, or resources, use visual cards rather than long bulleted lists. These cards are easier to scan and help break up large sections of text. For additional visual contrast, use the cards in a section with a different background color.
Example:
Supporting Offices
Sign up to receive news and updates from CMEI.
