Web Design 2.0: Above the Fold is Old

For all you designers out there, the term "above the fold" is probably something you hear on a daily basis.

However, the days of staying above the fold is quickly becoming less essential.

Various studies have been conducted testing the validity of putting all the valuable information in your website above the fold. We are no longer looking for a site thats squeezed into 1200 x 800 mega pixel screen. Because we've become more inclined to value visual content as well as an improved user experience, it's becoming more and more common to see big brands featuring full width sites that encourage scrolling.

What is Above the Fold?

The term above the fold refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper. Obviously publishers wanted the most breaking, attractive news stories presented close to the heading of the newspaper, or "above the fold", as this is all consumers saw when passing by vendors.

Before scrolling became a norm, this same concept was applied to the layout of websites. When designers first began designing websites, they needed to be aware of the most common screen resolutions and how to keep content visible while staying above the fold.

In today's world, we are an Internet savvy generation. Where technology and the internet make up somewhere around 80% of our lives. We no longer have to worry about making sure everything fits in the window of your internet browser.

What Elements of Your Web Design Should Stay Above the Fold

Above the fold isn't totally gone, however, today it typically refers to various elements of your site. When designing your site, it's important to ensure that the following elements stay above the fold:

• Name

• Top Navigation

• Social Media Like / Share Buttons

• Feature

When you're designing any site, you want to make sure those elements are the first things your visitors see when going to your site. In the past two years more and more companies are starting to implement parallax scrolling into their web design or developing a one page website.

Benefits of a Parallax Scrolling Website

In its simplest terms, parallax scrolling is a technique used in computer graphics where background images are moving slower than images in the foreground. Creating the illusion of depth and immersion. A great explanation of parallax scrolling is from itsimple, "cover one of your eyes with your hand and focus on an object. Now, remove your hand and cover the other eye. View the object with the first eye. Since the viewing angles of your eyes are different, you will feel as though the object is changing its position".

Parallax scrolling or a one page website isn't just a new trend being used by inbound marketing and web design companies all over the world. These types of websites have a number of benefits to create a better user experience for visitors.

Storytelling

Who doesn't love telling a story with their brand? What if you could do that with the layout of your website? It's now easier than ever before with parallax scrolling or a one page website. You are able to control how your visitors view your company by strategically laying out your content and offers.

Consider adding these items to help tell your story:

• Create an awesome feature image. Look for an image that explains and shows visitors how to use your product.

• Add testimonials

• Include a video

• Explain the features of your product or service

• Implement call-to-actions

• Pricing

If you're a restaurant, consider adding this items:

• Menu

• Find a location

• Gift cards

• Social media

• Careers

• An element of fun

Make your visitors want to go deeper into your site.

Displaying Products

Need a better way to display your products? What better way than through parallax scrolling. Companies using parallax to display their products include:

• Nike

• Activate Sports Drink

• Samson Brewery

• Volkswagen Beetle

• Sony Tablet

Just click and start scrolling! Check out the amazing user experience those five companies created with their websites. Who wouldn't want to buy those products? Just because your company sells a product doesn't mean that you cannot engage with your visitors by displaying your products. According to Zabisco, 90% of information transmitted to the brain is visual, and visuals are processed 60,000 times faster in the brain than text.

Audience Engagement

Now this might be completely obvious, but a great benefit of parallax scrolling is audience engagement. Let your visitors take control of your site. By allowing them to scroll through your site, visitors are taking an active role in the engagement with your company.

Engagement is extremely important when it comes to ALL the sites fighting for your attention.

You want to keep them on your site, when you have a one page site, your visitors are continuously scrolling and engaging. Sabina Idler talks about how audience engagement is one of the most important elements of parallax scrolling, "The fact that we get instant feedback when interacting with your site makes us more alert and more willing to continue. We scroll and something happens. We scroll some more and something else happens. This promise is very motivating and makes people willing, even eager to enter your site and listen to your story.”

Looking for some inspiration to leave the above the fold theme behind? If so, here are some great examples of brands using this new and exciting web design concept.

8 Sites Going Below the Fold

1. Spotify

2. Wishlist

3. Big Commerce

4. Shopify

5. CSS Piffle

6. Smokey Bones

7. Shoplocket

8. ebay