Summary
- Rethink designs for different screens, devices, and contexts while maintaining consistency.
- Assess source and target contexts (device type, input method, screen size, connection speed, usage patterns) to identify what won't fit or work across platforms Apply context-specific strategies: single-column layouts and touch targets for mobile, two-column hybrid layouts for tablet, multi-column and hover states for desktop, narrow widths and inline CSS for email Use responsive techniques including CSS Grid/Flexbox, media queries, container queries, and clamp() for fluid sizing; increase touch targets to 44x44px minimum and remove hover dependencies on touch devices Test on real devices across orientations, browsers, and input methods rather than relying solely on browser emulation