Skip to main content
Hennepin County Design System

Developer standards for starting projects

Character encodings

Character encodings allow our websites and applications to render characters. This includes text, punctuation marks and symbols.

These must follow the requirements of the Worldwide Web Consortium.

Example: <meta charset="utf-8">

Click-to-call links

All phone numbers should be click-to-call links.

Content delivery network for common libraries

A content delivery network (CDN) lets us improve the performance of our applications. We rely on a commonly-used CDN.

  • We should use trustworthy CDNs for common code libraries. These would include libraries like JQuery. These CDNs offer speed and reliability.
  • CDN content must use the integrity attribute so the browser can check the file source. This makes sure the code doesn't load if the file source has been manipulated.
  • CDN content must use the cross origin attribute when a request loads using 'CORS.' When not loaded from the 'same-origin' SRI checking now requires this.

Doctype

A valid doctype tells the browser what type of HTML version our pages use. That tells the browser how to render our pages in the right way.

The doctype must meet the specifications of the Worldwide Web Consortium.

Example: <!DOCTYPE html>

Domains and subdomains

Consistent domain names support a unified digital experience. They help people know that a website or application belongs to the county.

Requirements:

  • Use our primary domain name hennepin.us. or use hennepin in the domain name.
  • Put subdomain in lowercase without spaces or hyphens.
  • Use specific names for subdomains (for example, newapplication.hennepin.us).
  • Use subdomains where a vendor is the host (for example, www.newsite.hennepin.us). Exceptions are when we must use a vendor domain (www.hennepin.vendorname.com).
  • Use parallel names for all environments, for example, dev.newsite.us, stg.newsite.us, newsite.us.

Error pages

Meaningful error pages help people recover from errors. They let people find out what to do if they can’t find what they need.

We must follow the HTTP specification of the Worldwide Web Consortium.

Error pages must include:

  • A plain language description of the error.
  • Website navigation or a search box to help people find what they need.
  • Information about how people can ask for help.
  • A design that matches the domain. For example, do not use the Hennepin.us error page for other county websites.

Favicon (shortcut icon)

Favicons label our websites and applications in browser tabs and bookmarks. They let people identify our websites and applications before visiting.

All our websites and applications must use a county favicon. It can either be the standard version or a customized version in line with our brand standards.

Download the current version of the county favicon.

Example: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Homepages and footers

Good homepages make it clear that someone is on a county website or application. They also help people decide which main section to visit and let them search the site.

Home pages must:

  • Display the county logo, the words Hennepin County and the name of the website or application.
  • Show clear navigation to other sections, pages or screens.

Footers must display their content in a consistent way across all pages.

The iframe element

People should be able to access and understand embedded items on a page. The iframe element must be used to embed items (newsletter sign-up widget, dashboards, maps) on a page. The iframe elements must be accessible so people using assistive technology can interact with the embedded items.

The iframe elements must follow these standards:

  • iframes that convey content to users must have a non-empty title attribute.
  • The iframe title must be accurate and descriptive.
  • iframes must have a unique title in the context of the page.
  • The source page of an iframe should have a valid, meaningful <title>.
  • The source page of an iframe should make use of semantic elements and landmarks.
  • Headings should fit within the same hierarchy as the parent page.
  • We should hide hidden certain iframes from assistive technologies. Those include hidden iframes and those without content. Use aria-hidden="true".

Indexing for search

Search indexing allows people to find our websites and applications with search engines. This creates a key doorway to interact with the county online.

Indexing:

  • Index all public content for search engines like Google and Bing.
  • Do not index non-public content.
  • Where possible include all indexable content in an XML sitemap. Search engines have a stated process for submitting and getting validation for sitemaps. We should follow their process.

Language declaration

This attribute tells screen readers which language the page or page element is in. It also helps search engines and browsers identify the language of the content on the page.

We must place a language declaration on the HTML tag element. We also must place it on any other page element whose language differs from the rest of the page.

Example: <html lang="en">

Plugins

Plugins create roadblocks to accessing content. They also create security risks.

We don’t allow plugins like Adobe Flash and Microsoft Silverlight.

We only allow open and standards-based technology like HTML5 and JavaScript.

Print style sheets

People may need help remembering content after their online visit. Or they may have cognitive issues making it harder for them to read online. So a printable version of web pages should be available.

Webpages must use CSS style declarations to optimize page content for printing.

Requirements:

  • Show the words Hennepin County at the top.
  • Show copyright and logo from the footer at the bottom.
  • Show the page URL.
  • Ensure breakpoints do not interfere with images or text.
  • Allow all text content from the page to print (include collapsed and tabbed content).

Examples:

  • @media print { …}
  • <link media="print" rel="stylesheet" type="text/css" href="mystyle.css">

Secure URL

Secure URLs protect the connection between a user’s browser and the county’s web server. This protects the user’s data when interacting with a county website or application.

All websites and applications should have a valid SSL or TLS certificate. If they have a valid SSL or TLS certificate, each page must have a redirect to force the https protocol.

Session timeouts

Limiting the time a user’s session is available helps protect data.

We don't recommend any particular number of minutes for session timeouts but keep in mind:

For critical or time-sensitive sessions consider giving the user a warning message before closing the session.

Supported browsers

We must make sure we support the newest and most popular browsers that most people use. This ensures people can access our websites and applications.

Requirements:

  • We must update our list of supported browsers on a regular basis. View our supported browsers.
  • Websites and applications that don’t support these browsers must include a disclaimer. The disclaimer must appear on the homepage.

Supported software and file types

People should be able to visit us online using modern and widely available software. They should also be able to rely on secure networks.

We must not publish any content that requires unsupported or outdated systems. Those include Flash or plug-ins that only work with unsupported browsers.

We must not allow any insecure or unsupported filetypes like scripts or Zip files.

We must limit or filter files we receive or distribute to what is necessary and secured. For example, document uploads should only allow modern image filetypes or PDFs. We should also scan those files for viruses in transit to final storage.

Text links

Link styles let people understand the state of the links they interact with. This helps links be more clear and useful.

  • Use CSS to differentiate the different states of a link. This includes visited and unvisited links, and the hover, focus and active states.
  • We can only style text to look like a link if it functions like a link. Styling uses the distinct bright blue color and underlining text when mousing over.
  • Internal and external links should open in a new tab.

User privacy policy

A published policy lets web visitors know what data we collect from them. It also creates confidence in our promise not to exploit data for commercial use.

Web visitors must be able to access our user privacy policy.

A user privacy policy must:

  • Link from the footer of every website and application.
  • Describe the nature and purpose of cookies set by the website or application.
  • Tell what features or functions people will not have access to if they do not accept cookies.