By Dianna Huff published July 31, 2014

3 Reasons Why Online Content Can Leave ‘Above the Fold’ Behind

folded newspaper-sepia image“My home page content isn’t above the fold,” said Sandi McCann, Founder and President of HomeCare of the Rockies.

Recently, Sandi, Rachel Cunliffe (President of Cre8d Design), and I were doing one last look-through of Sandi’s new website, when she said this.

“The pictures take up a lot of space,” said Sandi. “I want people to see my content. It has to be above the fold.”

As soon as Sandi said she wanted her content “above the fold,” my immediate response was, “Which fold?” Given that her website was designed to be responsive, where content appears depends on what device the reader is using. 

And, given that we’re now a multi-screen world, the idea of keeping online content above the fold is meaningless anyway. Following are three reasons why.

Reason No. 1: It’s a relic of the print era

“Above the fold” is a term originally associated with newspapers, referring to the top part of the front page when the newspaper is folded. (Above the fold has no bearing on tabloid-style papers, such as the National Enquirer or magazines.)

With sheet sizes typically coming in at 15″ wide x 22″ long, publishers would fold the newspaper in half in order to fit the newspaper in a metal rack or on a newsstand shelf.

To capture people’s attention, and thus encourage sales, publishers placed important news and images on the front-facing part of the folded newspaper — ergo, the section that’s located, literally, above the fold.

This notion carried over into web design. At one point, when the vast majority of us used desktops with relatively standard screen sizes, the above-the-fold section of a web page was above a fixed line at a set point.

Over the years, usability experts, such as Jakob Neilsen and CX Partners, have used eye tracking and user feedback testing to see if content below the fold places a “barrier” in front of people with regard to scrolling. The general consensus is that people do scroll to see content that’s below the “fold.”

Furthermore, the act of scrolling itself has changed. In the “old” days, scrolling did require some dexterity, as you had to use a mouse to “press and move” the scroll bar button.

These days, you can run your fingers up and down a laptop track pad or swipe your fingers across your device. This ability to swipe or brush your fingertips to find information has made the idea of “scrolling” moot.

Reason No. 2: Responsive design has changed everything

A responsive website is one that has been designed to provide visitors with optimal viewing and navigation no matter which device is used or the size of the screen. A responsive site will automatically configure itself in order to minimize scrolling or zooming in (e.g., “spreading”) on a smartphone, for example.

You can see how a responsive website works in the following screenshots:

Desktop view: In the Desktop View image below, you can see why Sandi may have been concerned about her content. From this perspective, it definitely isn’t above the fold.

smiling people helping people-homecare example

Figure 1: Desktop View

In this screenshot (taken from my 15″ MacBook Pro), all you can see, without scrolling, is the following information:

  • Company name and logo
  • Service area blurb
  • Phone number
  • Headline
  • Photos

Tablet view — horizontal and vertical: Figure 2, Tablet View — Horizontal, shows how the home page looks when the tablet (in this case, my iPad 2) is held in the horizontal position.

homecare of the rockies-horizontal tablet example

Figure 2: Tablet View — Horizontal

As you can see, the view is similar to the Desktop View; however, in this view, there’s enough room to include two lines of copy. Navigation is still “standard” — meaning it hasn’t been rendered differently due to the smaller screen size. Everything has just been scaled down to fit the dimensions of screen, in the same proportions and layout format.

In Figure 3, Tablet View — Vertical, however, things change. A lot.

homecare of the rockies-vertical tablet example

Figure 3: Tablet View — Vertical

For this view, the device is held in the vertical position. As you can see, the top navigation has been replaced with the “hamburger” icon plus the word “menu” — a responsive design feature that makes it easier for users to navigate and access clickable page elements. In addition, Sandi’s “service area” blurb now runs across the page (instead of sticking to the right side of the page) for better readability.

red circles highlight design examples

More important, though, is that viewers can see two paragraphs of copy above the fold, reducing the amount of scrolling they need to do in order to engage in some of the site’s content.

Side note: The hamburger icon isn’t intuitive

The hamburger icon got its name from the three lines that comprise it, one on top of the other. This icon is quickly being accepted as a standard navigational icon to denote a menu. However, not everyone knows what it means.

Rachel Cunliffe often researches these types of things to see if testing has been done. In her research, she discovered that James Foster of Exis Web conducted an A/B split test of the standard hamburger vs. a button that read “menu” with a border.

The bordered menu button received 20 percent more click-throughs by unique visitors than the hamburger icon.

For Sandi’s website, Rachel used a combination of the icon and the word “menu” in order to help improve the user experience.

Smartphone view: Sandi’s clients and prospects often call in a panic or due to a health crisis or emergency situation, such as when the senior in their life has taken a fall, has become seriously ill, or has advanced dementia and needs a full-time caregiver. Thus, it’s imperative to her business that people can immediately call her company on a smartphone without having to peck around on a small screen looking for a phone number.

With this in mind, the view from this smallest of screens (Figure 4) is taken up by the company name and logo and the phone number.

homecare-phone number-smartphone example

Figure 4: Smartphone View

By displaying the phone number so prominently, Sandi improves the user experience while also ensuring people can easily reach her. People simply touch the phone number and the phone automatically dials her business.

Reason No. 3: We are awash in devices!

If you look at any Google Analytics Mobile Device report, you’ll quickly realize another reason why “above the fold” is a meaningless concept for online content today: the multitude of devices available — and the different screen sizes and dimensions for each one (Figure 5).

list of mobile devices

Figure 5: Mobile devices

Trying to determine the “above the fold” set point for any particular device is futile. It’s better to simply have a responsive website that adjusts to the device and how it’s being used.

Given that “above the fold” is now a true relic of a quickly disappearing paper media age, what should you keep in mind when developing and designing your company’s online content?

  • Device orientation is moot: When I first began thinking about websites from the perspective of devices, I often wondered which orientation — horizontal or vertical — people used more.

I finally realized, based on my own observation, orientation doesn’t matter with regard to content.

Why? People who use tablet “smart” covers, for example, are more likely to use their tablet in the horizontal position while reading because the cover allows you to “prop” your device at an incline. (In fact, now that I’m used to reading in this position, I find it a pain to read a print book in the “flat” position.)

But those people who keep their tablets in cases often use them in the vertical position because these cases have a cover that opens like a book. I’ve also seen people with similar cases for their phones. 

  • Think beyond the desktop: You may post content from your desktop when you’re at work, but your readers/followers/users are just as likely to access your content from their tablets or phones while on the go as they are to read it while sitting in front of a PC or laptop.

Keep this idea in mind when creating content. Just because your website looks great or is easy to scroll through on a desktop doesn’t mean it works just as well on a smaller device. So it’s important that you test the way your online content looks and functions on many devices before delivering it to your audience.

This is especially true for eBooks, white papers, guides, and infographics — “big” content that can be difficult to access and read on smaller screens. (For tips on creating this type of content for tablets, see CMI’s post on designing content for tablets.)

  • Put important content up front: Depending on your business, audience, and content model, it pays to consider which content you want people to see first from a smaller screen perspective. Viewing your content from different device perspectives is important.

You want to make sure the content you feature makes sense in the way users are most likely to view it, and prioritize overall usability over minor considerations like where the content gets cut off in a particular screen’s viewing field.

It’s time to put “above the fold” below the ground

As consumers become more tethered to their smaller devices and become more comfortable with accessing information anywhere and everywhere, the old ways of thinking about online content — i.e., from outmoded print perspectives — are quickly dying. It’s time to put them to their final rest.

To ensure you’re giving your audience the best experience possible when engaging with your online content, think beyond the desktop, ensure your website is responsive, and consider screen size when determining how content appears — not arbitrary cut-off points.

For more guidance on making your online content accessible on any screen, join us at Content Marketing World 2014 for a Q&A on Creating Content That Provides Mobile Youtility. Time is running out, so register today!

Cover image by Alice Birkin via Publicdomainpictures.net

Author: Dianna Huff

The founder and president of Huff Industrial Marketing, Inc., Dianna Huff creates and implements thoughtful marketing strategies that help small, family-run industrial manufacturers grow and succeed. She's also the co-author, with Rachel Cunliffe of Cre8d Design, of 101 Ways to Market Your Website, a guide for small business owners, consultants, freelancers -- anyone with a website. You can follow Dianna on Twitter @diannahuff.

Other posts by Dianna Huff

Join Over 170,000 of your Peers!

Get daily articles and news delivered to your email inbox and get CMI’s exclusive e-book Get Inspired: 75 (More) Content Marketing Examples FREE!

  • Donal McCarthy

    We live in a multi-device world but all things are not yet equal though. If I know that 85% of my visitors are looking at my website via a decent sized monitor, then I should make sure that things I want them to see (CTAs) are above the fold.

    • http://www.autosoft-asi.com Tom Slage

      Donal-

      That’s just the point. Making the CTA be the first thing they see doesn’t matter.

      I would emphasize connecting that first glimpse with the context of the user’s expectations (that’s really what your 7 seconds are about). So if your landing page is receiving all the traffic from a video clip banner campaign with a “watch more” CTA, make sure that video link is the first thing they see when they land. Once you have aligned the page experience with their expectations you can rely on the content to drive them down to the ultimate goal action.

      Excellent article Dianna!

    • Angie Louise

      I agree with you, Donal. If you know that the majority of your visitors are using a specific type of device (probably a desktop/laptop), you should optimize design for that. Better yet, try to optimize for all the significant devices being used. Why take the chance that users won’t scroll to see your primary message?

      Scrolling might be easier and therefore more common today that before, but first impressions carry a ton of weight. If I’m viewing via desktop and the first thing I see on a site is nothing more than stock art and a phone number, I get a weak first impression. With all that space to work with, why not design so every user — not just those who scroll — sees something substantive upon first glance?

  • Larry Goldman

    Dianna – Very nicely put. Your case for responsive sites is a strong one that we follow. My one comment is that you neglected to mention the fourth dimension – time. Studies show that there’s a shortening attention span (you’ve got about 7 seconds to make your case in B2B marketing) that demands that you put your best content and call to action right where it can be seen. You do recommend important content first, and that’s why I won’t give up the fold concept, no matter what the device. I find it very handy to use a construct (outdated as it may seem) that forces us to consider the importance of space, the limits of time, and placement of the call to action.

    • http://www.diannahuff.com/ Dianna Huff

      Larry — Time is a consideration but so is the type of business model and the company itself. Does a company like HCR featured in the article really have “only” seven seconds? My hunch is no — especially since people are looking for a something as personal a senior caregivers.

      Ditto for manufacturing companies or other types of “considered” services.

      In the survey report I did with KoMarketing Associates, our data showed that buyers want to see Products and Services first. http://contentmarketinginstitute.com/2014/04/potential-b2b-buyers-website-content-trust/

      Again, going on hunch, I’m going to assume that a buyer will take longer than 7 seconds to read a product page and then make some type of decision to take the next step, whatever it is.

      The problem with this “above the fold” discussion is that marketers have lumped all sites, content and business models under one designation — B2B, B2C, whatever. It really does depend on your company’s goals, objectives, content, etc. etc. etc. Plus, analyzing your own data, of course.

  • http://www.seandfrancis.com Sean D. Francis

    The Golden Triangle still exists and people still read sites in an ‘F’ pattern. People also like to have lots of starts and stops to their content which if done correctly, guides them all the way down to the bottom of your content. It all depends on the purpose of the page. The fold is a myth, though and has been a long time. People scroll. In fact, watching people load up websites on tablets, one of the first things they do is flick to the bottom to see how long the article is before starting to read.

    • http://www.diannahuff.com/ Dianna Huff

      Sean — I agree about the flicking through on pages when on a tablet. I do that too — not so much for length but to see what’s on the page and to ensure I’m in the right place.

  • http://www.seo-theory.com/ Michael Martinez

    Your message is technically correct (there is no “fold” on today’s Internet) but it’s not quite the message that Web designers should be told. The trend in Web design lately has been to sacrifice user experience for big splashy images that do nothing except take up space. Those images need to go away and the top of the page needs to be returned to functionality.

    • http://www.autosoft-asi.com Tom Slage

      Wholeheartedly agree with this except for the “functionality” parameter. The top of the page should be reserved for connecting with the needs and expectations of the audience, which may be functionality (stuff users can do) but it might be graphical as well, depends.

      Agreed though that this is not an invitation for designers to abandon functionality in favor of aesthetics.

      • http://www.seo-theory.com/ Michael Martinez

        I have never yet seen a real live person use a big splash image in any way but I will be glad to review all case studies.

  • rogercparker

    Dear Dianna:
    Thanks for adding urgency (and excellent visuals) to what I had been considering a “tomorrow” project which really needs to be addressed today.
    Thanks for the sidebar on the “hamburger” icon.
    Roger

  • Spiffy Solar

    I’m reminded of the old print argument over whether a “turn page” is needed on a sales sheet, post card, etc. I’ve always been of the contention that people turn over single sheets of paper unconsciously, to glance at the other side. I think they tend to scroll, too, if the material is hitting the mark.

    However, there are always people who insist on having rules to follow and people who produce the studies for them to follow. The best design can’t be broken into such rules and often blows the user studies away. The hard part is deciding if a given project is worth the effort and risk or not. Or if it is better to stick to the tried and true.

  • Mary E. Wright

    A well-written piece. I would save “above the fold” for times when referring to the placement of your site in search results; don’t you always want to be on the first screen to pop up in a search (before scrolling down)? mewesq@mac.com

  • http://www.themobilewriter.com/ Jeff Johnston

    “Above-the-fold” may be on its way out, but Google will still penalize a site if there’s not enough content “ATF.”

    And more important than responsive design is the oncoming responsive content — content that changes based on the device.

    • 醉拳

      I agree with this. You definitely don’t want to go over board with not caring how fast your pages ‘above-the-fold’ load and how much content they reveal to the user.

      IMHO this is not a well-thought post.

  • http://www.greghague.com Greg Hague

    Great post Dianna. My head had been in an archaic “above the fold” mode.