Web design principles

This document is a draft, and may be subject to heavy revision!

Table of contents

1. Web standards
2. Progressive enhancement
3. Performance

Web standards

Whenever possible, we will embrace any relevant web standards, namely:

1. HTML(5) living standard: the markup that defines web documents and their content
2. Cascading Style Sheets (CSS): the language that determines the visual appearance and layout of web documents
3. JavaScript: the language that drives interactive and otherwise scripted behaviors of web documents
4. Accessible Rich Internet Applications (ARIA): a standard set of HTML conventions and patterns for ensuring document accessibility for differently abled users

Progressive enhancement

The design system should favor patterns and solutions that function as intended in less compliant or otherwise "competent" environments (such as older, non-compliant web browsers; or on smaller screens), and provide improved user experiences in newer, more compliant, or otherwise "better" ones. Some tactics for progressive enhancement include:

Mobile first design

Mobile first design optimizes for smaller screens then successively enhances (or otherwise modifies) designs for larger screens.

JavaScript Polyfills

Polyfills make it easier to write browser JavaScript by "upgrading" browser APIs to be more compliant with web standards (see above). Browsers that cannot be upgraded are served simpler—but fully accessible—versions of the requested content.

Performance

Government web sites should load and respond quickly. We can provide best practices for performant web pages and sites, and advice or tools for measuring and improving page load times and user interactions.