Design Clear Page Structures for All Users
HarvardSites gives website editors powerful tools to build flexible and accessible layouts. This guide will help you choose components and organize content in ways that support reading flow, zooming, and assistive tech.
Why it matters
Scanability: Visitors often scan pages before they read. A clear structure helps them orient and find what they need.
Zoom and magnification: Users who zoom to 150–200% or use screen magnifiers need layouts that reflow cleanly and preserve hierarchy.
Assistive tech: Screen reader users depend on predictable structure, semantic headings, and logical reading order.
How to do it
Use Section Headings to break up long pages.
Add short, descriptive titles for each component block.
Group related content together using Section Heading + Columns, Vertical Cards, Button Style Cards or CTAs.
Choose layout components that stack well.
Use 50/50 Cards, Vertical Cards, Button Style Cards or Columns when presenting parallel or grouped information.
Check that the layout stacks cleanly on mobile and when zoomed; tables can be especially messy, it's better to keep them simple.
Avoid overwhelming complexity.
Don’t stack too many interactive elements like Accordions or Tabs without a clear structure.
Avoid side-by-side layouts for dense, narrative content. Stacked layouts are usually easier to read.
Accessibility tips
- Test your page at 200% browser zoom. Can you follow the content flow without losing context?
- Make sure headings follow a logical order (H2 → H3 → H4). Don’t skip or use headings for visual style.
- Use components and layout patterns consistently across similar pages so users know what to expect.