Mobile-First Design
Design & UXDesigning the phone version of a site first and scaling up to desktop — instead of designing for a big screen and squeezing it down — so the experience fits…
Design & UX
Responsive Design
Responsive Web Design | RWD
Robert KlimantCo-founder
What is Responsive Design?
Responsive design, also called responsive web design or RWD, is an approach where a single website fluidly adapts its layout to whatever screen the visitor is using. The same HTML and content render differently on a phone, a tablet, a laptop, and a large monitor — columns stack, type scales, images resize, navigation collapses into a menu. It's the default expectation for modern websites and the opposite of building separate mobile and desktop sites.
Why it matters
More than half of web traffic is on a phone, and for many B2C products it's closer to seventy percent. A site that only looks right on a designer's laptop is a site that's broken for most of its visitors. Responsive design isn't a feature anymore — it's the baseline. The teams that still get it wrong usually do so by designing desktop-first and shrinking, which produces cramped, awkward phone experiences. Done well, responsive design means every visitor gets a layout that was actually thought through for their device, not squeezed into it.
How it works
The designer maps the layout at multiple breakpoints — typically mobile, tablet, and desktop — deciding how content stacks, what hides, what gets prioritized, and how navigation transforms at each size. Engineers build with fluid CSS: flexbox, grid, percentages, and media queries that trigger layout changes at specific widths. Images use the `srcset` attribute so a phone fetches a phone-sized image, not a 4K asset meant for a monitor. Type uses relative units like `rem` and `clamp()` so it scales smoothly between sizes. Touch targets are sized for thumbs on small screens. The team tests on real devices, not just browser windows, because thumb reach, iOS Safari quirks, and the actual feel of tap targets only show up on the actual hardware.
Related terms
User Interface
Design & UXThe visible part of a digital product — the buttons, menus, forms, layout, typography, icons, modals — that a person actually touches, clicks, and reads to get…
User Experience
Design & UXHow it feels to use a product from start to finish — the speed, the clarity, the flow, the copy, the moments of friction, the parts that just work — not just…
Design System
Design & UXA shared set of components, design tokens, and rules a team uses to design and build a product, so every page looks coherent and no one is reinventing a button…
Wireframe
Design & UXA low-fidelity sketch of a webpage that shows structure, layout, and content priorities — without color, type, or polish — so the team can argue about the plan…
Above the Fold
Design & UXThe part of a webpage that's visible before the visitor scrolls — a term borrowed from newspaper print — the area where the headline, value prop, social proof,…
Typography
Design & UXThe craft of choosing and arranging type on a website — fonts, sizes, weights, line height, letter spacing, line lengths — to make content readable, scannable,…