How-To Guides
How-to Guides
HarvardSites offers reusable patterns, like components and layouts, to build your site.
These how-to guides show you how to use patterns effectively to achieve practical goals like driving engagement, simplifying navigation, and improving usability.
Video Guides
Learn Design System concepts through short videos that explain when and why to use patterns, components, and content strategies.
Using 50/50 Cards to Highlight Important Content (VIDEO)
Placing Calls-to-action in pages effectively (VIDEO)
Using Announcement Banners Effectively (VIDEO)
Strategy Guides
HarvardSites Strategy Guides show you how to achieve common web goals, like promoting events, improving clarity, or encouraging action, using proven patterns and components. Each guide focuses on a specific use case and offers practical steps for applying the Design System effectively across pages and platforms.
Create engaging calls to action
Calls to action help users interact with your department, whether making a donation, applying, or registering, so they can accomplish key tasks efficiently.
Design effective event landing pages
Help users find and attend the right events by building clear, organized, and engaging landing pages.
Optimizing Your Site for Usability and Accessibility
Help ensure your site is usable by everyone, including people using screen readers, screen magnifiers, or other assistive tools. These guides offer practical ways to improve clarity, structure, and inclusive design through content and layout choices.
Using images effectively
Images support storytelling and highlight key people, places, and events. But if handled poorly, they can confuse, slow down, or even exclude users.
Using the News Content Type for Long-Form or Annual Reports
Use the News content type to build engaging reports or themed pages that tell a story. These guides show how to combine layouts, components, and editorial choices to bring content to life.
Help users to
These guides offer practical ways to improve how users engage with your site, from finding events and navigating pages to understanding images and calls to action. Each one shows how to apply HarvardSites patterns and components to support real user needs with clarity, consistency, and accessibility.
Link to Related Content Using Inline CTA Links
Long-form pages benefit from clear navigation between related stories. This guide shows how to use inline and CTA-style links to support reader flow.
Group Related News with Vertical Cards and Columns
When publishing multiple stories on a single page, structure matters. This guide shows how to group related News entries into clean, consistent layouts.
Feature a Lead Story with a 50/50 or Vertical Card
Lead stories deserve visual emphasis. This guide shows how to use 50/50 or Vertical Cards to anchor a section and guide readers into the content.
Highlight Key Stats with 50/50 Cards or Stat Blocks
Strong metrics deserve visual emphasis. This guide shows how to highlight important numbers using built-in layout components.
Break Up Long Pages with Section Headings and Visual Patterns
Turn long, scroll-heavy pages into structured sections using headings, cards, and layout patterns.
Use the News Content Type for Story-Driven Content
The News content type is flexible enough to support more than announcements. This guide shows how and when to use it for storytelling, longer updates, or curated reports.
Make FAQ Pages Easy to Scan
Well-structured FAQ pages help users find what they need quickly. This guide shows how to choose the right pattern and format for clear, accessible results.
Use Content Patterns that Support Accessibility
How you write and structure content affects accessibility. This guide outlines patterns that make your content easier to read, navigate, and maintain.
Make Links Stand Out with Clear Language and Placement
Links should be easy to understand and easy to find. This guide helps you write link text that makes sense out of context and shows how to place links where users expect them.
Keep CTA Link Text Clear and Actionable
CTA links are only effective if users know what they do. This guide helps you write link text that is clear, specific, and meaningful for all users.
Write Alt Text That Adds Value
Alt text supports screen reader users and helps images carry meaning when used thoughtfully. This guide shows when to write it, how to write it well, and when to leave it out.
Design Clear Page Structures for All Users
Good page structure supports users with assistive technology, people navigating by headings, and anyone scanning for what matters. This guide helps you choose layout components that make pages easier to read and navigate.
Replace and Edit Inline Images in the Text Editor
Display groups of images consistently, with proper stacking and captions, instead of inserting inline media.
Group Events by Theme or Type Using Columns
Help users explore relevant content by using Columns to group events by topic, format, or audience.
Group Events by Topic or Audience for Discoverability
Help users narrow down events by type, audience, or topic using filters powered by taxonomy.
Use the Images Component for Galleries
Display groups of images consistently, with proper stacking and captions, instead of inserting inline media.
Fix Cropping Issues in Cards and Lists
Avoid cut-off faces, black bars, or distorted covers by preparing images to match card aspect ratios.
Add Image Captions and Credits the Right Way
Provide context with captions and handle image credits consistently until a dedicated field is available.
Keep Hero Images Readable
Make sure hero images are cropped and composed so the most important parts stay visible across screen sizes.
Choose the right image size and format
Keep pages fast and sharp by exporting images at the right size and file type for each component.
Draw attention to featured events with a 50/50 Card
Highlight a keynote or featured session with a bold layout that pairs imagery with a clear call to action.
Use a table to highlight time, location, and registration
Display event details in a structured format to help users scan sessions and make quick comparisons.
List multiple events with the Events List component
Show upcoming events using consistent formatting that updates automatically.
Building an event one-pager for summits, conferences, and symposiums
Help visitors quickly access everything they need for your event—schedule, sessions, venue, and contacts—all in one scannable page.
Place Calls-to-action in Pages
Help users take action where it makes sense—within content—using CTA Links, Cards, or Columns that fit the flow of the page.
Highlight Actions in Navigation
Help users take action—like Apply or Contact—in high-visibility spots like the global or main navigation.
Drive action with an announcement banner
Help users spot urgent announcements with a short message fixed to the top of every page.