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 
192---
193 
194## Reference Material
195 
196The sections below were previously `responsive-design.md` and live inline now so the adapt flow has its deep responsive reference in one place.
197 
198### Responsive Design
199 
200#### Mobile-First: Write It Right
201 
202Start with base styles for mobile, use `min-width` queries to layer complexity. Desktop-first (`max-width`) means mobile loads unnecessary styles first.
203 
204#### Breakpoints: Content-Driven
205 
206Don't chase device sizes; let content tell you where to break. Start narrow, stretch until design breaks, add breakpoint there. Three breakpoints usually suffice (640, 768, 1024px). Use `clamp()` for fluid values without breakpoints.
207 
208#### Detect Input Method, Not Just Screen Size
209 
210**Screen size doesn't tell you input method.** A laptop with touchscreen, a tablet with keyboard. Use pointer and hover queries:
211 
212```css
213/* Fine pointer (mouse, trackpad) */
214@media (pointer: fine) {
215  .button { padding: 8px 16px; }
216}
217 
218/* Coarse pointer (touch, stylus) */
219@media (pointer: coarse) {
220  .button { padding: 12px 20px; }  /* Larger touch target */
221}
222 
223/* Device supports hover */
224@media (hover: hover) {
225  .card:hover { transform: translateY(-2px); }
226}
227 
228/* Device doesn't support hover (touch) */
229@media (hover: none) {
230  .card { /* No hover state - use active instead */ }
231}
232```
233 
234**Critical**: Don't rely on hover for functionality. Touch users can't hover.
235 
236#### Safe Areas: Handle the Notch
237 
238Modern phones have notches, rounded corners, and home indicators. Use `env()`:
239 
240```css
241body {
242  padding-top: env(safe-area-inset-top);
243  padding-bottom: env(safe-area-inset-bottom);
244  padding-left: env(safe-area-inset-left);
245  padding-right: env(safe-area-inset-right);
246}
247 
248/* With fallback */
249.footer {
250  padding-bottom: max(1rem, env(safe-area-inset-bottom));
251}
252```
253 
254**Enable viewport-fit** in your meta tag:
255```html
256<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
257```
258 
259#### Responsive Images: Get It Right
260 
261##### srcset with Width Descriptors
262 
263```html
264<img
265  src="hero-800.jpg"
266  srcset="
267    hero-400.jpg 400w,
268    hero-800.jpg 800w,
269    hero-1200.jpg 1200w
270  "
271  sizes="(max-width: 768px) 100vw, 50vw"
272  alt="Hero image"
273>
274```
275 
276**How it works**:
277- `srcset` lists available images with their actual widths (`w` descriptors)
278- `sizes` tells the browser how wide the image will display
279- Browser picks the best file based on viewport width AND device pixel ratio
280 
281##### Picture Element for Art Direction
282 
283When you need different crops/compositions (not just resolutions):
284 
285```html
286<picture>
287  <source media="(min-width: 768px)" srcset="wide.jpg">
288  <source media="(max-width: 767px)" srcset="tall.jpg">
289  <img src="fallback.jpg" alt="...">
290</picture>
291```
292 
293#### Layout Adaptation Patterns
294 
295**Navigation**: Three stages: hamburger + drawer on mobile, horizontal compact on tablet, full with labels on desktop. **Tables**: Transform to cards on mobile using `display: block` and `data-label` attributes. **Progressive disclosure**: Use `<details>/<summary>` for content that can collapse on mobile.
296 
297#### Testing: Don't Trust DevTools Alone
298 
299DevTools device emulation is useful for layout but misses:
300 
301- Actual touch interactions
302- Real CPU/memory constraints
303- Network latency patterns
304- Font rendering differences
305- Browser chrome/keyboard appearances
306 
307**Test on at least**: One real iPhone, one real Android, a tablet if relevant. Cheap Android phones reveal performance issues you'll never see on simulators.
308 
309---
310 
311**Avoid**: Desktop-first design. Device detection instead of feature detection. Separate mobile/desktop codebases. Ignoring tablet and landscape. Assuming all mobile devices are powerful.
312