Year by year since the dawn of the digital-age, the technology and the screens people use to browse the internet have continued to change, adapt, and evolve.

Just in the past 25-years, screens have shrunk, grown, stretched, zoomed, rotated, more than doubled their pixel capacity, achieved better refresh-rates and resolutions, narrowed, flattened, curved, and folded – and they can all be used to access websites across the internet.

Tech manufacturers are constantly introducing the latest and greatest software, apps, devices, and viewing experiences. Consumers are jumping at the chance to use new and novel tech gadgets and apps. And website designers and developers — along with business owners operating online — strive to meet customer-expectations and keep pace.

In the beginning there were desktop computer monitors. Then there were mobile devices, tablets, and smart TV’s. Now, we have giant televisions, billboards, window displays, gaming consoles, digital floors and ceilings, laptop computers of every size, handheld tablets, tablets for reading, tablets for watching streaming media, desktop computer monitors that could be mistaken for small TVs, digital projects, VR goggles, the metaverse, and more.

From 320 pixel wide iPhone 3’s to 7680 pixel wide 8K resolution monitors – it’s all out there in the wild and we experience more and more diverse options continuing to pop up all the time.

As designers and developers of the digital landscape, we may have mastered rendering websites on the mini-screen environment. Folding a normal website layout into itself — from multi-column to single column layouts — has become commonplace. But, what options and strategies are there for progressively enhancing layouts for larger viewports and innovative technology that is yet to come?

How do you conquer the spatial relations and affordances of large screens and should you even try?

Mobile Devices Enter the Scene

Throughout the early 2000’s, mobile browsing dominated the landscape. In as little as 5-years after Apple’s iPhone hit the market, website analytic trends were tracking mobile-viewership at near 50% (or slightly above) of all website traffic and projecting a continued increase of mobile-device usage for the foreseeable future.

Conforming to Smaller Screens

For over a decade — from the early 2000’s into the early 2020’s — attempting to make familiar desktop-sized websites display in a pleasing manner on smaller screens has been the primary focus of designers and developers.

How do you take a large site with lots of images, videos, advertisements, stick it on a tiny little phone screen, and transform it all so it still makes sense? How do you tell a sponsor or advertiser that their ads still have value, but mobile-website-traffic is on the rise and no one’s going to scroll to the bottom of the page to see their ads. Or how do you design a website that prioritizes the people visiting it if you need to fill the entire above-the-scroll viewing area with ads and navigational links? What about text sizes? Memory limits and filesize? Acceptable visibility? Proprietary software that doesn’t run everywhere your customers do? And to top it all off, in today’s world of instant-satisfaction how do you make everything load fast enough that people will stick around to see it?

We may not have answered all of those questions, but for the most part tech professionals have sorted a lot of it out.

Developers adopted mobile-first development strategies. Designers got creative with single-column and single-page layouts. Website resource requirements were lowered, code was minimized, mobile-friendly frameworks were born, software that worked on all devices won competitive wars, and digital footprints were reduced in efforts to provide better user-experiences across the wider landscape of both users and their devices.

Responsive Website Design is Born

As web developers attempting to keep up with technical innovation and consumer demand, the term “responsive website design” (RWD) was coined. The concept behind responsiveness was accepted. And, responsive websites quickly became mainstream to meet consumer demand.

Having a responsive website is synonymous with saying your website works seamlessly across all browsers, screen sizes, and devices.

Business Competes become Business Qualifiers

For business owners, nice-to-have competitive advantages like having a website quickly become necessary qualifiers needed to exist and operate online. The digital playing field is not even without one. Additionally, it’s no longer enough to simply have a website — customers expect every website they visit to conform to whatever device or screen their on.

In theory, being responsive sounds like a simple concept — and in 2004-2005 when the term was coined it may have been a simpler idea. However, considering the vast array of screen sizes, devices, pixel resolutions, internet browser options, and the continual rapid-pace of innovation and a rotating door of options for engaging with your favorite websites it painstakingly obvious there’s a lot to account for if you want to cover all your bases — it’s not always easy. 

The widespread adoption of smartphone technology throughout the early 2000’s has forever shifted the way normal-everyday-people browse the internet. The continual influx in everyday technological innovation keeps digital professionals on their toes. The goal posts shift often, but the ability of creatives and technologists to innovate, adapt, and overcome keeps the doors of progress open and a bright light shining on our ability to move forward, onward, and upward.

Less is More and Bigger is Better

Somewhere along the way you may have noticed screens sizes begin to shift towards larger sizes.

Mobile-devices haven’t grown much larger, but their screens have — some have even doubled (or more) in screen capacity with the introduction of retina screens (2x the pixels on the same screen real estate), 4K screens, and more recently 8K devices. Someone somewhere thought it would be a grand idea to do more with less, less could be more, and bigger might be better — and graciously a tech god somewhere else scratched their head and shouted “let it be so!”.

And, now we have all these cool new ways to experience the internet. Watch YouTube on your TV. Use one of those folding-screen phones that feel like dual-monitors. Even just attaching an HDMI cord from your laptop to your 32-inch LCD television — never mind hooking in to your 75-inch movie-cinema-sized wall-mounted TV in your living room — is once again creating new web-browsing environments and changing the landscape and spatial relationships of how a website is able to display.

An Evolution: Fixed, Fluid, Adaptive, Responsive, Mobile-First, and Everything

So, websites started as static fixed-width things that didn’t change from screen to screen or device to device.

Then, monitors changed a little bit and websites became a little more fluid — using percentage width and the like.

Next with the rise of mobile devices and smartphones, websites started popping up with mobile versions of their desktop counterparts. This phase didn’t last long because maintaining multiple versions of the same site is a pain.

As responsive web design came about, developers next began touting one-site-to-rule-them-all solutions. Savvy developers jumped at mobile-first (or “mobile-friendly”) responsive techniques because good enough isn’t always good enough. And, front-runners developed ingenious strategies to conform to user-needs while also gaming and optimizing for search engine rankings and digital business objectives.

Without missing a beat — just as designers and developers started to feel comfortable with responsive design — tech-hardware took a leap forward introducing large screens and new challenges to be met. There is no winning for complacent technologists — only a nomadic path forward. This is the way.

Big Screen Energy Problems

There’s a big screen — it could be your fantasy. But, does your website have big-screen-energy?

Looks, it’s not so bad to go from normal-size to mobile. The amount of content that fits on a typical 1024×768 (or slightly larger) viewport is a reasonable amount to smoosh into a mobile-viewport or tablet. No one bats an eye or makes a peep about it. But, what happens when you need to swing in the other direction?

What do you do when your website doesn’t have enough content to fill a larger space?

Centered Layouts Strategy

You could keep everything centered on screen. Essentially, you’d be displaying the desktop-version of your site on the extra-large screen size — leaving whitespace on the left and right sides of things.

Many websites already use a centered-layout approach. Some desktop (and even laptop) monitors already feel too wide — or designing the wide-version of the website just isn’t in the client’s budget, so it doesn’t exist. Typically, this style of website design spans 100% of the screen width up until a certain point — the maximum width of the site design — and then anchor in the middle of the screen.

Anchoring in the middle of the screen is totally acceptable — up to a certain point. At extreme-widths, a relatively small website in the middle of an extra-side screen starts to look rather comical.

Extra Columns Strategy

Another strategy is creating more columns in your website’s layout. Other than news-heavy websites, most “desktop” websites come in shades of 1, 2, or 3 column designs.

At larger widths, you may find yourself feeling like there’s room for an additional column or two — but when does increasing scale end? Does it end? How many columns are enough columns? What’s the proper breakpoint for a new column? What’s the maximum acceptable width a wide column should be? And, what happens if you run out of available content to fill all the extra space? Do you revert to a centered layout?

More columns sounds nice — sometimes — but more space presents more problems. Transitioning from desktop to mobile is akin to counting down — no matter where you start at you’ll eventually get to the lowest point and the countdown is over. Whereas, transitioning from desktop to a larger size is akin to counting up — numbers and potential screen widths could increase in infinite. Space is still the final frontier.

Move Top Navigations to the Side

One extra column that makes sense — for a middle of the road stretch of larger screens — is to move a sites’ primary navigation menu from the top of the screen to the left side of the screen.

Historically, navigation menus have found a home near the top of most websites. Top menus afford more space for important content across the middle of the screen — it makes more sense on mobile devices where multi-column layouts simply do not fit the viewport. And, top menus often look cleaner on normal desktop-sized sites — allowing for some whitespace between content areas is good design and helps with readability.

Sidebar-style navigations on larger screens are going to create other issues as screen widths increase too, though. For example, there’s going to be a stretching point where the sidebar starts to feel disconnected from the content if you’re managing the line-length or maximum width of the content area. You may end up with centered content and too much whitespace between the sidebar and the body copy, font-sizes that are too large, or line-lengths that are too long.

As with the extra-columns strategy, space expands in infinite and at some point there will be too much.

Room for More Content

Whether you’re increasing column-count or going with a fluid-width strategy — what can you do when you run out of content to fill the available space on the screen?

Maybe you can add more advertisements on the side. Or maybe attempt to make all of your content viewable above-the-scroll like the entire site is the top-half of the front-page of a newspaper. You could increase the size of images, but we’ve already touched on what happens when a normal image tries to scale larger than it’s native size — and it’s not a good experience.

Photography Doesn’t Scale Up

What can you do about scaling up images on larger screens? Not a whole lot. Photographic mages don’t scale up as nicely as you’d want them too — in fact, normal images (JPG/PNG) don’t scale up at all

Instead, they get pixelated and fuzzy looking. A hero-image isn’t very heroic if it looks like it came from a 2MP camera lens — there’s a reason website designers weren’t using their iPhone 3 or integrated laptop webcams for professional-grade graphic design projects.

Rely on SVG Images

One seemingly bulletproof option — at least for image scaling issues — is to stick with SVG images. SVG’s scale both up and down in size with amazing gracefulness.

The only downsize of upscaling SVG’s is: do you really need an image that big?

Regardless, at least it’ll look clean and crisp and that’s saying something.

SVG-only websites are cool in theory, but not very realistic in most real-world scenarios. Could you imagine an ecommerce store trying to showcase all its products as illustrated line drawings? — which is basically what most SVG graphics amount to.

Line Length and Font Size Dilemmas

How do you deal with longer line lengths on larger screens?

Would you increase the font-size to fill the available space? Or fall back to a centered layout or the addition of extra columns to keep the width of the content area narrow?

As for line-length, excessive left-to-right (or right-to-left) eye movement becomes a pain point. Plain and simple, text that isn’t scannable becomes difficult to digest — it doesn’t matter if the font-size is large or not. Most conventional heat maps tracking a person’s eye-movement while they’re reading a typical website have shown that most people scan content in what is essentially an “F-shaped” pattern — where they read the headlines first, peruse down the left-half of body-text, and scan across subsequent headlines as necessary.

Video Content

Video content may be the only type of content that innately seems BETTER on large screens. Full-screen video players have always been an acceptable — dare I say, desired — way of consuming the medium.

That said, you’d be hard pressed to find anyone in the business world making entire websites entirely of video. Even if you’re publishing video content at a high-level you’re likely still dealing with graphics, text, and some sort of layouts — YouTube’s an easy example to point to. There’s till logos, headlines, text, and gasp — the comment sections to wrangle.

Conquering Large Screens

So, can responsive website design conquer rendering the web on large screens?

Internet Browsing is Not Television

TV’s are commonly referred to as “lean back” viewing experiences. As in, you’re sitting a few feet away from the screen on your couch, bed, or a comfortable recliner.

UI/UX design for television can afford to be different on a TV. The context of television usage is different than how you use a computer work station. The viewing distance is greater between your eyes and what you’re looking at. And, the way you control the device — if it’s controllable — is much different.

Screen Size is Not Browser Size

Another saving grace to keep in mind is that screen size doesn’t equate to the size folks keep their browser windows at. Just because you have a 1920px wide desktop monitor doesn’t mean you’re viewing the internet in a maximized browser window — which admittedly is more common for Windows PC users than it is for MAC users, but it’s safe to assume that most computer users adapt their environments in ways that make what they’re doing more comfortable for them.

The Silver Lining

The silver lining to all the big-screen problems is most large computer monitors — i.e. the screens people really use the internet on — aren’t used in the same way most people use television screens or interact with digital billboards, artificial intelligence, or augmented reality displays. Even though you can view a website on a giant screen most people probably won’t.

Infinitely expanding screen sizes may be an extreme edge-case of the future. It doesn’t mean super-large-screens won’t become mainstream — like having a laptop in your back pocket that’s more powerful than the ones astronauts used to fly to the moon with has become — but, you’re probably safe to ignore them for now (or at least for a little while).

My best advice for tackling the unknown digital landscape of tomorrow is to deal with the now and let the data drive your future. Maybe your website visitors are all on large screens and you need to figure out how to cater to them, but analyzing your website traffic might also determine that no one is viewing your site on large screens and the whole idea is a moot point.