Website Design Guide
December 20, 2021
Website widths to consider for your mockup
In the early 90’s when the first website was created, the standard screen width was 640 x 480px. (ThoughtCo)
Now we don’t just have bigger monitors, but more types of devices and their varying sizes to consider as well.
Do you know what else is getting bigger? Our feet. The average lady foot has bulged more than a size over the last three decades (Time), and according to the College of Podiatry, mens’ are getting bigger too (The Independent)…Or so they tell us.
But just how do we cater to our widening screens, horizons and…feet?
To make things even more interesting, there ain’t such a thing as “standard width” for websites…
How long is a piece of (shoe) string?
Despite having such big, flashy monitors, how many of us actually maximise our browser window? If the answer is not many, then theoretically, a page designed at 1366px should look the business.
Of course, should and does are as different as stilettos and wedges.
There are two widths to consider if you want your designs to look right, and you need them both.
What?
See:
Outer width – These are invisible lines within the full width of your screen. These keep your header, footer and other content elements from floating off screen or being aggressively chopped in half by the evil little demons who live within your device. Consider how widely you want to space these elements. If your outer container is 1366px then make your mockup wider, like 1440px wide, to show how it looks on a wide screen. FANCY!
Content width – Within the outer width, the content wrapper safely holds the text, making it easy on the eye and keeping the people happy! Consider key design questions: Does the site feature columns or a grid? Consider your target audience; are they likely to be using a smaller device? Key: The narrower the content width, the easier it is to read the text, so have your shoehorn at the ready!
Top tip: start big!
When and only when, you have chosen the widths for the widest device, you can skip to the next size down IF there are design elements you want to change. Use the outer width of the website elements when designing a mock-up for different device sizes.
Jazzy size guide:
- Desktop – larger than 1280px
- Tablet or iPad Landscape – 1024px
- Tablet or iPad Portrait – 768px
- Smartphone Portrait – 320px
No rules (or mules)
There is no single width rule when building website mockups. But if the thought of going rogue gives you blisters, then take note; responsive web design features the same content regardless of the size of the page you are viewing. Oh, and always consider the outer width of the elements in your design.
And while it is possible to build one mammoth 2560px for all devices, ask yourself this:
Would a 6-, 16- and 60-year-old share the same pair of slippers?
Methinks not.