Step 13: Responsive Design & Accessibility

MANDATORY EXECUTION RULES (READ FIRST):

🛑 NEVER generate content without user input
📖 CRITICAL: ALWAYS read the complete step file before taking any action - partial understanding leads to incomplete decisions
🔄 CRITICAL: When loading next step with 'C', ensure the entire file is read and understood before proceeding
✅ ALWAYS treat this as collaborative discovery between UX facilitator and stakeholder
📋 YOU ARE A UX FACILITATOR, not a content generator
💬 FOCUS on responsive design strategy and accessibility compliance
🎯 COLLABORATIVE strategy definition, not assumption-based design
✅ YOU MUST ALWAYS SPEAK OUTPUT In your Agent communication style with the config {communication_language}

EXECUTION PROTOCOLS:

🎯 Show your analysis before taking any action
⚠️ Present A/P/C menu after generating responsive/accessibility content
💾 ONLY save when user chooses C (Continue)
📖 Update output file frontmatter, adding this step to the end of the list of stepsCompleted.
🚫 FORBIDDEN to load next step until C is selected

COLLABORATION MENUS (A/P/C):

This step will generate content and present choices:

A (Advanced Elicitation): Use discovery protocols to develop deeper responsive/accessibility insights
P (Party Mode): Bring multiple perspectives to define responsive/accessibility strategy
C (Continue): Save the content to the document and proceed to final step

PROTOCOL INTEGRATION:

When 'A' selected: Execute {project-root}/_bmad/core/workflows/advanced-elicitation/workflow.xml
When 'P' selected: Execute {project-root}/_bmad/core/workflows/party-mode/workflow.md
PROTOCOLS always return to this step's A/P/C menu
User accepts/rejects protocol changes before proceeding

CONTEXT BOUNDARIES:

Current document and frontmatter from previous steps are available
Platform requirements from step 3 inform responsive design
Design direction from step 9 influences responsive layout choices
Focus on cross-device adaptation and accessibility compliance

YOUR TASK:

Define responsive design strategy and accessibility requirements for the product.

RESPONSIVE & ACCESSIBILITY SEQUENCE:

1. Define Responsive Strategy

Establish how the design adapts across devices: "Let's define how {{project_name}} adapts across different screen sizes and devices.

Responsive Design Questions:

Desktop Strategy:

How should we use extra screen real estate?
Multi-column layouts, side navigation, or content density?
What desktop-specific features can we include?

Tablet Strategy:

Should we use simplified layouts or touch-optimized interfaces?
How do gestures and touch interactions work on tablets?
What's the optimal information density for tablet screens?

Mobile Strategy:

Bottom navigation or hamburger menu?
How do layouts collapse on small screens?
What's the most critical information to show mobile-first?"

2. Establish Breakpoint Strategy

Define when and how layouts change: "Breakpoint Strategy: We need to define screen size breakpoints where layouts adapt.

Common Breakpoints:

Mobile: 320px - 767px
Tablet: 768px - 1023px
Desktop: 1024px+

For {{project_name}}, should we:

Use standard breakpoints or custom ones?
Focus on mobile-first or desktop-first design?
Have specific breakpoints for your key use cases?"

3. Design Accessibility Strategy

Define accessibility requirements and compliance level: "Accessibility Strategy: What level of WCAG compliance does {{project_name}} need?

WCAG Levels:

Level A (Basic) - Essential accessibility for legal compliance
Level AA (Recommended) - Industry standard for good UX
Level AAA (Highest) - Exceptional accessibility (rarely needed)

Based on your product:

[Recommendation based on user base, legal requirements, etc.]

Key Accessibility Considerations:

Color contrast ratios (4.5:1 for normal text)
Keyboard navigation support
Screen reader compatibility
Touch target sizes (minimum 44x44px)
Focus indicators and skip links"

4. Define Testing Strategy

Plan how to ensure responsive design and accessibility: "Testing Strategy:

Responsive Testing:

Device testing on actual phones/tablets
Browser testing across Chrome, Firefox, Safari, Edge
Real device network performance testing

Accessibility Testing:

Automated accessibility testing tools
Screen reader testing (VoiceOver, NVDA, JAWS)
Keyboard-only navigation testing
Color blindness simulation testing

User Testing:

Include users with disabilities in testing
Test with diverse assistive technologies
Validate with actual target devices"

5. Document Implementation Guidelines

Create specific guidelines for developers: "Implementation Guidelines:

Responsive Development:

Use relative units (rem, %, vw, vh) over fixed pixels
Implement mobile-first media queries
Test touch targets and gesture areas
Optimize images and assets for different devices

Accessibility Development:

Semantic HTML structure
ARIA labels and roles
Keyboard navigation implementation
Focus management and skip links
High contrast mode support"

6. Generate Responsive & Accessibility Content

Prepare the content to append to the document:

Content Structure:

When saving to document, append these Level 2 and Level 3 sections:

## Responsive Design & Accessibility

### Responsive Strategy

[Responsive strategy based on conversation]

### Breakpoint Strategy

[Breakpoint strategy based on conversation]

### Accessibility Strategy

[Accessibility strategy based on conversation]

### Testing Strategy

[Testing strategy based on conversation]

### Implementation Guidelines

[Implementation guidelines based on conversation]

7. Present Content and Menu

Show the generated responsive and accessibility content and present choices: "I've defined the responsive design and accessibility strategy for {{project_name}}. This ensures your product works beautifully across all devices and is accessible to all users.

Here's what I'll add to the document:

[Show the complete markdown content from step 6]

What would you like to do? [A] Advanced Elicitation - Let's refine our responsive/accessibility strategy [P] Party Mode - Bring different perspectives on inclusive design [C] Continue - Save this to the document and complete the workflow

8. Handle Menu Selection

If 'A' (Advanced Elicitation):

Execute {project-root}/_bmad/core/workflows/advanced-elicitation/workflow.xml with the current responsive/accessibility content
Process the enhanced insights that come back
Ask user: "Accept these improvements to the responsive/accessibility strategy? (y/n)"
If yes: Update content with improvements, then return to A/P/C menu
If no: Keep original content, then return to A/P/C menu

If 'P' (Party Mode):

Execute {project-root}/_bmad/core/workflows/party-mode/workflow.md with the current responsive/accessibility strategy
Process the collaborative insights that come back
Ask user: "Accept these changes to the responsive/accessibility strategy? (y/n)"
If yes: Update content with improvements, then return to A/P/C menu
If no: Keep original content, then return to A/P/C menu

If 'C' (Continue):

Append the final content to {planning_artifacts}/ux-design-specification.md
Update frontmatter: append step to end of stepsCompleted array
Load ./step-14-complete.md

APPEND TO DOCUMENT:

When user selects 'C', append the content directly to the document using the structure from step 6.

SUCCESS METRICS:

✅ Responsive strategy clearly defined for all device types ✅ Appropriate breakpoint strategy established ✅ Accessibility requirements determined and documented ✅ Comprehensive testing strategy planned ✅ Implementation guidelines provided for development team ✅ A/P/C menu presented and handled correctly ✅ Content properly appended to document when C selected

FAILURE MODES:

❌ Not considering all device types and screen sizes ❌ Accessibility requirements not properly researched ❌ Testing strategy not comprehensive enough ❌ Implementation guidelines too generic or unclear ❌ Not addressing specific accessibility challenges for your product ❌ Not presenting A/P/C menu after content generation ❌ Appending content without user selecting 'C'

❌ CRITICAL: Reading only partial step file - leads to incomplete understanding and poor decisions ❌ CRITICAL: Proceeding with 'C' without fully reading and understanding the next step file ❌ CRITICAL: Making decisions without complete understanding of step requirements and protocols

NEXT STEP:

After user selects 'C' and content is saved to document, load ./step-14-complete.md to finalize the UX design workflow.

Remember: Do NOT proceed to step-14 until user explicitly selects 'C' from the A/P/C menu and content is saved!

step-13-responsive-accessibility.md 8.9 KB History Raw