Website Design Guidelines

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

General Guidelines

  • Mobile first. All websites should be designed for mobile devices then for desktop.
  • Use Figma for wireframes and design. Use design tokens and color palette provided by ITD.
  • Regular text is never underlined for emphasis. Use bolding to emphasize text. Underlined text is reserved for links only.
  • Avoid auto playing videos and audio. Anything that auto plays should have controls and an easy way to stop it.
  • Cursor should indicate interaction, ie., hand for click, insertion point for text editing.
  • UX studies show that most people don’t read, they skim, large blocks of text online. Try to use bullet points or be brief to share your information.
  • For long pages, include a summary at the beginning of the page.
  • Show users the progress of their actions.
  • Be consistent. Use icons, symbols, images, etc. consistently throughout your site. For example:
    • Use one icon set.
    • Use of a maximum of 3 fonts
  • Organize content logically, i.e., group like ideas or content. Don’t overwhelm users and visually prioritize content.
  • Limit and prioritize choices. Consider Hick’s Law: the more choices a person has, the longer it takes them to choose and sometimes even leads to analysis paralysis where no choice is made. Keep choices relevant.
  • Avoid press releases, use modern communication formats instead. Replace them with blogs or webpage news posts. Post links to the blog or news story on social media.
  • Avoid email links. Use an email form instead.

Website Header

  • Website logo placed in the header, aligned to the left. Logo links back to the Home page.
  • The main navigation menu is in the header, not in a sidebar.
  • Recommendation is not to include a Home link in the main navigation.
  • Use a hamburger menu on mobile and tablet screen sizes only. Hamburger menu on desktop is not recommended.
  • Mega menus or drop-down menus can be used on desktop. There is no recommended standard.
  • Main website navigation must include a link to a Contact Us page. It can be a first level link or a sub-link under an About Us section.
  • Social media icons are not be placed in or above the header. Place social media icons in the footer.
  • There is no standard for search tools. Depending on the website structure, a search tool may not be needed. In cases where one is needed, it can be an icon in the navigation menu or a complete search field, or it can be included on the homepage and not in the navigation. Decisions should be made based upon user experience.

Website Footer

  • Include website logo, aligned to the left.
  • Include general contact information: department name, address, telephone number, email address.
  • Include social media icon links.
  • Include PDF reader logo and link if applicable.
  • Include links to accessibility statement, terms of use, language access, legal/disclaimers, privacy statement, and sitemap if applicable.

Images

  • Carousels are only to be used for photo slideshows. Do not use them for ads, news etc.
  • Include clear and descriptive alt text for non-decorative images.
  • Any text included in an image must be included in the alt text.
  • Decorative images must include empty alt text.
  • Images can not exceed 2MB. Reduce size and optimize if needed.
  • Don’t use blank spaces in file names. Use a “-” between words, i.e., this-is-an-image-file.png
  • Although not prohibited, avoid using an “_” between words in file names. The underline gets lost in webpage links.

Accessibility

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

i

Documents

  • Documents are NOT content. Consider posting documents as webpages where possible and appropriate. Webpages are the most accessible format.
  • All documents must be accessible.
  • Document size should not exceed 50MB.
  • Documents larger than 50MB should be posted in a SharePoint document repository.
  • Portable Document Format (PDF) is our standard document format for printing. See PDF section below for more guidelines about PDFs.
  • Do not post documents in proprietary formats that require paid software i.e. WORD, EXCEL, and PowerPoint. These documents should be posted as webpages or PDFs.
  • Indicate file type after a link to a document. For example:
    • 2023 Budget Overview (PDF)
  • Don’t use blank spaces in file names. Use a “-” between words, i.e., this-is-a-document.png
  • Although not prohibited, avoid using an “_” between words in file names. The underline gets lost in webpage links.
  • All document links should open in the same tab. This is more accessible than opening a new tab or window. See Webpage Links section below.

PDFs

  • PDFs are not content. PDFs are for printing.
  • PDF forms should be converted into webpage forms.
  • If you provide a document in PDF, it must be made accessible.
  • If you provide a document in PDF, you must provide a link to download the free PDF reader. Standard is to place the Adobe Reader logo with the link in the footer of the website.

Webpage Links

  • Links must be underlined. Do not use color alone to indicate text is a link. The only exception is for links in navigation menus.
  • Link text must be clear and specific. Do not use “click here” or “learn more” since they are not accessible. Link text should tell the visitor what is going to happen when they select the link, i.e., “Learn more about accessibility”.
  • If the link is to a document, indicate the file type after the link text. For example:
    • 2023 Budget Overview (PDF)
  • By default, all links open in the same tab. Maintain user control of new tabs and windows. Exceptions can be made depending upon the link context. For example, if you have multiple links to documents that your users open to compare, it would be appropriate and more user-friendly to open those links in new tabs/windows. In this case, include a statement before the links letting the user know that the links will open in new tabs/windows.
  • For external links (non-county websites and documents), use an icon and popup/modal window to inform the user they will be exiting the county website and going to an external site. User must have an option to proceed or cancel. Popup/modal window must include a disclaimer that the County is not responsible for the content of the external website. For example:
    • “You are about to leave an official Alameda County website. Alameda County bears no responsibility for the accuracy, legality, accessibility, or content of the external site or for that of subsequent links. Contact the external site for answers to questions regarding its content”.