Responsive Design for Mobile Devices

Responsive Design for Mobile Devices

The desktop version looks great on a monitor, but on a mobile screen, it's chaos: menus don't fit, buttons overlap, text overflows, and LCP goes through the roof. Responsive design is not just adding max-width: 100% to images. It is the systematic design of an interface that works correctly at widths from 320px to 2560px+, with different pixel densities, input methods (touch vs. mouse), and network conditions. We take on end-to-end implementation. Get a free consultation — we will evaluate your project and suggest the optimal stack. Our clients save between 20% and 40% on development budget by using a Mobile-first approach.

Why Choose Mobile-first?

Mobile-first means writing base styles for mobile and expanding via min-width media queries. The alternative — Desktop-first with max-width — is harder to maintain due to cascading overrides. In practice, Mobile-first reduces debugging time by a factor of 3 compared to Desktop-first.

/* Mobile-first: base styles for mobile */ .card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } } 

Choosing the Right Breakpoints

Breakpoints should be determined by content, not devices. There is no point in targeting specific iPhone models — each new generation has different sizes. A typical system: xs (320px), sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px).

Viewport and Units of Measurement

Required meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Without it, the browser renders the page as 980px wide and scales it — media queries will not work. You can read more about viewport on MDN. As noted by Google in its guide: "We recommend using a mobile-first approach" (Google Search Central).

Use dvh instead of vh for mobile: vh does not account for the browser's address bar, so a 100vh element may be cut off. dvh (dynamic viewport height) changes on scroll. svh and lvh are fixed extreme values.

Responsive Typography

:root { --text-base: clamp(1rem, 0.85rem + 0.75vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem); --text-xl: clamp(1.375rem, 1rem + 1.875vw, 2rem); --text-2xl: clamp(1.75rem, 1.25rem + 2.5vw, 2.75rem); --text-3xl: clamp(2rem, 1.25rem + 3.75vw, 3.5rem); } 

clamp(min, preferred, max) allows fonts to smoothly scale between min and max depending on viewport width.

Touch Targets and Navigation

On mobile, tappable areas should be at least 44×44px (Apple HIG) or 48×48px (Google Material). Visual size may be smaller; the touch area can be increased using ::before with inset: -12px. For mobile navigation, use a hamburger menu with proper aria attributes and transitions.

Responsive Images

<picture> <source media="(min-width: 1024px)" srcset="hero-desktop.webp 1440w, hero-desktop-2x.webp 2880w" sizes="100vw"> <source media="(min-width: 640px)" srcset="hero-tablet.webp 768w, hero-tablet-2x.webp 1536w"> <img src="hero-mobile.webp" srcset="hero-mobile.webp 390w, hero-mobile-2x.webp 780w" alt="Responsive version of Hero image" width="390" height="520" loading="eager" fetchpriority="high"> </picture> 

sizes tells the browser how much of the screen the image will occupy, allowing it to select the right file before CSS loads.

How to Create Responsive Layout? (Step-by-Step Guide)

1. Analyze mockups: Determine key interface states for different widths.
2. Set up viewport: Add the viewport meta tag with width=device-width, initial-scale=1.0.
3. Mobile-first styles: Write base styles for the minimum width (320px).
4. Media queries: Add min-width queries to expand for larger screens.
5. Testing: Check on real devices and emulators.

Over many years of work, we have accumulated experience in more than 80 projects — allowing us to refine the process to 3 days for landing pages and up to 6 days for corporate sites. Contact us for a free evaluation of your project.

Performance and Comparison of Approaches

Mobile networks are slower. Critical techniques: lazy loading for everything below the fold, font subsetting for Cyrillic, CSS containment on sections. Preload only critical first-screen resources. Mobile-first approach can reduce maintenance costs by up to 30%.

.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }