Fixed-height web page layouts are always wrong
I can understand that when you're designing a magazine page, a poster, an advert, a banner, or hell, even a letter to your granny, then the first thing you need to know is the size of the material you're working with.
The challenge of the web is that your users' monitors vary widely.
In the UK, we currently have the following breakdown:
1024x768 25.10%
1280x800 24.60%
1280x1024 13.38%
1440x900 10.23%
1680x1050 6.74%
1366x768 2.76%
1920x1200 2.32%
800x600 1.99%
320x396 1.55%
It's good to see the 800x600s have dropped to under 2%. This has been a steady decline, and so we can politely ignore the size when building our sites.
We build to ensure that there is no horizontal scrollbar when viewed at 1024pixels across. This gives us a working width of 990px to allow for the scrollbar on the right.
Users on bigger screens simply see more space, but they are also likely to avoid maximizing their windows, so this usually doesn't look too bad.
The big issue is the height of the screen. We cannot give a fixed working height, because we do not know the size of the titlebar and bookmark bars at the top, nor the height of any windows taskbar at the bottom. There is no "usual" size here, since inexperienced users commonly add bars, but do not know how to remove them.
Generally we work to a height of about 550px. It's important for this part of the screen to convey the majority of useful information.
Users will need to see the following, before they scroll:
- Logo
- Navigation
- Current location in the navigation (highlighted nav or breadcrumbs)
- First header
- A description of what this page is about.
We refer to this area as "above the fold". This is a term acquired from newspapers, where only the information shown above the halfway fold is visible to the buyer, and so is the area most likely to influence your purchase.
Poor designers can be readily spotted here: they see the above, and make designs of a fixed height. This means that the page is built without any vertical scrolling. This restricts the usable area for content, and usually means some sort of custom scrollbar needs to be used in little windows in the site. It's lazy. It's amateur. It's pathetic.
What I want to point out here is that scrolling is not bad. People do know how to scroll. People like to scroll. It's the most usable way to present content on the web.
So, please say NO to:
- fixed height layouts
- custom scrollers
Reasons you can give are:
- custom scrollers do not work on touchscreens (like iPhones)
- fixed height designs can't flex to fit smaller screens (like iPhones)
- scrolling is still fine with high-resolution backgrounds. Look at twitter, where the background is simply fixed.
- custom scrollers look ugly when javascript is disabled.
While mobile users and non-JS users are usually dismissed out of hand, there is evidence to show that this should not be so. See the 1.5% of users above using a 320x396 display? That's mobile. And yet the site I used to gather these stats is not even mobile friendly. This is rising, and will continue to rise.
In Japan, mobile internet is used more than PC internet.
It's time to embrace flexible layouts.
And to be fair, most of the Internet has. But there are still a few designers out there who haven't. Wake up!
Thanks for reading! I guess you could now share this post on TikTok or something. That'd be cool.
Or if you had any comments, you could find me on Threads.
Published