Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
- Vertical scrolling content at a width equivalent to 320 CSS pixels;
- Horizontal scrolling content at a height equivalent to 256 CSS pixels;
Except for parts of the content which require two-dimensional layout for usage or meaning.
Checklist – System Foundations
Content
Test | Priority | Automated test? |
---|---|---|
Are URLs and long text strings properly breaking to wrap? | High | None |
Do headings, subheadings, dialog titles, paragraphs, and table cell contents, all wrap? | High | None |
Page Framework
Test | Priority | Automated test? |
---|---|---|
Do containers scroll properly? | High | None |
Does the site only scroll in one direction at 320×256 in size? | Medium | None |
Do elements’ size and position scale with the text size? | Medium | None |
Checklist – Components
Breadcrumbs
Test | Priority | Automated test? |
---|---|---|
Does the entire breadcrumb container and its contents wrap? | High | None |
Dialogs
Test | Priority | Automated test? |
---|---|---|
Do all dialogs fit on supported screen sizes? | High | None |
Tables
Test | Priority | Automated test? |
---|---|---|
Is the entire value of each column in a table (including the table head) readable? | High | None |
Additional resources
These will be added to the content of the above section when I get to it.
- Responsive Data Tables by Chris Coyier on CSS-Tricks. Note that this is from 2011, so it simultaneously shows that we’ve been doing this for a while and that the solutions here have probably been eclipsed by something else by now.
- Responsive Data Table Roundup by Chris Coyier on CSS-Tricks (last updated in 2019). This one includes:
- Faux table design using a description list.
- Responsive table based on CSS Tricks responsive table replacing the media queries with some Javascript to make it more dynamic.
- Tables & Responsive Design Part 2 which the authors recommend you don’t use because it hides content.
- CSS-only responsive tables by David Bushell
- Responsive table (scrolling solution) by Zurb
- Tablesaw by Filament Group
- FooTable jQuery plugin by Brad Vincent
- rt Responsive Tables jQuery plugin
- RWD-Table-Patterns
- Picking a response table solution by Jason Grigsby
- 5 Practical Solutions to Make Responsive Data Tables by Michal Jarosz
- Responsive tables in bootstrap (all are scroll solutions)
- How to use responsive tables without compromising ux by Leticia Schimmel at Lightit
- WCAG-compliant Under-Engineered Responsive Tables by Adrian Roselli
- Designing Mobile Tables by Steven Hoober at UXMatters
- React super responsive tables
- How to create responsive tables with flexbox and react by Gerard van Der Put at Better Programming