1> **Additional context needed**: target platforms/devices and usage contexts.
2 
3Adapt an existing design to a different context: another screen size, device, platform, or use case. The trap is treating adaptation as scaling. The job is rethinking the experience for the new context.
4 
5 
6---
7 
8## Assess Adaptation Challenge
9 
10Understand what needs adaptation and why:
11 
121. **Identify the source context**:
13   - What was it designed for originally? (Desktop web? Mobile app?)
14   - What assumptions were made? (Large screen? Mouse input? Fast connection?)
15   - What works well in current context?
16 
172. **Understand target context**:
18   - **Device**: Mobile, tablet, desktop, TV, watch, print?
19   - **Input method**: Touch, mouse, keyboard, voice, gamepad?
20   - **Screen constraints**: Size, resolution, orientation?
21   - **Connection**: Fast wifi, slow 3G, offline?
22   - **Usage context**: On-the-go vs desk, quick glance vs focused reading?
23   - **User expectations**: What do users expect on this platform?
24 
253. **Identify adaptation challenges**:
26   - What won't fit? (Content, navigation, features)
27   - What won't work? (Hover states on touch, tiny touch targets)
28   - What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)
29 
30**CRITICAL**: Adaptation is rethinking the experience for the new context, not scaling pixels.
31 
32## Plan Adaptation Strategy
33 
34Create context-appropriate strategy:
35 
36### Mobile Adaptation (Desktop → Mobile)
37 
38**Layout Strategy**:
39- Single column instead of multi-column
40- Vertical stacking instead of side-by-side
41- Full-width components instead of fixed widths
42- Bottom navigation instead of top/side navigation
43 
44**Interaction Strategy**:
45- Touch targets 44x44px minimum (not hover-dependent)
46- Swipe gestures where appropriate (lists, carousels)
47- Bottom sheets instead of dropdowns
48- Thumbs-first design (controls within thumb reach)
49- Larger tap areas with more spacing
50 
51**Content Strategy**:
52- Progressive disclosure (don't show everything at once)
53- Prioritize primary content (secondary content in tabs/accordions)
54- Shorter text (more concise)
55- Larger text (16px minimum)
56 
57**Navigation Strategy**:
58- Hamburger menu or bottom navigation
59- Reduce navigation complexity
60- Sticky headers for context
61- Back button in navigation flow
62 
63### Tablet Adaptation (Hybrid Approach)
64 
65**Layout Strategy**:
66- Two-column layouts (not single or three-column)
67- Side panels for secondary content
68- Master-detail views (list + detail)
69- Adaptive based on orientation (portrait vs landscape)
70 
71**Interaction Strategy**:
72- Support both touch and pointer
73- Touch targets 44x44px but allow denser layouts than phone
74- Side navigation drawers
75- Multi-column forms where appropriate
76 
77### Desktop Adaptation (Mobile → Desktop)
78 
79**Layout Strategy**:
80- Multi-column layouts (use horizontal space)
81- Side navigation always visible
82- Multiple information panels simultaneously
83- Fixed widths with max-width constraints (don't stretch to 4K)
84 
85**Interaction Strategy**:
86- Hover states for additional information
87- Keyboard shortcuts
88- Right-click context menus
89- Drag and drop where helpful
90- Multi-select with Shift/Cmd
91 
92**Content Strategy**:
93- Show more information upfront (less progressive disclosure)
94- Data tables with many columns
95- Richer visualizations
96- More detailed descriptions
97 
98### Print Adaptation (Screen → Print)
99 
100**Layout Strategy**:
101- Page breaks at logical points
102- Remove navigation, footer, interactive elements
103- Black and white (or limited color)
104- Proper margins for binding
105 
106**Content Strategy**:
107- Expand shortened content (show full URLs, hidden sections)
108- Add page numbers, headers, footers
109- Include metadata (print date, page title)
110- Convert charts to print-friendly versions
111 
112### Email Adaptation (Web → Email)
113 
114**Layout Strategy**:
115- Narrow width (600px max)
116- Single column only
117- Inline CSS (no external stylesheets)
118- Table-based layouts (for email client compatibility)
119 
120**Interaction Strategy**:
121- Large, obvious CTAs (buttons not text links)
122- No hover states (not reliable)
123- Deep links to web app for complex interactions
124 
125## Implement Adaptations
126 
127Apply changes systematically:
128 
129### Responsive Breakpoints
130 
131Choose appropriate breakpoints:
132- Mobile: 320px-767px
133- Tablet: 768px-1023px
134- Desktop: 1024px+
135- Or content-driven breakpoints (where design breaks)
136 
137### Layout Adaptation Techniques
138 
139- **CSS Grid/Flexbox**: Reflow layouts automatically
140- **Container Queries**: Adapt based on container, not viewport
141- **`clamp()`**: Fluid sizing between min and max
142- **Media queries**: Different styles for different contexts
143- **Display properties**: Show/hide elements per context
144 
145### Touch Adaptation
146 
147- Increase touch target sizes (44x44px minimum)
148- Add more spacing between interactive elements
149- Remove hover-dependent interactions
150- Add touch feedback (ripples, highlights)
151- Consider thumb zones (easier to reach bottom than top)
152 
153### Content Adaptation
154 
155- Use `display: none` sparingly (still downloads)
156- Progressive enhancement (core content first, enhancements on larger screens)
157- Lazy loading for off-screen content
158- Responsive images (`srcset`, `picture` element)
159 
160### Navigation Adaptation
161 
162- Transform complex nav to hamburger/drawer on mobile
163- Bottom nav bar for mobile apps
164- Persistent side navigation on desktop
165- Breadcrumbs on smaller screens for context
166 
167**IMPORTANT**: Test on real devices. Device emulation in DevTools is helpful but not perfect.
168 
169**NEVER**:
170- Hide core functionality on mobile (if it matters, make it work)
171- Assume desktop = powerful device (consider accessibility, older machines)
172- Use different information architecture across contexts (confusing)
173- Break user expectations for platform (mobile users expect mobile patterns)
174- Forget landscape orientation on mobile/tablet
175- Use generic breakpoints blindly (use content-driven breakpoints)
176- Ignore touch on desktop (many desktop devices have touch)
177 
178## Verify Adaptations
179 
180Test thoroughly across contexts:
181 
182- **Real devices**: Test on actual phones, tablets, desktops
183- **Different orientations**: Portrait and landscape
184- **Different browsers**: Safari, Chrome, Firefox, Edge
185- **Different OS**: iOS, Android, Windows, macOS
186- **Different input methods**: Touch, mouse, keyboard
187- **Edge cases**: Very small screens (320px), very large screens (4K)
188- **Slow connections**: Test on throttled network
189 
190When the adaptation feels native to each context, hand off to `$impeccable polish` for the final pass.
191