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:

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?

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?

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

Implement Adaptations

Apply changes systematically:

Responsive Breakpoints

Choose appropriate breakpoints:

Mobile: 320px-767px

Tablet: 768px-1023px

Desktop: 1024px+

Or content-driven breakpoints (where design breaks)

Layout Adaptation Techniques

CSS Grid/Flexbox

Reflow layouts automatically

Container Queries

Adapt based on container, not viewport

clamp()

Fluid sizing between min and max

Media queries

Different styles for different contexts

Display properties

Show/hide elements per context

Touch Adaptation

Increase touch target sizes (44x44px minimum)

Add more spacing between interactive elements

Remove hover-dependent interactions

Add touch feedback (ripples, highlights)

Consider thumb zones (easier to reach bottom than top)

Content Adaptation

Use

display: none

sparingly (still downloads)

Progressive enhancement (core content first, enhancements on larger screens)

Lazy loading for off-screen content

Responsive images (

srcset

,

picture

element)

Navigation Adaptation

Transform complex nav to hamburger/drawer on mobile

Bottom nav bar for mobile apps

Persistent side navigation on desktop

Breadcrumbs on smaller screens for context

IMPORTANT

Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.

NEVER

:

Hide core functionality on mobile (if it matters, make it work)

Assume desktop = powerful device (consider accessibility, older machines)

Use different information architecture across contexts (confusing)

Break user expectations for platform (mobile users expect mobile patterns)

Forget landscape orientation on mobile/tablet

Use generic breakpoints blindly (use content-driven breakpoints)

Ignore touch on desktop (many desktop devices have touch)

Verify Adaptations

Test thoroughly across contexts:

Real devices

Test on actual phones, tablets, desktops

Different orientations

Portrait and landscape

Different browsers

Safari, Chrome, Firefox, Edge

Different OS

iOS, Android, Windows, macOS

Different input methods

Touch, mouse, keyboard

Edge cases

Very small screens (320px), very large screens (4K)

Slow connections

Test on throttled network Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.