Responsive Website Design Development (Desktop, Tablet, Mobile)
Responsive design is not "shrink desktop version." It's designing separate layouts for different usage contexts: screen size, input type (mouse vs touchscreen), connection speed, device orientation. Same content is reordered, hidden, or changes form depending on conditions.
Breakpoints and Grid
Standard breakpoints we use (align with Tailwind CSS):
| Name | Width | Typical Devices |
|---|---|---|
| xs | < 640px | Smartphones (portrait) |
| sm | 640–767px | Smartphones (landscape), small tablets |
| md | 768–1023px | Tablets |
| lg | 1024–1279px | Laptops, iPad Pro |
| xl | 1280–1535px | Desktop |
| 2xl | ≥ 1536px | Wide monitors |
For most projects, we design three key states: Mobile (375px), Tablet (768px), Desktop (1440px). Developers implement intermediate breakpoints via CSS.
Desktop grid — usually 12 columns with 24–32px gutter and 1200–1440px max-width content. Tablet — 8 columns, Mobile — 4 columns with 16px gutter.
Mobile-first vs Desktop-first
Mobile-first — design starts with mobile version, then progressively enhances. Fundamentally changes content prioritization: if something doesn't fit mobile — either removed or rethought. Result: cleaner interfaces without "desktop bloat."
Desktop-first — traditional approach, start with desktop, then adapt. Easier for client (bigger screen to discuss), but risks "cramming" content into mobile.
In practice: for content sites, corporate pages — mobile-first. For complex web apps with rich UI (dashboards, CRM) — desktop-first, with separate mobile state for key scenarios.
Deep Dive: Typical Adaptation Problems
Navigation — the most problematic element. Horizontal menu of 7 items doesn't fit mobile. Solutions: hamburger drawer, bottom navigation bar (for app-like sites), priority+ navigation (visible + "More"). Each has its context.
Tables — 5+ column tables unreadable on mobile. Strategies:
- Horizontal table scroll (simple, not always convenient)
- Card transformation: each table row becomes a card on mobile
- Hide less important columns (via
hidden md:table-cellin Tailwind) - Prioritized columns: first 2–3 always visible, rest in expandable row
Images — one image for all devices is suboptimal. <picture> tag with srcset serves different crops: hero banner on desktop — horizontal 1440×600, on mobile — vertical 375×500 with different focus. In design, we explicitly work both crops.
Typography — sizes don't scale proportionally. H1 64px on desktop → 32px on mobile — not just shrinking, but different page rhythm. Use fluid typography via CSS clamp(): font-size: clamp(1.5rem, 4vw, 4rem).
Forms — on touchscreen devices, typing is uncomfortable, so forms should be shorter or split into steps. Fields should be min 44px (Apple HIG) or 48px (Google Material) height for comfortable tap. Correct type for inputs (type="tel", type="email") triggers right keyboard.
What We Deliver
Figma mockup with three explicit states (Desktop/Tablet/Mobile) for each page. For complex components — separate frames with annotations of behavior on width changes. Developer gets not just "how it looks" but "how it behaves in between."
Timeline
Responsive design for corporate website (5–7 pages) in three breakpoints — 10–16 working days. Landing page in three breakpoints — 4–6 working days. Complex product interface with adaptation — 4–8 weeks.