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