Design space on websites varies depending on the browser and device. So do website dimensions still matter?
One of the biggest misconceptions about websites is that they appear the same way to all people at all times. The truth is, websites have never been set in stone. While early web designs were essentially designed rigidly with set dimensions for all computer screens, the way those websites were displayed varied from monitor to monitor. And these days, any good website will re-arrange its elements to conform to the screen it’s viewed in.
This reconfiguration capability is known as responsive design, and it’s what allows websites to display properly across computers with varying monitor sizes, as well as the wide array of tablets and cell phone dimensions.
Because of this, it may be tempting to think that website dimensions don’t matter anymore—that you can basically make anything fit wherever you want. But there are still some aspects of your web design that have to conform to basic design constraints. If you don’t, you’re punishing your user with a bad experience. Here are the top 5 areas where website dimensions matter most.
1. Body copy.
Believe it or not, there is a lot of science behind the way we read text. When lines are too long, it adds eye strain and makes it hard to follow. Similarly, when lines are too short, constantly jumping from line to line can cause readers to lose their place.
If you have your body copy spanning the entire width of your screen, it’s going to be hard to follow. You need white space padding, as well as some room for other content areas. But if you’re too narrow, your design is liable to look silly, with a string of text down the middle and nothing to either side.
As it turns out, reading comprehension is best for lines that are about 50 characters long, but they read fastest at about 100 characters to a line. Since 50 characters is far too narrow for most contexts, we recommend the best width for most body copy is about 600 pixels, and then have your design respond to screen size if necessary.
2. Blog titles.
Blog titles have two major restrictions: the number of characters people most like to read, and the number allowed on Google.
Yes, it is tempting to add in more keywords to your blog title, but after about 60 characters Google will cut your title off and your readers won’t be able to see the whole thing. And, as we said earlier, 50 characters is the best length for reading comprehension.
So, use your space wisely to create a concise, gripping title. Then use your body copy for your keywords.
3. Paragraph length.
We’re advocates for long-form content, but that doesn’t mean your paragraphs have to go on forever. Quite the contrary: long paragraphs are harder to read and can be intimidating to visitors.
Instead of giant blocks of text, break your writing into shorter lines. You’re not printing this. You don’t have space constraints.
A few words to a line will do.
4. Navigation Menu length.
Navigation menus are one other area where users sometimes try to stuff too many items. However, there’s only so much space you can fit in the navigation menu. The more items you include—and the more words you use to describe those items—the more challenging it will be to display the menu effectively.
Five or six menu items is almost always plenty. If you need more complex navigation, then work with your web developer to find a usable solution. There are more options than simply cramming more text into the menu.
And when you write menu labels, keep it to one word as much as possible. There’s no need to use “Our Thought Spot” when “Blog” will do just as well. More importantly, your visitors know what a blog is, and they know what they can expect to find there. The more creative you get with your navigation menu, the more confused your visitors are likely to be.
We’ve said it before, and we’ll say it again: Your navigation menu is not a place to get whimsical. It’s the table of contents to your site. Keep it practical.
5. Other text constraints.
Some areas simply don’t have a lot of room for text. Think about sidebars, website footers, or other areas of copy. If you try to fit too much content into these areas, you’re more likely to wind up with a design that has been blown out of proportion. If an area was never intended to have more than a line or two of copy, don’t feel like you need to cram in a full paragraph.
Yes, website dimensions do matter. Just not in the way you think.
So, in the end, responsive design hasn’t done away with some of the set width constrictions of your web design. But this doesn’t mean every element of your page is rigid, either. The important thing to bear in mind is that these website dimensions will always depend on your design and how it interacts with the rest of your site.
Be aware of how your website will respond to different conditions, and don’t make design choices that will hinder usability for people on mobile devices, or for anyone with accessibility concerns. By being mindful of the space constraints on your website, you can create a better user experience for everyone.