To Fold or Not to Fold? Breaking One of the Most Popular Web Design Myths

Aug 23, 2010 · by Tim Kamanin

Planning a website is not an easy task, indeed. At the first stage, you have a pen and a paper and everything goes pretty smooth. Then you sit down before a computer, open your designing/prototyping software (Photoshop, Fireworks, Balsamiq Mockups, MS Word...) and start implementing your layout in a real internet world dimensions. And then 'BAM' ... you understand, that a lot of important elements aren 't above the fold and there is no free space above the fold and if you will put everything above the fold what's about principles of 'White space is the King" and "Make your design clear"? What to do? Of course you 're concerned, because you heard a lot about the critical FOLD space and even your client's marketer knows this word and he is insisting that their ad block and company mission and navigation and featured content section and quick links and search box and and and bla bla bla to be placed above the fold.

Fold...yeah...a nightmare... how many websites are so heavy on top and so 'naked' at bottom? Lots! Just look around. This is because the Fold became one of the most popular disbeliefs for web designers and marketers nowadays. The roots of this term are from newspapers industry , where, due to physical dimensions, newspapers are usually folded in the middle and hot stories are placed above this fold for the purpose to be noticed by readers and, of course, to be bought. Just a simple marketing.

The biggest disbelief that supports the Fold's existence in web design sounds like " Users don't scroll". However, Jakob Nielsen, worldwide respected usability guru, wrote about the growing acceptance and understanding of scrolling in 1997. And in 1997 there were not so many mice with a scrolling wheel! Yet 13 years later we still hear about "People don't like to scroll". But they do! Thanks to blogs, thanks for Facebook 's long walls, thanks to gossip websites with a looong pages full of pics of drunken stars people got used to scroll. Just notice how often you do scroll. But of course, to make them scroll you need to engage them! Two big secrets to make users scroll are: use compelling content and visual cues (such as cut-off images and text).

Where is the fold on a website?

Every screen has its dimensions depending on user's monitor size: 800x600, 1024x768, 1600x1200 and so on. If you're building a design for already existing website, look at Google Analytics stats about most popular screen resolutions and determine your most targeted resolution. However, without looking at stats, I'd say that today it is worth to target for a 1024x768. So we have 768px at height, so this is the Fold, yes? No! Don't forget about vertical space consumed by taskbar and browser's panels. Just take your onscreen ruler and measure! In the end we'll come up with 620px - 640px space. So this is our Fold.

What should be 100% placed above the Fold?

Here are few tips or maybe even check list of what should be 100% placed above the fold:

  1. Information about the purpose of the site. If your website sells cinema tickets then, of course, info about this should be visible above the fold.
  2. Navigation. If you have vertical navigation it should begin above the fold and can freely go down deeper beyond the fold. If the navigation is logical user will follow it deeper to see what's more.
  3. Critical business features. For example, for cinema tickets selling website it is vital to put order form above the fold, same for hotel booking website, flight booking and so on. So don't forget to put things which your business strongly depends on above the fold.
  4. Action buttons. If we're talking about e-commerce website, all action buttons such as buy, add to cart should be placed above the fold. This is the rule of thumb for any successful e-commerce website.

I was reading, reading and just didn't get what to do?

  1. Don't worry too much about the fold. Take a deep breathe.
  2. Put 100% critical for your business elements above the fold, of course, don't forget to tell users what's your site is about
  3. Determine the fold size which is most common to your site visitors.
  4. Use method of cutting-off images/text + compelling content to make your users scroll.
  5. Place at the footer of your page "back to the top" button, just to make it easier for users to get back on top.
  6. Use the footer. This is the most important tip, if you have a rich content website with a lot things to offer don 't end up with the boring a-la 'Copyright' footer...Offer great content in the footer, make it engaging, reward users for going beyond the fold. If this feature will be offered constantly your frequent users will appreciate this. Showing a user what to do next is a great strategy to keep them on your website longer - > and that is what you want in the end, right?

Want to get more 🔥 tips like this one?

Subscribe to get notified about new dev tutorials