Ultra-Wide Screens (Part 2: Web Design)
Does Your Site Need To Accommodate It?
Posted by Charlie Recksieck
on 2020-10-08
* * *
We left off last describing the impact of ultra-wide screens on browsers and websites. Now let’s talk about what to do about it.
What Wide-Screen Looks Like
Here are screen caps from two of my sites, the first being from a music site I run for a band that I play with ... [plug] new album out just now ... in stores: bigfellas.net [/plug].
Most sites you see around when on an ultra-wide monitor have this issue. The CSS is working in some kind of container that looks normal almost all of the time, except when the page starts getting over 3000 pixels wide like this. Some will be left aligned (like Google) or center (like this above, or Amazon).
And then this very blog you're reading on this Plannedscape.net website:
Pretty much the same issue, containers in our CSS (which do serve a purpose for controlling the look and the margins).
How To Control These Issues?
We could deal with some of this by making bootstrap columns or css statements that check to see if a screen has a width of a certain number of pixels. This is a typical CSS statement to have other design rules for screen widths of a certain size ...
@media only screen and (min-width: 768px) and (max-width: 991px) {
specific styling properties }
You could style specific things for ultra-wide screens with css rules like this ...
(min-width: 2200px) {
specific large-screen styling properties }
But I've got an even simpler solution. As long as your page is using SOME kind of containers, whether they are Div or Row types of sections in your HTML, we can plan to make them fairly wide up to a point and have them use 100% of their container's width, or 95% if you want to ensure some decent margins on the side no matter what size. (Note: As long as your container CSS/HTML is not already limiting a max width of 1600px or something like that. If it is, you can take that out of your CSS.)
Here's a page where we have a container already set as something like 90% of the screen width. Within that if I did nothing else to control the width you see the following results ultra-wide with the following HTML (CSS properties shown here internally so you can see what's what)
[!-- show album description --]
[div]
[center][p style="margin-top:30px;color:#3A486B;font-size:22px;font-weight:normal;"]
[?php echo "About " . $albumName; ?]
[/p][/center]
[p style="margin-top:-10px;text-align:left;font-size:18px;line-height:22px;margin-bottom:20px;"]
[?php echo $albumDescription; ?]
[/p]
[/div]
That stretches out the copy in the album description section to be WAY too wide, thins out each paragraph, just not good for readability. So if we add some controlling properties to the div (style="max-width:1600px;margin:auto;align:center;"), then we'll end up with this ...
Much better. Any of you web designers out there get the idea. For those of you who are interested in your website but can't tell HTML from HDMI, you still get the larger concept: Ultra-wide screens can throw things off, but things CAN be done about it.
Some Major Pages
As I often find myself saying when it comes to web advice, don't feel bad if you're not currently doing something like this on your own website when some of the most widely used, dominant sites are not currently doing anything.
Here's some screen caps from some major sites:
They don't get bigger than Amazon and Facebook and you can see that they're not doing a whole lot to design to a wider size.
Unsurprisingly, Netflix and Wikipedia look pretty good. I'd wager to say that both didn't do anything consciously to make themselves ultra-wide friendly. They both have always had clean design. (Wikipedia shout out for old-school PHP platform that always holds up.)
Takeaway
Yes, managing ultra-wide screens isn't a major DEFCON-1 level emergency for any of us. At least just yet. But if different widths keep growing in popularity, why not make your site look better for that 2, 5 or maybe even 10%? Especially when it is so easy.
Everybody in the abstract likes the idea of gaining small advantages on the competition. If making your site look vastly superior to others' for even 10 people a year, I'm going to wager to say it might be worth the hour or so it would take for you or somebody there to deal with it.
That's my free two cents, at least.
