Responsive Design
Design & UXDesigning a website so it adapts to every screen size — phone, tablet, laptop, ultrawide monitor — instead of forcing one fixed layout that breaks the moment a…
Design & UX
Mobile-First Design
Mobile First
Robert KlimantCo-founder
What is Mobile-First Design?
Mobile first design is a design approach where the smallest screen — the phone — is designed and built before the larger ones. Layout, content priorities, and interactions are decided for mobile first, then progressively enhanced for tablet and desktop. The opposite, designing desktop-first, almost always produces cluttered, awkward mobile experiences because the team tries to subtract instead of starting from what fits.
Why it matters
Most teams still design for the screen the designer is sitting in front of. That's how you get marketing sites with a 1440px hero that turns into an unreadable wall on a phone — the device sixty percent of visitors are actually using. Mobile-first forces hard choices early. What's the one thing the visitor needs to see? What's the one action? Everything else has to earn its place. The byproduct is a better desktop site too, because a layout that holds up at 375 pixels has been forced to commit to a hierarchy. Less ambiguity, faster scanning, more conversion.
How it works
The designer starts in Figma at a mobile width — 375 to 430 pixels — and lays out each page for that constraint. Content gets ranked: hero, primary action, supporting proof, secondary content, footer. Navigation collapses into a clear menu. Type sizes, tap targets (minimum 44 pixels), and image crops all get decided here. Once mobile is locked, the team scales up — bringing in side columns, larger media, expanded navigation as the breakpoint allows. Engineers write CSS the same way: base styles target mobile, media queries layer on desktop behavior. The result: nothing on the desktop site is an afterthought from the phone.
Related terms
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…
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…
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,…
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…
Core Web Vitals
PerformanceGoogle's three benchmark metrics that measure how fast a page loads, how quickly it responds to clicks, and how stable the layout feels as it renders — used in…
Page Speed
PerformanceHow quickly a web page loads and becomes usable for a visitor — measured in seconds and milliseconds, and treated by Google as a confirmed ranking signal…