Design System

Responsive design

Principle

MnDOT web sites use a responsive design to ensure all visitors have the best experience possible. The web sites look good on all devices: mega-screens, laptops, tablets, and phones. It uses the most-effective layout for each screen size, visibility and appearance of certain elements can differ, font sizes and spacing are relative.

Using a responsive design approach means we don't design the website or create content for a specific user. Instead, we make sure that content works at all screen size possibilities, regardless of intended audience.

Standards

Fixed size content

Do not use content or elements that are designed to a specific screen size.

Exception

For content that can't be reformatted to work on all screen sizes (such as tables), use the Scroll Content element.

Content visibility

Do not hide content as part of page scaling. All visitors must have access to the same content.

Exception

Content, such as navigation elements, can be hidden at various screen sizes, as long as it is accessible through a button or a link.

Guidance

Always test new pages, content layouts and elements on a variety of screen sizes prior to publishing. Contact Webteam with any issues related to the sites responsive design.