2/20/2018 14:14 -5:00
- Do no harm
- Do not annoy
- Give users control
- Closeable
- Session based
- Tell stories & be compelling
- Responsive Design Principles
- Mobile First approach
- Do not consume more than 15% of the user's viewport
- Browser chrome must be taken into account, especially on the smallest of devices (ex: iPhone SE)
- Progressive enhancement if Javascript is disabled, basic content should be rendered.
- Viewports should be considered as small / medium / large rather than a fixed pixel width or height
- Module(s) should be written in semantically correct HTML
- Progressively Enhanced
- Should function if Javascript is disabled
- Should be keyboard operable
- Should close on ESC key press
- Alt text should be written in accordance with our policies
- Should be unique to the module itself and not be repeat of other buttons found in the global header
- This should reduce button "fatigue"
- This will allow for more perceived targeting towards a specific campaign or cause within the library
- A11Y combinations should come from the Design Tool Kit's Color Accessibility Table
- Should behave as expected
- Close buttons should close for that session
- session cookie set to remember action
- Links are visually treated as buttons
- Should be used sparingly and only as an enhancement
- Compressed, in-line SVGs for vector graphics
- System Type should be used
- Keivit only if absolutely compelled by a senior manager
- Type should never be an image
- Type will be set in
rems and be based on a default of 16px.- If type must be smaller 0.75rem or 12px is smallest acceptable size
- Should be used sparingly
- Depending on context should only run once
- Only when modules load to the screen or are closed by the user