TutsArena

Designing Your Website For The Fold

by TutsArena - Articles, Development

If you’ve been around the design community long enough, you’ve probably heard someone talking about “the fold” before. What do these words mean and how do we design a website that will take the fold into consideration? Have no fear, we’ll explain everything!

Conquering the Fold

“The Fold” sounds pretty scary and it might not make much sense unless you’re told what it is. Basically, the fold is everything on a users’ screen once the page loads, without scrolling. The reason this is important is because typically a user will enter your website and choose within seconds whether they want to stay or not. In order to conquer this problem without seeming too cluttered is to have good, relevant content above the fold. An easy way to think of your website is like a newspaper. There is a physical fold in a newspaper that divides the front page. News that is likely to sell is put above the fold so readers will be more inclined to flip the newspaper over and even open it up. Also, important headlines are always in a large typeface to attract attention.

Before you finalize a design, pretend you are a user and take a different look at your website. Is content placed above the fold? Is there plenty of extra relevant content above the fold (popular posts, related posts, thumbnails, etc..)? Is your RSS feed highly visible above the fold? Is your navigation easy to find and use? All of these are extremely important to keep your bounce rate down and to keep your users surfing happy.

Some people would argue that a “fold” in web design simply doesn’t exist because screen resolutions and browsers differ. Toolbars that take up precious screen real estate are also a factor that further reduces the frame of a website. Which ever way you look at it, it makes sense to have good content toward the top of your website and the less relevant, more unpopular content toward the bottom. This doesn’t mean to crowd the top of your website with ALL of your good content, but simply move things you think will be an easy sell to the top and things you aren’t so sure about toward the bottom. Don’t forget about the footer either, it’s an important part of the website too. The footer should give easy access to the rest of the website, almost like a smaller header.

Things To Keep In Mind

• Keep important, engaging content high on the page.
• Use design elements to let the reader know additional content is below the fold.
• Keep navigations toward the top of the page, always above the fold.
• Don’t let “the fold” hold you back.  Use it as a guide, don’t let it restrict your designs.
• Give them a reason to scroll.  Good content will get users to scroll down.