Design

Responsive Design Scenario Planning

Design for real devices and contexts. Don't rely on abstract breakpoints. Map actual use cases across screen sizes. Then, design appropriate experiences for each. "Mobile-first" and fixed breakpoints are often misguided. Design for how people *actually* use different devices.

Duration
2 hours
Group Size
3-4
Category
Design
Difficulty
Easy
Participants will:

  • Identify device usage patterns in your audience.

  • Design device-appropriate experiences.

  • Make informed decisions about responsive strategy.

  • Avoid over-engineering responsive solutions.

Participants will produce:

  • Device-appropriate designs for real use cases.

  • Informed responsive strategy decisions.

  • Reduced over-engineering of unlikely scenarios.

Mobile-First Isn't Always Best: Mobile-first works when mobile is the primary use case. If desktop usage dominates, desktop-first is a better approach. Design for the primary use case first.

Breakpoints Are Implementation Details: Don't start with breakpoints. Instead, ask: "What experience makes sense on small screens in mobile contexts versus large screens at desks?" Breakpoints should emerge from experience needs.

Context Matters: A mobile phone means thumb navigation, variable connectivity, and on-the-go usage. Design for the context, not just screen dimensions.

Consider Responsive Costs: Full responsive support adds complexity and overhead. A separate mobile site or app might be better. Evaluate the trade-offs honestly. I've seen teams waste months on fully responsive sites that delivered less value than a simple mobile-optimized version.

  1. Map Device Usage (25 minutes): Review analytics. What devices do users use? What are the percentages for desktop, mobile, and tablet? What screen sizes are common? When are devices used during the user journey? Design for actual devices.

  2. Define Usage Scenarios (30 minutes): For each major device category, describe realistic use. A mobile user browsing during a commute needs scannable content and thumb-friendly navigation. A desktop user at a desk can handle density. A tablet user on a couch wants comfortable reading. Context matters.

  3. Design Appropriate Experiences (45 minutes): Design what makes sense for each scenario. Mobile might hide secondary navigation and simplify forms. Desktop might show rich comparisons and detailed data. Rethink the experience for the context.

  4. Test Responsive Strategy (20 minutes): Review your designs. Are you supporting real user needs? Are you over-engineering for edge cases? Is the responsive strategy increasing complexity without sufficient value? Sometimes a "mobile-optimized site" is better than a "fully responsive site."

Unlock Step-by-Step Instructions

Create a free account to access step-by-step instructions, agendas, and resources for all activities.

For Facilitators

  • Review participant profiles and expectations
  • Prepare all materials and supplies
  • Test technology and room setup

For Participants

  • Complete pre-session survey
  • Review background materials
  • Prepare examples or case studies

Unlock Pre-Work Requirements

Create a free account to access step-by-step instructions, agendas, and resources for all activities.


  • Analytics data showing device usage.

  • Design tools for mockups.

  • Real devices for testing (phones, tablets, laptops).

  • Documented usage scenarios.

  • Examples of competitor responsive designs.

Unlock Materials Required

Create a free account to access step-by-step instructions, agendas, and resources for all activities.

  • Facilitator Guide (PDF)
  • Participant Workbook Template
  • Presentation Slides
  • Printable Materials

Unlock Resources & Templates

Create a free account to access step-by-step instructions, agendas, and resources for all activities.

Discussion

0/2000
Loading comments...

Related Exercises

See all exercises

Vision To Execution Mapping

4 hours

It's common to see strategies fail in the "middle distance." The vision is clear, and the tasks are clear, but the path between them isn't. Vision-to-...

Design

Lean UX

3 hours

Lean UX favors rapid experimentation over documentation. Teams build hypotheses about user behavior, test them fast, and iterate based on feedback. It...

Design

A/B Test Design Studio

3 hours

A/B testing turns opinions into evidence. But poorly designed tests waste time. This exercise teaches you to design A/B tests that provide real answer...

Design