Design & Development

The Fold is actually alive – it just moves around

Posted on
The Fold

Bringing up “The Fold” at a front end conference is a sure fired way to catch a beating, whether it be verbally or physically. Reading posts online will clue you in too, most authors will actually equate the fold with emotions like “anger” and “rage”, fists flailing in the air.

Ok, take a deep breath, let’s just chill.

It’s my guess that these emotions are fueled by years of doing client work and having to hear them talking about “the fold” over and over and over again. The redundancy get’s annoying, I know. Along came responsive web design and we were given a silver bullet to finally rejoice “It’s gone!”. But, unless we’re viewing the web on a magical device that does not have a width and height, I’m sorry to say, it’s still there.

When being discussed in nature due to web design and not print, there is a definition of what “the fold” actually is.

Above the fold is also used in website design (along with “above the scroll”) to refer to the portion of the webpage that is visible without scrolling. As screen sizes vary drastically there is no set definition for the number of pixels that define the fold.
Wikipedia

So Whether it’s on a mobile device or 27″ iMac, when your site loads, technically speaking what your looking at is “above the fold”.

Here’s some proof.

I’ve read a few of the “Big Trends of 2014” and one thing I’ve not seen yet is the full-viewport design pattern. Is there even a name for this? I’m seeing this a lot, and to be honest I rather like it. I’m talking, let’s see, http://medium.com for example. A few tutorials from http://codrops.com with animated headers…

codrops
Screenshot of a Codrops tutorial that utilizes the entire viewport for design direction.
medium
Screenshot of a blog post on Medium that utilizes the entire viewport for design direction.

A couple more I’ve come across…
Big Cartel
Themeforest Layer WP page

These are sites that are, by js or css, calculating the exact size of the viewport for their design. I dunno, the bottom of the browser could be the fold, right?

Like I mentioned earlier, this pattern can have a beautiful effect, as well as demonstrating that small details were taken into consideration while crafting the site. As a side note, I’d like to say that unless your design absolutely and positively must hug the viewport to be effective, using the css attributes vh and vw are the way to go. By defining those dimensions first in px or em’s (or rem’s) you’ve provided a great fall back that requires no js. Support is pretty darn good nowadays. I’ve also found it helpful to wrap this in a media query, on mobile your element might need to grow pretty tall in order to contain all the now stacked items, if your using vh, these items will just pop right out of your container if it’s not tall enough.

.main-header {
    @media (min-width:40em) {
        min-height:30em;
        height:100vh;
    }//mq
}

More proof?

Another huge discussion of 2014 was “Critical CSS”. The art of moving the most important bits of css from the stylesheet to the document head in order for the page to render quicker and the site appear faster to the user.

Without being long winded here I’ll just say that the stuff that the developer wants to load quick is the stuff that’s visible on page load, or above that fold down there.

What’s my point?

Nothing really. If anything I’m trying to reconfirm that web development is super complex and crazy. It changes way to fast to make finite comments. Whatever design works best for your goals, push it through. I’m definitely not advocating running to our clients saying “Wait! Guess what?! There is still a fold! Let’s start cramming more stuff there!!”. But as designers we need to remember where designing for multiple device sizes and what the user will see upon load should be good, and relevant. I get that the idea of a “normal” viewing size is antiquated, however disregarding the fact that visitors will initially “see” something when viewing your site is just as important. I don’t think any ( > good ) designers are saying “Hey, however these div’s stack up on mobile is how they’ll stack up!”. We responsively control layout with source ordering and percentages, and ultimately try to create a good UX.

Published under: Articles
Tags: , ,
Previous functions.php

A few of my favorite WP functions – collection 1

Next Design and Development Love

Semantic HTML and page architecture

Leave a Reply

Your email address will not be published. Required fields are marked *