“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.
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.
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.
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.
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.
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).
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
Comments