Today let's turn web design upside down. I'm going to talk about what often seems to be the forgotten half of the viewport family - bigscreens and large laptops. Their pageview share approaches 50 percent, among all Internet-capable viewing devices. But they are rarely talked about nowadays in my circles, in the mad rush to scale websites down to fit little tiny phones.

The second half of the 2010s brought about a mania for mobility. Google gave it a big shove with it's declaration of "mobile first" as the prime metric in its site-ranking algorithm. But not everybody got on board. There are still millions of non-mobile websites out there.

Their owners have a theory that if people want to visit their site, they should use "a real computer," as one gentleman put it to me. He had a giant, insanely complicated homemade site built almost entirely with raw PHP blocks. When he learned what it would take - and how much money - to convert that antiquated behemoth to a modern CMS-based responsive website, he said no thanks.

It was not an insane point of view. He had his reasons. For surfing the Web many folks in fact prefer their big laptops and desktop monitors to a tiny smartphone only 350 pixels wide. Viewportshare data bears that out. Snapshots of global website traffic reveal that phones account for about half of all pageviews. But bigscreens come in a strong second at about 46 percent. Tablets claim a very small segment at just 4 percent. These proportions appear to have attained long-term stability.

The very strong and resilient showing by bigscreens will surprise a lot of people reading this, but it's well known by industry insiders. If so, the question becomes: Why do so many websites look terrible on modern HD flatscreen monitors?

It's all about shortcuts. The easiest way to mobize a website is to center all your content in layout, including (and especially) any images, eschewing the use of tabular columns. With the aid of some elementary media queries and CSS code, websites designed this way are simple for browsers to squish down.

But when you scale them way up, it ain't pretty. Now you know why you see what you see when you encounter all these sites which are hard to read on your desktop monitor and generally resemble child's toys. The developers did it the cheap and dirty way.

One can mitigate the ill effects by using a conservative, fixed-value container width for the website, say something around 1100px. Yet that too will look like a mistake on a bigscreen with a width of 1920px. Imagine that you picked up today's newspaper, and it was empty except for one skinny column right down the middle of the front page. The rest of that expansive broadsheet layout was just blank.

And so this trend is not good for companies which court a rarified, deep-pocketed clientele. Those customers are far less likely than average to be reading your website on a phone. They will be looking at you through the lens of a high-res LCD flatscreen. You need to be mobile, for sure. But you need to place equal emphasis on looking good at the top end of the viewport range. Because money lives there. And you can't afford for money to perceive you as hapless.

To make a long story short: If you are pursuing a well-funded and discriminating clientele or customer base, your yellow brick road will most likely terminate at a big, wide, bright, beautiful, state-of-art, executive viewscreen. Not an iPhone5. Never lose sight of that reality.

For the better part of the last year I've been experimenting with different ways to make this design philosophy work on production websites. The build process needed to be expedited to hold costs down, and yet the end result had to make the fullest, best, uncompromised use of each popular viewport range.

We no longer set any fixed container width other than a maximum website width of 1600px; so that the layout completely fills the screen for all smaller devices; and holds up very well indeed on bigscreens up to 1920X. The layout uses layered flexbox rows configured soley by means of viewport width percentage. That way everything on the page scales up or down dynamically based on the screen dimensions of the user's device. There are different layouts for each of the major viewport family members. 

It was not at all easy to achieve. But I like how it turned out, and you're seeing it in the wild when you visit our new website, javelincommuncations.com, right here.

Acknowledgements: Stats cited in this post come from a variety of sources, but with special thanks to DesignRush for their insightful article on most-popular screen resolutions worldwide for 2020.