For designers, “what size should the website be?” stopped being a single number years ago. The canvas is now a spectrum – from a 360 px phone to a 1920 px desktop and beyond – and the craft is making one design feel deliberate across all of it. Here’s a practical framework for thinking about dimensions in 2026.
Stop designing for devices. Design for ranges.
The instinct to design for “iPhone” or “MacBook” is a trap – there are too many models, and they change yearly. Design instead for width ranges and let fluid layouts handle everything in between. Three anchor points cover most of the work:
- ~360–390 px – the mobile baseline most phones share.
- ~768 px – the tablet hinge where single-column becomes multi-column.
- ~1440 px – the most common modern desktop working width.
Nail the design at those three widths and the gaps look after themselves.
The numbers worth memorizing
Two distinctions trip people up: screen width vs. content width, and resolution vs. CSS pixels. Keep these straight:
- Content width on desktop: keep primary content in a centered container of ~1140–1200 px, even on a 1920 px screen. Beyond ~75 characters per line, reading comfort drops.
- Common resolutions to design against: 1920×1080, 1440×900, 1366×768 (desktop/laptop); 768×1024 (tablet); 360×800 and 390×844 (mobile).
- Gutters and margins: 16–24 px on mobile, scaling to 40–80 px on desktop. Whitespace is a dimension too.
Breakpoints as design decisions, not device specs
A breakpoint should exist where your content needs it, not where a particular phone happens to sit. That said, a reliable default set keeps teams aligned:
| Breakpoint | Range | Layout behavior |
|---|---|---|
| xs | ≤ 576 px | Single column, stacked |
| sm | 577–768 px | Two columns emerge |
| md | 769–992 px | Tablet grid |
| lg | 993–1200 px | Full desktop layout |
| xl | ≥ 1200 px | Capped content, wider margins |
The discipline that matters: resize slowly and fix what breaks. If a headline wraps awkwardly at 820 px, that’s a breakpoint – regardless of what device it maps to.
Mobile-first isn’t a slogan, it’s the cheaper path
Starting at ~360 px and scaling up is genuinely less work than the reverse. A mobile-first design forces you to prioritize – what’s the one thing this screen must do? – and that clarity carries up into the desktop layout. Designing desktop-first almost always produces a cramped, compromised mobile experience bolted on at the end.
For a complete reference on the standard website sizes – including banner dimensions, wireframe sizes, and how resolution data appears in analytics – it’s worth keeping a detailed guide handy rather than guessing.
The fold still matters (just don’t worship it)
Designers love to argue about the fold. The honest position: the first visible screen – roughly 720–900 px tall on laptop, 640–740 px on mobile – sets the first impression and should carry your core message and a clear next step. But users scroll without hesitation when the content earns attention, so don’t sacrifice hierarchy to cram everything up top.
From comp to build: where dimensions get real
A pixel-perfect comp at 1440 px is only half the job. The design has to survive translation into a fluid, responsive build that holds together at every width – and that handoff is where a lot of beautiful designs quietly fall apart. Responsive images, fluid type scales, and tested breakpoints are engineering decisions as much as design ones.
When a design needs to ship looking exactly as intended across the full range, it helps to build with people who think in breakpoints from the start. Web Help Agency’s web design team builds responsively by default, so the spectrum from phone to desktop is handled in the build rather than patched afterward.
The takeaway
There’s no single right dimension – there’s a range, anchored by a ~1200 px content width, a mobile-first 360 px baseline, and breakpoints placed where the content (not the device) demands them. Design for ranges, respect line length, go mobile-first, and your work will feel intentional on every screen it lands on.
Renowned for his expertise in logo design and visual branding, Bogdan has developed a multitude of logos for various clients.
His skills extend to creating posters, vector illustrations, business cards, and brochures. Additionally, Bogdan's UI kits were featured on marketplaces like Visual Hierarchy and UI8.
He also wrote in the past years on sites like Design Your Way, WebDesignerDepot, WPDean, Designmodo, Speckyboy, Slider Revolution, and more.
- The Best AI Avatar Generators for Business Teams in 2026 - 18 August 2026
- What Is a Display Typeface and How to Use It Right - 17 August 2026
- The Loom Logo History, Colors, Font, And Meaning - 16 August 2026
Bogdan Sandu is a seasoned designer who has been designing websites since 2008. Renowned for his expertise in logo design and visual branding, Bogdan has developed a multitude of logos for various clients. His skills extend to creating posters, vector illustrations, business cards, and brochures. Additionally, Bogdan's UI kits were featured on marketplaces like Visual Hierarchy and UI8. He also wrote in the past years on sites like Design Your Way, WebDesignerDepot, WPDean, Designmodo, Speckyboy, Slider Revolution, and more.
You Might Also Like
