Secrets of the Site Container: Part 1
Big screens are getting bigger. Wider. Less expensive. Our web experience should be seamless, but our eyes can’t adjust to giant blobby things. Containers to the rescue. But first, a digression about font-size and readability!
Disclaimer! This page may scroll horizontally. It's ironic, because it's about site containers.
There’s a problem with your eyes
You can’t read long lines of text. The common recommendation is between 45 and 75 characters per line. You may have experienced this issue when you tried to use your TV as a monitor. Wait you never did that? Oh, no, me either 😅
Imagine that length as two or three alphabets, back to back. Of course the length of the alphabet depends on how large the character widths are. In this particular body font, I can get a better sense by incorporating capitalized letters. Or I could even use them outright.
Just about this long: abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
Maybe this long: AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Or even this long: ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ
But really big views are bad too
The unspoken flip-side comes from larger font sizes at a close distance. Making the text larger for larger screens only works until your saccade becomes noticeably uncomfortable. Thus a rather fine case against a purely liquid layout. For large web views, I err on the side of caution. I keep font-size the same on even the largest screens. So something beyond 750px is bad.
Compare the next two paragraphs:
Paragraph 1:
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
Paragraph 2:
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
The larger text made it hard to move from the end of one line to the start of the next. Either it’s because you’re scrolling around, or just because your screen was so big that your eye movement was unnatural.
Honestly this doesn’t really change with non-text items
A huge image doesn’t help. Even disregarding image sizing and web optimization (our rule at work is twice the pixels for each web pixel, so we get some pretty large picture file sizes!) you’ll quickly lose a picture of a forest for some giant trees.
The solution to this is the same as most other web design problems: a few extra tag wrappers and some CSS. But how is the more important question. That’s how this blog was born.
Zero. Use appropriate HTML
The sectional approach to site configuration is underrated. A good page has content sections, and they are usually at least 2/3 the height of your browser window. Taking up space and using the infinite scroll canvas that is available to you dramatically increases user interaction and readability. There is also a great reason that HTML has a <section> tag! It’s for holding this container! Use it like this:
<section class="hero">
<div class="hero-container">
<!-- your div contents -->
</div>
</section>Note: Your section tag might have a full-width background image or other width-breaking things. Don’t limit yourself by making the section tag itself a container.
One. Start at the maximum, which is actually the smallest.
What’s the maximum width that your section can be? The answer might not make immediate sense. max-width should be used on your smallest screen sizes. The narrowest screen I’ve seen on devtools is the iPhone 5/SE, weighing in at a mere 325px. If your maximum width is above that, your site will horizontally scroll on that screen. If you use absolute units, your page will forever be confined to 325px.
Don't make your site live in a world that is only 325 px wide, it is a special place where UX dreams go to die and nothing can be accomplished. Two sentences of this took up six lines and looked terrible.
Instead, you need a relative-unit based max-width to account for things. I use percentages, because they are based on your container’s size. If your container is <body>, that’s great, but even if you’re dealing with a strange outer container this won’t break width as a vw might.
So what percentage? If it’s a hero section it’ll probably be at the widest your screen allows, but it should never break the horizontal dimensions of your device. So that’s 100%. Text also needs to breathe, so text on a small screen should be 90-95%. A card or something that is supposed to visually break the monotony of the left edge can creep in more, but after 85% things start to get silly.
.hero-container {
max-width: 100%;
}
.text-container {
max-width: 95%;
}
.narrow-container {
max-width: 90%;
}Two: Move on to bigger and better screens.
We’ve determined that text should live somewhere between 600px-750px. Once we find that sweet spot, that’s really the size we want. So let’s use that as our width!
Other widths will make sense too. Most images look great at between 1280-1500px, your modern laptop screen width. If it’s a group of cards or items, they might follow the same path, though individual items with paragraphs will follow the same text readability rule.
Our outlying ‘monotony breakers’ can live somewhere between a paragraph and a hero.
.hero-container {
width: 1500px;
max-width: 100%;
}
.text-container {
width: 750px;
max-width: 95%;
}
.narrow-container {
width: 1100px;
max-width: 90%;
}Left of center
Browsers automatically place blocks starting from the left. Your screen probably looks like this:
Well that isn’t surprising! Block-level elements fill from the left. All you need to do is center those elements on the screen and you’re set. display: flex; will accomplish this, but changing your overall display feels like overkill. All you need is some sort of automatic margin on both sides of your section, to keep it centered. You know, like margin: 0 auto;.
.hero-container {
margin: 0 auto;
width: 1500px;
max-width: 100%;
}
.text-container {
margin: 0 auto;
width: 750px;
max-width: 95%;
}
.narrow-container {
margin: 0 auto;
width: 1100px;
max-width: 90%;
}Tada!
Next steps:
What if you want to blow out the screen, anchoring items to the left or right on one side while maintaining your site container width on the other? It’s not impossible. I’ll show you how in my next article!
You can also see this blog in action on CodePen.
About the Author:
Benji is a professional web dude. He is a freelance web developer, making cool things for money (and sometimes beer).
