Can You Fold the Internet?

Let’s talk a little bit about terminology and the web. Before the internet, in the world of newsprint, content was either above or below the fold. This referred to the middle fold in a paper. And when content is above that fold, it is the primary visible content. This was usually reserved for the most important content of that day. The biggest news stories had to be seen, even through the window in the front of a newspaper machine (remember those?) or stacked on a counter in order to entice the reader to make a purchase. It became very precious real estate for content constrained by its limited form factor. Undoubtedly, there were many battles as to whose story got this “above-the-fold” top billing.

The fold used to be a very common constraint – for newspapers

The fact is that many people still consider that a typical constraint for web design. The idea of a “fold” was useful in the world of newsprint but, when applied to content on the internet, it is misleading at best.

It is rooted in the assumption that there is a common architecture or footprint – most newspapers in the united states, when folded, were roughly 15 inches by 12.5 inches. Since this was (for the most part) a standard, you generally knew how much content you could reasonably place within that space and that amount rarely changed unless you changed paper sizes or type size.

This standardization of size and space for content, however, does not exist on the internet, and likely never will. This is because you never know what type of device your user views your content on. From old phones to the (at the time of writing) highest-end 5k desktop monitors, the lines have become so blurred, it is now a spectrum of potential, rather than a handful of sizes. It is no longer safe to make any sort of assumption as to how a user will consume your content.

There is no “fold” anymore, so how do we talk about the concept of real estate on the internet?

 

Enter Viewport Size

Since there is no real “fold” anymore, we now think in terms of viewport size. Each device that you use to view the internet on has a specific viewport: the area from the top left corner of the screen or window to the bottom right corner, usually measured in pixels. On your phone, the viewport is usually the full screen, but on a desktop, the viewport would be the size of your browser window (which users are free to resize at will).

There is a lower limit, however. You can’t expect a webpage to work in only a handful of pixels, so we define our lowest-common-denominator viewport size to be 320px wide by 480px tall (think iPhone 5) and, from there, the sky is the limit (I’ve seen 5k monitors with resolutions of 5120px by 2880px).

To look at this spectrum of device capabilities, sometimes a diagram is more impactful. When Glamour magazine redesigned their website, they tested the viewport sizes of everyone who visited their site and laid them on top of one another. When viewed this way, it is painfully obvious that we no longer have the luxury of standard sizes.

 

viewports
Can you spot your own devices in there? (diagram credit: Gareth Williams)

 

It’s a difficult concept to wrap your head around initially. The “fold’s” underlying constraint is still applicable to the internet in a sense, because each device will have its own particular “fold”: its viewport size. For example, when you view a website on your phone, you aren’t going to be able to see the same amount of content that you would be able to on a desktop monitor – they both have space constraints but, unlike the world of newsprint, there is no common ground that can be assumed. To use a metaphor: If you think of your content as a fluid, a shot glass is going to hold far less than a bucket or a swimming pool.

Sometimes, making sure your content works across this spectrum of viewport sizes can be straight-forward – in fact, websites at the dawn of the internet did this spectacularly well by default. When your content is composed of 100% text, that works great across all devices and can conform to almost any viewport.

Often, however, the process is a bit more challenging than this. Beautifully-designed, complex layouts usually involve more than just text. There are high-quality photos to consider almost everywhere and, as soon as you want to display things like data in meaningful ways, you soon begin to feel those viewport walls quickly closing in around you and your content.

When we designed and developed the Blue Circle Institute website, they had very specific needs for text, data, and imagery to be accessible within a (potentially) small space. We eventually decided that a carousel/slider was most appropriate from a user-interaction standpoint.

The development process went a little bit like packing a moving truck: You have all of this stuff that has to squeeze together and it sometimes takes a few attempts to get it all dovetailed together efficiently. At certain scales, the diagrams had to be big enough to still be legible, but every extra pixel they took up also took away precious real estate for text content.

 

diagram-closed

diagram-open

 

So when you come in to talk with us about a website, understand that we won’t be thinking of how your site will work on only one particular device or even a handful of devices. Our goal is to ensure that your web content will be just as impactful whether the user views it on their smartphone or their desktop computer or whatever else may emerge in the future. We only see the spectrum now.

With the right strategy, design, and social content, we helped Big Shake’s Hot Chicken cultivate a fiercely loyal audience.

We articulated our core values. You won’t believe what happened next.