Guide: Designing UI for Multiple Viewports

1. Purpose

To provide a structured approach for adapting UI designs across multiple device types — Desktop, Tablet, and Mobile — ensuring readability, usability, and consistency without creating redundant work.

2. Why This Matters

• Users don’t care about your design file — they care about smooth experience across devices.
• A layout that works on desktop often breaks on mobile if not intentionally designed.
• Without viewport-specific planning, devs make assumptions → results in inconsistent product delivery.

3. Step-by-Step Process

Step 1 – Identify Core Breakpoints

• Desktop: ≥1440px (12-column grid)
• Laptop: ≥1024px (12-column grid, narrower container)
• Tablet: ≥768px (8-column grid)
• Mobile: ≤375px (4-column grid)

Always start with Desktop + Mobile → refine Tablet as middle ground.

Step 2 – Prioritize Content

• Run a Content Priority Exercise:
  • Must-Have → Always visible (hero text, primary CTA, nav).
  • Secondary → Can collapse or move (testimonials, side info).
  • Optional → Hide in mobile (background visuals, decorative blocks).
• Ask: “If user only has 20 seconds on a mobile screen, what do they see?”

Step 3 – Adapt Layouts by Viewport

• Desktop:
  • Multi-column layouts (cards, sidebars).
  • Rich visuals allowed.
• Tablet:
  • Collapse multi-columns → 2 columns max.
  • Sidebar → collapsible or hidden under menu.
• Mobile:
  • One-column vertical stacking.
  • Prioritize CTA placement above the fold.
  • Replace sidebars with bottom nav or hamburger.

Step 4 – Adjust Components Responsively

• Buttons → Full-width on mobile, inline on desktop.
• Cards → Row of 3 (desktop) → Row of 2 (tablet) → Single stacked (mobile).
• Tables → Convert into stacked list for mobile.
• Forms → Inline fields → stacked vertically.

Step 5 – Validate Interaction Zones

• Minimum tap target = 44px (mobile).
• Avoid hover-only interactions (mobile doesn’t have hover).
• Keep critical actions thumb-friendly (bottom third of screen).

Step 6 – Check Visual Hierarchy

• Headlines should scale down, not truncate awkwardly.
• CTA buttons remain visually dominant on every viewport.
• Don’t let mobile become “mini desktop” → restructure content.

4. Practical Example

Landing Page Hero Section

• Desktop: Headline (left), Illustration (right), CTA under text.
• Tablet: Headline stacked on top of illustration, CTA centered below.
• Mobile: Headline → CTA → Illustration (full width).

Dashboard Navigation

• Desktop: Sidebar (left) + content (right).
• Tablet: Collapsible sidebar + 2-column grid.
• Mobile: Bottom nav (max 5 items) + single column list.

5. Do’s & Don’ts

Do:

• Use progressive disclosure — show essentials, hide complexity on mobile.
• Plan responsiveness at wireframe stage, not UI polish stage.
• Annotate responsive behaviors clearly for devs.

Don’t:

• Shrink desktop → scale → call it “mobile.”
• Force parity of features across devices if context doesn’t require it.
• Let mobile overflow with hidden scrollbars or micro-text.

6. Usage Notes

• Apply this guide alongside Grid & Spacing Rulesheet (Doc 3.5).
• Test mockups with real content lengths (not lorem ipsum).
• Validate final designs in actual device frames during review.