I Adapt

Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.

Assess Adaptation Challenge

Understand what needs adaptation and why:

1. Identify the source context:

   • What was it designed for originally? (Desktop web? Mobile app?)
   • What assumptions were made? (Large screen? Mouse input? Fast connection?)
   • What works well in current context?

2. Understand target context:

   • Device: Mobile, tablet, desktop, TV, watch, print?
   • Input method: Touch, mouse, keyboard, voice, gamepad?
   • Screen constraints: Size, resolution, orientation?
   • Connection: Fast wifi, slow 3G, offline?
   • Usage context: On-the-go vs desk, quick glance vs focused reading?
   • User expectations: What do users expect on this platform?

3. Identify adaptation challenges:

   • What won't fit? (Content, navigation, features)
   • What won't work? (Hover states on touch, tiny touch targets)
   • What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)

CRITICAL: Adaptation is not just scaling - it's rethinking the experience for the new context.

Plan Adaptation Strategy

Create context-appropriate strategy:

Mobile Adaptation (Desktop → Mobile)

Layout Strategy:

• Single column instead of multi-column
• Vertical stacking instead of side-by-side
• Full-width components instead of fixed widths
• Bottom navigation instead of top/side navigation

Interaction Strategy:

• Touch targets 44x44px minimum (not hover-dependent)
• Swipe gestures where appropriate (lists, carousels)
• Bottom sheets instead of dropdowns
• Thumbs-first design (controls within thumb reach)
• Larger tap areas with more spacing

Content Strategy:

• Progressive disclosure (don't show everything at once)
• Prioritize primary content (secondary content in tabs/accordions)
• Shorter text (more concise)
• Larger text (16px minimum)

Navigation Strategy:

• Hamburger menu or bottom navigation
• Reduce navigation complexity
• Sticky headers for context
• Back button in navigation flow

Tablet Adaptation (Hybrid Approach)

Layout Strategy:

• Two-column layouts (not single or three-column)
• Side panels for secondary content
• Master-detail views (list + detail)
• Adaptive based on orientation (portrait vs landscape)

Interaction Strategy:

• Support both touch and pointer
• Touch targets 44x44px but allow denser layouts than phone
• Side navigation drawers
• Multi-column forms where appropriate

Desktop Adaptation (Mobile → Desktop)

Layout Strategy:

• Multi-column layouts (use horizontal space)
• Side navigation always visible
• Multiple information panels simultaneously
• Fixed widths with max-width constraints (don't stretch to 4K)

Interaction Strategy:

• Hover states for additional information
• Keyboard shortcuts
• Right-click context menus
• Drag and drop where helpful
• Multi-select with Shift/Cmd

Content Strategy:

• Show more information upfront (less progressive disclosure)
• Data tables with many columns
• Richer visualizations
• More detailed descriptions

Print Adaptation (Screen → Print)

Layout Strategy:

• Page breaks at logical points
• Remove navigation, footer, interactive elements
• Black and white (or limited color)
• Proper margins for binding

Content Strategy:

• Expand shortened content (show full URLs, hidden sections)
• Add page numbers, headers, footers
• Include metadata (print date, page title)
• Convert charts to print-friendly versions

Email Adaptation (Web → Email)

Layout Strategy:

• Narrow width (600px max)
• Single column only
• Inline CSS (no external stylesheets)
• Table-based layouts (for email client compatibility)

Interaction Strategy:

• Large, obvious CTAs (buttons not text links)
• No hover states (not reliable)
• Deep links to web app for complex interactions