Here’s what we’re up to.

You may have heard that it’s important to keep everything “above the fold” in your website’s design. Well, despite advancements in flexible LCD screens, you still can’t fold your website up (yet). So what exactly is “the fold” and is it something you should worry about in your web design?

Where did it come from?

The term “the fold” originates with newspapers.  Newspaper publishers would try to include their catchiest headline and flashiest photo “above the fold.”  That is to say, the part of the front page that was visible when the paper is folded and displayed on a news stand.  In the early days of the internet, this terminology was used in web design to reference the area of the website visible when it first loaded.  During this era, it was also a trend that most computer applications displayed all of the important on the screen, all the time. Because of this, scrolling itself was a fairly foreign concept to early web users.  

Why it stuck.

Whereas newspapers used the “above the fold” area to entice viewers to open the paper and look further, web designers sought to cram literally all of their website’s content into this space. Their fear was that the user would never think to scroll and discover the content below.  While few websites today seek to keep all content “above the fold,” the notion of placing all pertinent information in this area has largely stuck. It is the case, however, that research widely disputes this “rule.”

The facts.

While the internet may still be young in years, it’s prevalence in our daily lives has meant that we’ve had to rapidly adapt to its conventions.  Simply put, we all now know how to scroll.  Not only do we know how, but we do it without even thinking about it.  In fact, a study from Chartbeat that analyzed data from 25 million browsing sessions across the web discovered that many visitors actually begin scrolling before the page even fully loads.  We are so familiar with scrolling that in July 2011, Apple nixed scrollbars from the interface of OS X.  They were confident that users would intuitively scroll for more information– even without a visual clue to do so.  People often will say that they don’t want to scroll for content when directly asked, however in usability tests, users don’t even notice whether a website requires scrolling or not.

With scrolling being just as familiar as opening a newspaper, websites might be wise to return to the strategy of those “above the fold” newspaper layouts.  By exchanging a crowded and content heavy “above the fold” space for a snazzy headline and eye catching photo the user will be eager to learn more about you.  Eye tracking software has even shown that layouts featuring less content “above the fold” encourage visitors to explore below.  The more your user explores, the more likely they are to see more content than could ever be fit “above the fold.”

Now.

Of course the entire concept of “the fold” is only relevant if you know where the fold is.  In the early 90s, computers weren’t vastly different and you could be certain that a large majority of viewers would be visiting on a similar-sized screen at a similar resolution.  Today, screen sizes and resolutions vary wildly among desktop computers, let alone laptops, tablets and phones.  While responsive web design can make websites appear beautifully across all of these platforms, the variety makes it impossible to say with any certainty where the elusive fold will appear on each device.

The biggest take away here is that, in the world of modern web design, don’t spend time worrying about the fold.  Give your content room to breathe.  If it’s clear and compelling, your website’s visitors will happily scroll or swipe their way through it.

You may have noticed that when you return to a website you’ve visited before, it loads a bit speedier than it did on your first visit.  This little boost is thanks to the power of caching. Caching makes commonly used websites load faster and use less bandwidth, but there are a few instances in which it can all lead to some pretty screwy behavior.  What is caching anyways?  Well, to answer that question, first you must understand what happens when you visit a website in your browser.

When you visit a URL, your browser sends a request to the server hosting that page and asks it to send you all the files associated with the URL you are visiting.  For modern websites, this frequently includes a lot of different files.  These files include (but aren’t limited to) the page itself, any images displayed on the page, at least one (and sometimes many) stylesheet and any number of javascript files.  As your browser downloads all these files from the server, some of them are saved onto an area of your computer’s hard drive called a “cache.”  The next time you visit that website, your computer will first look in its cache for a recent copy of the files the server is trying to send it.  If it finds some, it will load those directly from the hard drive, which is way faster than downloading a fresh copy of them from the server.

Unfortunately, when a site is being developed, the contents of these files are changing rapidly, and the cached files may no longer be the most up to date versions.  This can lead to pages displaying as outdated versions, or sometimes looking broken if old, cached files are loaded alongside other files fresh from the server.  To solve this problem, you can do a “hard refresh” (sometimes called a “force reload”).  A hard refresh forces the browser to load all fresh copies of the files from a specific page regardless of what it has in its cache.  If you’re viewing a webpage that is under development and things don’t look right, try a hard refresh first!

The steps to do a hard refresh vary depending on the browser and operating system you are using, but below are the keyboard shortcuts for the most common ones.

Chrome:

Windows: Hold down Ctrl and press F5

Mac: Hold down ⌘ Cmd and ⇧ Shift key and then press R

Mozilla Firefox:

Windows: Hold down Ctrl and ⇧ Shift and then press R

Mac: Hold down ⌘ Cmd and ⇧ Shift and then press R

Internet Explorer:

Hold the Ctrl key and press the F5 key

Safari:

To empty the cache, you need to turn on the Develop menu. Got to Safari > Preferences…, click the Advanced tab, and check Show Develop menu in menu bar.

Hold down alt and ⌘ Cmd, and then press E to empty the cache.

Hold the ⌘ Cmd key, and press R to refresh the page.

Before you go, download our PDF document outlining how to hard refresh!