2 min readAn original planning guide. Use the linked primary documentation for platform details and the supported procedure for your environment.
Choose difficult content
Select long titles, unbroken identifiers, images, tables, and forms with meaningful labels. Short placeholder text rarely exposes the hardest cases.
Inspect reading and order
Check line lengths, font size, wrapping, spacing, and the sequence in which content appears. Preserve meaning as columns collapse.
Exercise controls and states
Open menus, filters, validation errors, and dialogs with pointer and keyboard input. Check focus, scrolling, and unobscured actions.
Record reproducible issues
Capture viewport dimensions, page state, and exact content. Fix the layout rule behind the issue and recheck related templates.
Worked scenario
See the plan in practice.
A long glossary term wraps acceptably, but its breadcrumb forces horizontal scrolling. Include page context as well as the main article in review.
Review your result
Your acceptance checklist
Difficult content used- States exercised
- Overflow checked
Use these checks to identify gaps in your responsive content checklist. Assign an owner to any unresolved item before the next dependent step.
The terms behind the task
- Responsive designAn approach that adapts content presentation to available space and device characteristics.
- ViewportThe region through which a user views a web document, with layout and visual viewport concepts on mobile devices.
- AccessibilityThe practice of making products usable by people with a broad range of abilities and assistive technologies.
Primary references
For the underlying concepts and current platform details:
