When I hear the phrase ‘above the fold,’ my mind goes back to third grade and Mrs. Watson saying, “Make sure to write your story below the fold and draw a picture above the fold.”
She was, of course, referring to the piece of paper on my desk that had been perfectly folded right down the middle horizontally. My picture was prominently displayed above the fold, where it would get the most attention, while my story was below the fold. Although my story was important, it was not as important as the artwork that would make my parents smile…or frown. Fact: I am most certainly NOT the best illustrator.
In web design, ‘above the fold' refers to the portion of the webpage visible without scrolling. The old mentality, confirmed in studies by the Nielsen Norman Group, was that most users did not scroll webpages. Therefore, any information below the fold was most likely lost and never seen. However, with the introduction of mobile internet devices, such as cellphones and tablets, an 11” screen and popular websites that have long scrolling pages, society has learned they have to scroll to get information. This web behavior has transferred over when users are on a larger-screen laptop or desktop. Behavior modification at its finest – B. F. Skinner would be proud.
In 2010, Jakob Nielsen of the Nielsen Norman Group released a study which found that “Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.”
Conversely, in March (2014), a data analysis conducted by Chartbeat concluded that “66% of attention on a normal media page is spent below the fold.”
These two studies, amidst many others, have sparked quite the debate. Should you worry about the fold? Yea, sorta.
A user-friendly page, designed to attract/earn inbound links from other qualified websites, is what matters most. Take a scrolling homepage or a single page site: these pages don’t have to cower to the fold, but should be respectful of its place. Users scroll. And they will continue to scroll if there is relevant and purposeful content – less clutter and more teasers.
Use the space above the fold to catch the user’s attention and to prompt scrolling. The goal is for visitors to read your website, not just scan the content above the fold. Include at least two of the Five Ws: Who and What. Who are you? What do you do? Use visual cues, such as imagery, whitespace and content bordering. Design sections that don’t evenly end at the bottom of the screen.
Naturally Smart has a scrolling homepage
Jacksonville Art Walk is a single page site
In addition to general page scrolling, two hot trends have emerged in web design right now: infinite scrolling and parallax scrolling.
Infinite scrolling is exactly what it sounds like…scrolling goes on and on and on and on and on. As the user scrolls down, content is automatically loaded. Users enjoy this type of design because it is a very efficient way to browse copious amounts of information without having to wait for a page to load. This design is not for every website, though. When determining whether this design is a good fit, you first need to identify the goal of the website. If it is to display a lot of user generated content, then infinite scrolling is a perfect fit. If the content is represented by images and the user isn’t searching for something in particular, great. Do not use infinite scrolling if the site is a platform where users expect to find specific results or to compare options. Infinite scrolling on those types of websites can lead to a user feeling hopelessly lost in a sea of information, without a sense of a definite end in sight; therefore, the user may never click on any information. And if the user does click on information, he/she will not be able to get back to the same in-page position with one click, which will only lead to more frustrations.
Parallax scrolling is where the background moves at a slower rate than the foreground, creating a depth illusion. It was originally created by the video game industry and was introduced in the web design realm in 2011. The user experience is visually stimulating and very enjoyable. This type of design is good for ecommerce and brand sites because it can display products and services in a way in which users can connect. Just make sure NOT to include it on your mobile-optimized site design; the two don’t mesh well.
Naturally Smart has a scrolling homepage
Analytics Partners utilizes parallax scrolling
Considerable concern exists regarding the SEO impact of content below the fold, infinite scrolling designs and parallax scrolling designs. The good news is that there doesn’t need to be!
Due to Google’s algorithm changes, content marketing is making a huge comeback – so long as it is unique, useful and relevant content. Google looks at over 250 signals when determining search result rankings and inbound links are huge. Content should be designed to attract, engage and convert. A user friendly page + relevant content = more inbound links = a higher search ranking.
Infinite scroll tips from Google’s Webmaster Central Blog says, “To make sure that search engines can crawl individual items linked from an infinite scroll page, make sure that you or your content management system produces a paginated series (component pages) to go along with your infinite scroll.” The blog also lists five other search-friendly recommendations for infinite scroll.
According to Carla Dawson, founder of xDawson, there are three main techniques to make parallax scrolling websites search-friendly. “Technique #1 – ‘One page’ web design with parallax scrolling using JQuery. Technique #2 – Multiple parallax scrolling website on SEO architecture. Technique #3 – Parallax scrolling on homepage and regular SEO architecture.” Parallax scrolling produces a dynamic experience that encourages users to stay on the page. The ‘cool’ factor of this design generates organic backlinks, which, as we learned above, is important. Capturing user attention also reduces the bounce rate, which impacts a site’s ranking.
Well, at Station Four, we believe you should sorta worry about the fold. We believe in designing a website with a positive user experience that will boost inbound links and search ranking. We know people will scroll as long as there’s something to scroll towards, so we aren’t afraid of scrolling pages. And, we even promote single page sites every now and again. Single page sites are perfect for new product launches and agile websites that will eventually be built out. This type of site is also great for storytelling. Our VP of Digital Strategy, Michael, has been quoted as saying, “The story unfolds – no pun intended – as the user scrolls.” So, if you want your users to curl up with your website, a single page site is definitely your answer.
Marketing Specialist at Station Four