Adapt

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/pbakaus/impeccable/llms.txt

Use this file to discover all available pages before exploring further.

​

Purpose

​

Parameters

​

When to Use

• Designs need to work on different screen sizes
• Porting from one platform to another (desktop to mobile, web to email)
• Supporting different input methods (touch, mouse, keyboard)
• Accommodating different connection speeds
• Optimizing for different usage contexts

​

Workflow

​

1. Assess Adaptation Challenge

​

Identify Source Context

• What was it designed for originally?
• What assumptions were made?
• 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 Challenges

• What won’t fit?
• What won’t work?
• What’s inappropriate for this context?

​

2. Plan Adaptation Strategy

​

Mobile Adaptation (Desktop → Mobile)

• 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

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

• Progressive disclosure (don’t show everything at once)
• Prioritize primary content
• Shorter text (more concise)
• Larger text (16px minimum)

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

​

Tablet Adaptation (Hybrid Approach)

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

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

​

Desktop Adaptation (Mobile → Desktop)

• Multi-column layouts (use horizontal space)
• Side navigation always visible
• Multiple information panels simultaneously
• Fixed widths with max-width constraints

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

• Show more information upfront
• Data tables with many columns
• Richer visualizations
• More detailed descriptions

​

Print Adaptation (Screen → Print)

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

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

​

Email Adaptation (Web → Email)

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

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

​

3. Implement Adaptations

​

Responsive Breakpoints

• Mobile: 320px-767px
• Tablet: 768px-1023px
• Desktop: 1024px+

​

Layout Adaptation Techniques

/* CSS Grid/Flexbox for reflow */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Container Queries for component-based adaptation */
@container (min-width: 400px) {
  .card { display: flex; }
}

/* Fluid sizing */
.heading {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

/* Media queries */
@media (max-width: 768px) {
  .sidebar { display: none; }
}

​

Touch Adaptation

• Increase touch target sizes (44×44px minimum)
• Add more spacing between interactive elements
• Remove hover-dependent interactions
• Add touch feedback (ripples, highlights)
• Consider thumb zones

​

Content Adaptation

• Use display: none sparingly (still downloads)
• Progressive enhancement (core content first)
• 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 for context

​

4. Verify Adaptations

• 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

​

Key Principles

• Hide core functionality on mobile
• Assume desktop = powerful device
• Use different information architecture across contexts
• Break user expectations for platform
• Forget landscape orientation
• Use generic breakpoints blindly
• Ignore touch on desktop (many desktop devices have touch)

​

Usage Examples

​

Example 1: Mobile Adaptation

/adapt dashboard mobile

1. Analyze desktop dashboard layout
2. Identify elements that won’t work on mobile
3. Redesign with vertical flow and progressive disclosure
4. Implement touch-friendly interactions
5. Test on actual mobile devices

​

Example 2: Cross-Platform Adaptation

/adapt checkout-flow

1. Analyzes checkout flow across all viewports
2. Identifies adaptation needs for mobile, tablet, desktop
3. Implements responsive layouts
4. Ensures touch and pointer compatibility
5. Verifies consistent experience across platforms

​

Example 3: Email Adaptation

/adapt newsletter email

1. Convert web design to email-compatible layout
2. Implement table-based layout with inline CSS
3. Optimize for 600px width
4. Test across email clients
5. Ensure fallbacks for unsupported features

​

Adaptation Matrix

​

Philosophy