adapt
Make an existing design work on a different screen, device, or platform.
On this page 3 sections
Use adapt when a page works well in one setting but struggles in another: a desktop dashboard on a phone, a full-page form in a narrow panel, or a phone app on a tablet. Impeccable adjusts the experience around the space, controls, and task.
Try it
/impeccable adapt the orders page for mobile. Keep order status and tracking easy to reach.Name the target device or context and what people need to do there. Mention relevant constraints, such as touch input or use on a slow connection.
How it works
Impeccable checks what the original design assumes, then changes what no longer fits:
- Layout and priority: reflow columns and keep the most useful information visible.
- Controls and input: make actions usable with touch, keyboard, and mouse; replace hover-only interactions.
- Navigation: adjust menus and toolbars to the available space without losing essential actions.
- Content and conditions: account for long text, orientation changes, and the way people use the page.
Essential functionality stays available. Secondary information may move into a menu or disclosure, but someone should still be able to complete the task.
Check the result
Try the main task on the target device, including navigation, form entry, and any on-screen keyboard. Check intermediate widths and orientation changes too. Browser resizing helps with layout; a real device also reveals touch and performance problems.
For failures with long content, missing data, or network errors, follow with harden.
Adapting a native app
When the project context identifies an iOS or Android app, Impeccable uses native adaptation guidance: phone and tablet layouts, split-screen use, orientation, and platform navigation conventions. Moving between platforms may require changing controls and navigation to match the destination.