Guide: Planning Cross-Device Wireframes (Web/Mobile/Desktop)

Purpose

To provide a structured method for designing responsive wireframes that adapt across desktop, tablet, and mobile while maintaining consistency, usability, and system logic.

1. Why This Matters

  • Users interact on multiple devices → poor adaptation = frustration.
  • Designing only for desktop → broken mobile experiences.
  • This guide ensures consistency, readability, and efficiency across all breakpoints.

2. Step-by-Step Planning

Step 1 – Define Breakpoints

  • Desktop (≥1440px): 12-column grid.
  • Tablet (≥768px): 8-column grid.
  • Mobile (≤375px): 4-column grid.
  • Always start with Desktop + Mobile, then refine Tablet.

Step 2 – Prioritize Content

  • Ask: “What’s essential for mobile vs. what can collapse?”
  • Use content hierarchy mapping:
    • Must-have → Always visible.
    • Nice-to-have → Collapsible or hidden behind menus.

Step 3 – Adapt Layouts

  • Desktop → Horizontal spread (cards in rows, sidebars).
  • Tablet → Compact two-column layouts.
  • Mobile → Vertical stacking (one-column, prioritized CTAs).

Step 4 – Preserve CTA Visibility

  • Ensure primary CTA is visible without scrolling on all devices.
  • Avoid burying CTAs in collapsed menus.

Step 5 – Plan Navigation

  • Desktop → Top bar / sidebar.
  • Tablet → Collapsible sidebar / hamburger.
  • Mobile → Bottom nav (max 5 items) or hamburger menu.

Step 6 – Validate Interaction Zones

  • Mobile → Minimum 44px tap targets.
  • Tablet → Finger-friendly spacing, avoid hover-only elements.
  • Desktop → Can allow hover states, but must degrade gracefully for touch.

3. Best Practices

Do:

  • Design mobile-first for clarity, then scale up.
  • Test with real content lengths (not lorem ipsum).
  • Use consistent iconography and patterns.

Don’t:

  • Shrink desktop → scale to mobile (leads to broken UI).
  • Overcrowd mobile with all desktop features.
  • Rely only on hover interactions.

4. Quick Example

Landing Page:

  • Desktop → Hero left text + right image + CTA.
  • Tablet → Stack hero text over image, CTA centered.
  • Mobile → Hero text → CTA → image below.

Dashboard:

  • Desktop → Sidebar + content grid.
  • Tablet → Collapsible sidebar + 2-column grid.
  • Mobile → Bottom nav + single column list.

5. Usage Notes

  • Plan all breakpoints during wireframe stage — don’t leave for UI polish.
  • Annotate differences clearly in Wireframe Specification Template (Doc 3.3).
  • Validate with Grid & Spacing Rulesheet (Doc 3.5).