Recently, I bought a wide-screen monitor. While I'd considered dual monitors, I eventually landed on getting a wide-screen one instead of two separate monitors. Mainly because if I wanted dedicated left and right, I could still do that within the one wide monitor, whereas if I wanted something on 75% of the screen, then that could only be done on the one.

I expected having an ultra-wide screen to be a game-changer in some predictable ways ... for one, when I'm working on a virtual machine or VPN, could have its own distinct place and that's turned out to be correct. And the widescreen has turned out to be invaluable in apps/software that display timelines, like video-editing and audio-mixing software.

But this has opened my eyes to a lot of things on web design. Let's take a wide look at how this affects the web. (Wide? See what I did there?)


The 21:9 Ratio

What's the difference when on a widescreen in a browser? Yes, the width is the correct answer. More accurately, it's the width-to-height ratio. Most of your life using a computer you've been looking at screens with a 4:3 aspect ratio (4x wide and 3x high), and that's pretty much what most TVs have been.

Nobody really used monitors in a landscape view until the smartphone and tablet changed all of that. For those most part, tablets and phone have aspect ratios of 4:3 or 3:4 depending which way they're flipped. There was a little bit of a game changer in HTML history, but mostly because HTML needed help in controlling the width of what a user sees. Along came "Bootstrap" which gave a great system to wrap content down to a lower part in the screen when then screen was too narrow (along with established "max-width" options in HTML/CSS. (Beginners can go deeper here.)

Even on slightly different ratioed iPhones and formerly what were marketed as "wide-screen" monitors had a ratio of 16:9. That's still a schema where the short side was still over half of the long side.

But now with what we see for wide screen is at a 21:9 ratio. Now THAT is widescreen. If you have your browser in full-screen mode on a 21:9 monitor most sites, even major/established ones, will look something like this:




Some Tools To Help With Widescreen Blues For Browsers

So, what can you do about this on the user/browser side? That maximize button is a hard habit to break. Or perhaps you're like me and you keep 10 to 20 (ok, 30) browser tabs open at once, the extra wide browser is kind of a feature even though most web sites are not dealing with the extra width.

For one thing, you might be annoyed to watch a YouTube video and see all of the extra black space


There is a nifty browser plugin called Ultrawidify that takes care of that black space for Chrome, also exists for Firefox

And what if I told you there was an easy way in Windows to quickly move your maximized browser (or any window/app) to take up exactly half the screen? Try this Windows feature. If you're weren't aware of this one, you're welcome.


Are Most People Going To Keep Their Browsers That Wide?

Let's get down to brass tacks for people who have/manage a website. Are you going to need to incorporate ultra-wide dimensions into your design?

I can't predict how much of the monitor market that wide or "ultra-wide" monitors are going to be. Or even if folks with that screen width will still be viewing in full-screen, maximized mode very often.

Throughout my career I've been told and anecdotally learned that you should never turn your back on any segment of web users (aka "customers"). During the early 2000s I was involved with a startup where the VC guys were scoffing when I mentioned internet users still on dialup, which at the time was still a startling 10%. (Even now, home internet use is around 2% dialup). I did not want to be in the business of excluding users or flushing customers down the toilet out of snobbery or laziness.

Similarly, if in the near future there is something like 5% of visitors to my sites using ultra-wide settings and screens, isn't it worth the effort to accommodate them?


HTML For Widescreen Is Just Good Practice, Anyway

Before you answer my question at the end of the previous section positing if it's worth the effort to make your site look good on wide screen, consider the following. The ways I'm talking about controlling the wide space is easy and just good practice in the first place.

Let's look next week at a couple of issues on a couple of web sites I run for myself, and in that "How To Control These Issues" section we'll look at how easy it is to deal with them.

How’s that for a cliffhanger?


Click here to read Part 2
.