Website Design Guidelines

These guidelines are intended for anyone building or maintaining a County website.

General Guidelines

✅ Do This

  • Design mobile first, then for desktop.
  • Cursor should indicate interaction, i.e., hand for click, insertion point for text editing.
  • Use Figma for wireframes and designs with ITD’s tokens and color palette.
  • Use bold text for emphasis.
  • Use a hand cursor for clickable items and an insertion cursor for text editing.
  • Break up text with bullets/short sections to support skimming.
  • Add a summary at the top of long pages.
  • Show users the progress of their actions.
  • Be consistent with icons, fonts (max 3), and visual style.
  • Organize content logically and visually prioritize what matters.
  • Limit and prioritize user choices (Hick’s Law).

❌ Do Not Do This

  • Do not underline regular text for emphasis (reserved for links).
  • Do not autoplay videos or audio without clear user controls.
  • Do not overwhelm users with too many choices or clutter.
  • Avoid email links. Use an email form instead.

💡 Suggestions

  • Replace press releases with blogs or news posts and share via social media.
  • Use an email form instead of mailto: links.
  • Provide links to social media instead of embedding feeds.

Website Header

✅ Do This

  • Place the website logo in the header (left-aligned) and link it to the homepage.
  • Keep the main navigation menu in the header.
  • Include a Contact Us link (first-level or under “About Us”).

❌ Do Not Do This

  • Do not include a “Home” link in the main navigation.
  • Do not use a hamburger menu on desktop.
  • Do not place social icons in or above the header.

💡 Suggestions

  • Use a hamburger menu for mobile and tablet only.
  • Mega menus or dropdowns are fine on desktop.
  • Include a search tool only if it adds value (icon, full search bar, or homepage field).

Website Footer

✅ Do This

  • Include Website logo (left-aligned)
  • Include general contact info (department, address, phone, email)
  • Include Social media icons/links
  • Include PDF reader logo + link (if needed)
  • Include Accessibility, terms, language access, disclaimers, privacy, sitemap (as applicable)

Images

✅ Do This

  • Use carousels only for photo slideshows.
  • Add descriptive alt text for all non-decorative images.
  • Add empty alt text for decorative images.
  • Keep images ≤ 2MB (optimize if needed).
  • Name files with hyphens (this-is-an-image.png).

❌ Do Not Do This

  • Do not use carousels for ads, news, or promotions.
  • Do not use spaces in file names.
  • Although not prohibited, avoid underscores in file names (they disappear in webpage links).
i

Documents

✅ Do This

  • Documents are NOT content. Post as webpages whenever possible (most accessible).
  • Post documents as webpages whenever possible (most accessible).
  • Make all documents accessible.
  • Keep documents ≤ 50MB; larger files go to SharePoint.
  • Use PDFs for printing.
  • Indicate file type after document links (e.g., Budget 2023 (PDF)).
  • Keep document links opening in the same tab.
  • Use hyphens in file names.

❌ Do Not Do This

  • Do not post in proprietary formats requiring paid software (Word, Excel, PowerPoint).
  • Do not use spaces in file names.
  • Do not use underscores in file names.

PDFs

✅ Do This

  • Use PDFs for printing, not as web content.
  • Convert PDF forms into webpage forms.
  • Make all PDFs accessible.
  • Provide a free PDF reader link/logo in the footer. Standard is to place the Adobe Reader logo with the link.

❌ Do Not Do This

  • Do not treat PDFs as primary web content.

Webpage Links

✅ Do This

  • Always underline links (except in navigation menus).
  • Write clear, descriptive link text.
  • Add file type after document links (e.g., Annual Report (PDF)).
  • By default, keep links opening in the same tab.
  • For external links, provide a modal warning with exit disclaimer and proceed/cancel.

❌ Do Not Do This

  • Do not rely on color alone for links.
  • Do not use vague text like “click here” or “learn more.”

💡 Suggestions

  • If multiple docs should be opened to compare, allow new tabs/windows — but explain this before the links.

Accessibility

All new websites must meet WCAG 2.1 AA standards. For more information, visit our Accessibility page.

Archived Documents

The DOJ ruling on the accessibility of web content provides specific exceptions for documents to be archived which allow them to remain on the site without remediation. When archiving documents it is important that we communicate clearly to all visitors the nature of this type of document. To do so, we recommend using the following standards to visually and programmatically (for assistive technology users) indicate when there is a link to an archived and not remediated document.

Individual (Ungrouped) Archived Document Links

The document link name will end with “(archive item)”.

Example: Generative AI Policy, as adopted on September 1, 2024. (archive item)

Pages with Ungrouped Archived Document Links

Pages that contain one or more archived document links that are not grouped together will post the following note, which will appear after the first H1 (Heading Level 1 or page title). Note that items within the square brackets are placeholders for information the department would provide.

Note: Archived Content

This page contains archived documents that are identified with the words “archive item” at the end of the link name. These documents are not being updated and may not be fully accessible. To request an accessible version or a reasonable accommodation, please contact [Contact Person/Office] at [Phone Number] or [Email Address].

 Styling & Structure Notes
  • The heading, “Note: Archived Content”, needs to follow heading hierarchy, so should be an H2.
  • Font styles and colors will use site defaults, to maintain look and feel of existing design.
  • The note may be contained visually in a box to make it stand out/catch the user’s eye (see example at end of section).

Pages with Grouped Archived Document Links

Pages created specifically for archived documents where all documents are archived and none are current may skip adding the words (archive item) to the individual document links and post this altered version of the Archived Content note.

Example Page Note

Note: Archived Content

All the documents on this page are archived and may not be fully accessible. To request an accessible version or a reasonable accommodation, please contact [Contact Person/Office] at [Phone Number] or [Email Address].