“The Fold” is the unobtanium of web development.
I’ve been a web designer for 13 years and I still receive requests to “make sure all our important content is above the fold.” Recently, this request has been applied mobile devices as well, which truly baffles me. It’s unlikely you’ll ever sit next to someone at Starbucks who panics because they didn’t realize that swiping a finger across their iPhone screen would allow them to see the next five tweets.
One of our agency partners, Rattleback, has posted a very reasoned (and statistically supported) article for letting go of the “fold” on mobile. And they are not alone in their quest to dispell the myth of the fold, as evidenced by this article. And this one. And here and here and a rather amusing one here.
Extra! Extra! Extra!
The origin of the term “above the fold” goes back to the days when newspapers ruled the world. Placing a front page story above the fold not only meant it was important news, but that the story headline was visible to anyone walking past a newsstand (remember those?). It was a “hook” to entice you to buy that newspaper over the competition. As a reporter, if your story was placed above the fold you celebrated. If you were able to achieve this on a regular basis, you might have a Pulitzer in your future.
One of the common misconceptions of “above the fold” goes like this: “If I don’t put all of my page content above the fold, no one will ever see all of it.” Nonsense. If web users didn’t expect to scroll, sites like Amazon and CNN would have whithered long ago. If the purpose of “above the fold” newspaper content was to entice you to read further, the same model applies to web content as well.
– Jason Sutton, Rattleback
Instead of focusing on trying to compress your entire page above the 600-pixel waterline, you should consider your content and how to shape it so that your readers will be compelled to dive deeper into the site.
Create Compelling Content
It’s not easy to write good content, but it’s worth the effort if you want people to read it. There are several resources on our site that can help you learn how to create content, both written and visual.
Prioritize Your Content
The most important content on each page should be visible when the page loads. And if your content is longer than a paragraph or two, you need to decide which content takes first position, second position, etc. Not every piece of content can be the most important. Take control of the page, don’t let it control you. Develop the skill of ruthlessly editing and prioritizing your content, or find someone who will do it for you.
Consider Each Page
Not every page can be everything to everyone. Nor would you want it to be. Developing shorter pages with custom content is sometimes preferable. For example, we could have combined most of the content under our “What We Do” heading on one page. This would have given us a single source to point to and say, “here’s everything we do!” But that would have created a monster page, intimidating anyone unlucky enough to land there. Parsing out this information over several pages not only improves readability but SEO as well.
When “Above-the-Fold Thinking” Makes Some Sense
There are, however, situations in which “above the fold” thinking can help you decide how to place page elements and how to edit your content so it’s clear and concise.
Calls-to-action provide important conversion points to your viewers. Sign up for our newsletter. Become a gold level member. Add this item to your cart. Amazon places their most important conversion points right at the top of the page. While there are dozens of links littering a product detail page, the only elements on the page that are extruded into 3D and buffed to a glossy shine are the actionable buttons, the most obvious being “Add to Cart.”
With many visitors coming directly to interior pages of sites (thanks to SEO), the home page isn’t always the front door of your site anymore. Never the less, those who come to your home page either via search or directed there by a marketing effort, will need to glean the who, what and how of your organization quickly or they may move on. The solution isn’t jamming everything on your home page above the 600-pixel waterline, but using that 600 pixels of space to make your message clear.
The recent redesign of Newfangled.com is a good example. Our goal for the home page was two-fold:
1) Anyone coming to our home page would immediately understand what we do.
That’s why we have a billboard-sized banner directly underneath our main navigation containing a brief positioning statement and a clear call-to-action.
2) Provide the most relevant content close to the top of the page.
The home page is a grid, with each cell containing a bit of content from inside our site. The first row contains a web design case study, our most recent newsletter and an upcoming webinar. Along with the positioning statement, these three pieces of content provide entry points into the what, how and why of Newfangled. We didn’t try to cram all of our content into the top of the page, but we made sure the most relevant was visible (this applies to mobile devices as well).
As developers and marketing professionals for the web, I recommend we spend our time helping clients produce compelling content as well as carefully consider the focus and purpose of each page of their site, rather than being distracted by a web design buzzword from the previous decade.