Website Content and Presentation
This section is about what visitors see and read: wording, layout of ideas, visual emphasis, and color choices that support comprehension. It complements Content Modeling (schema and CMS structure) and Semantic HTML (meaningful markup). Strong content modeling and markup still fail if paragraphs are dense, calls to action compete with each other, or contrast is too low to read comfortably.
Throughout this section, Do blocks show patterns worth copying; Don't blocks show common failures (sometimes simplified for clarity).
Goals for web content
| Goal | What it means in practice |
|---|---|
| Scannable | Headings, lists, and short paragraphs let people orient themselves before reading in depth. |
| Focused | Each view has a clear primary purpose; secondary paths stay visible but subordinate. |
| Consistent | Patterns for titles, buttons, and terminology repeat across the site so users learn the interface once. |
| Inclusive | Color contrast, typography, and structure work for low vision, zoom users, and keyboard navigation -- not only mouse users with ideal monitors. |
Chapters in this section
- Readability and typography -- plain language, microcopy basics, line measure, body type sizing.
- Structure and hierarchy -- headings, landmarks, lists, page hierarchy, visual focus, calls to action, whitespace.
- Forms and interactions -- link text, navigation, form field labels and errors, mobile-first DOM order.
- Microcopy and error states -- buttons, validation messages, empty states, loading, success, 404 pages.
- Color and contrast -- WCAG targets, design tokens, dark mode, identifying links beyond colour.
- Images and media -- meaningful alt text, decorative images, captions, video, audio.
- Information architecture -- site navigation, breadcrumbs, taxonomies, search UX, URL design.
Page-level checklist
Use this before shipping or when auditing an existing page.
| Area | Checks |
|---|---|
| Copy | First sentence answers the user's question; jargon defined or linked; errors say how to fix. |
| Structure | One h1; heading levels do not skip; sections titled descriptively. |
| Measure & type | Comfortable line length; body ~16px+; line-height ~1.4--1.6. |
| Focus | One clear primary action per major region; secondary actions visually subordinate. |
| Color | Text and UI meet contrast targets; focus visible; dark theme re-checked. |
| Links & media | Links identifiable without colour alone; meaningful alt; captions when needed. |
Related reading
- Content Modeling -- types, fields, and CMS-level structure
- Semantic HTML -- meaningful elements and accessibility hooks
- Web Performance -- speed, images, and Core Web Vitals
- CSS: Colors and Typography -- fonts, units, and color in stylesheets