The First Look – Above the Fold

Wed, Aug 26, 2009

Copywriting, Web Design / Usability

Your site doesn’t have much time to capture the interest of your audience. The average Internet surfer has a painfully short concentration span. The layout, graphics, and content of your website need to be thoughtfully and skillfully designed to stand a chance of holding onto a reader.

The term “above the fold” is derived from print journalism. It referred originally to the area on the front page above the “crease” of a physical newspaper. Newspapermen knew that it was important to feature only the most important stories or details on that part of the front page, to have a good chance of enticing people to buy a copy. On the web, “above the fold” refers to the area of a webpage which is viewable to a surfer without having to scroll down.

The page snapshot

Above the fold, a page’s content needs to be summarized briefly and engagingly. The design of the page’s header should offer clues as to what readers can expect from the rest of the page. Seeing as uninterested surfers are only burning our bandwidth, we need the page design to either entice them to read more or make them quickly realize that they shouldn’t waste any of their time on our site.

Every web designer begins with the highly challenging task of reaching a desired audience. Sometimes a not-obviously-related but completely arresting graphic or piece of text can work to attract the attention of readers, but that said, there are many designs that are considered universally to be engaging. It’s up to you as a designer to discover what these are and put that knowledge to work for you. A helpful exercise is to look at websites you know are successful and try to break down their designs in your head–what makes them successful? Why do people respond to this layout, this text? “Cracking the code” and implementing a variation of it in your own site can lead to ballooning readerships.

A short headline that tells the story

A webpage’s main text headline must be able to cover what the page will discuss, but in only a few words. Study newspaper headlines. They will often use only the words that are most relevant to the story’s content. A headline doesn’t have to be a full sentence; it only needs to show action. For example, “BUILDING CATCHES FIRE” is short, quick, and very active. At a glance, prospective readers will know whether this is the kind of stuff they’re going to be interested in. In the case of sales webpages, the text could be “BREAKTHROUGH PRODUCT ELIMINATES VARICOSE VEINS” Readers who want to get rid of unsightly varicose veins will normally read on, while those who don’t have such a problem will close the window and find another site.

No pointless graphics

Graphics make a big difference to user experience, especially those placed above the fold. Ideally, images should hold the reader’s attention and appeal to the target buyer’s personality. If it’s an artsy website, the design should reflect a creativity that is thematically appropriate to whatever is being promoted. If it is a real estate site, for example, something more conservative is in order. Remember, conservative does not automatically mean “boring”. “Conservative” designs can still be unique and attention-grabbing.

Putting forward your company image

You should think about what sort of image you want your company to have, and make sure it is established above the fold. For example, if you want to be seen as a playful but modern and innovative company, use colorful, friendly text and images. If you want to be seen as serious and professional, go for clean lines, minimalist but interesting design, and sharp, strong text.

Considering the web browser and resolution

What’s seen above the fold on one web browser may not be the same on another. The same is true for high- and low-quality resolutions. Because of this, you should make a point of testing the design on several types of browsers and resolutions. This way, the design will not be “cut” in unanticipated places. Your header design/layout should be small enough to be seen on any standard resolution and browser, but big enough to make people stop and look at it.

Time as a crucial factor

In our busy modern lives, time is crucial. If your target consumers are busy sorts, you may want to put almost all of the important information  on your site above the fold. Your prospective consumers will be grateful. They may even recommend your site to their similarly-busy colleagues. If your info is better expressed in longer paragraphs, you should at least use the space above the fold to “sell” prospects on how important the details are. For example, you might choose to put a startling fact or a cliffhanger above the fold. While your prospective consumer may be busy, he or she will find that they just have to read on.

“Above the fold” may seem a mysterious phrase when devoid of context. But in the world of website publishing, it’s important to understand how mastering above the fold marketing can boost your bottom line.

, , , , ,

16 Responses to “The First Look – Above the Fold”

  1. Jonas Says:

    I agree with no pointless graphics. Site should be designed in accordance to perspective market audience. No cluttered designs for example on medical websites. Funky web design for shirts that sell emo clothing line and so on.

    Reply

  2. Desiree Says:

    It will also help if sites be designed with graphics that are fast loading. So compress the images. Remember that surfers today lack patience to sites with much graphics on it.

    Reply

  3. 50 Cents Says:

    Putting forward your company image is very important. Site owners should project such specific image they want to achieve. No trashy sites for medical related sites for instance.

    Reply

  4. Josh Zehtabchi Says:

    This is a huge subject I’m currently battling with my current layout. The pointless graphics :/

    However, it’s a two way street, because some older viewers love graphics and a colorful taste, while other younger ones tend to be more focused on the web 2.0 standard for design.

    Tough spot to be in sometimes…
    .-= Josh Zehtabchi´s last blog ..About V2interactive: =-.

    Reply

    • Fergie Says:

      Point taken. It all boils down to your market audience, basically. Web 2.0 types are for professional clean looking so it’s best used today.

      Reply

  5. Sharon Says:

    Test with different browsers. Like there are some sites that don’t work on IE but work on Firefox. Watch those scripts.

    Reply

  6. fas Says:

    These are some very interesting points. I think you have kept all this in mind while designing this.
    .-= fas´s last blog ..Useful Tips To Make A Living Online =-.

    Reply

  7. Cynthia Says:

    Great post! I didn’t know what above the fold was, until just recently lol. Keep up the great work, you are doing a service to new bloggers like myself!
    .-= Cynthia´s last blog ..purple-kitchen =-.

    Reply

  8. Odor Says:

    Busy world as we are, it’s important for the fold to be concise about everything you put without compromising the site’s total navigation. Like for instance, you might consider putting the number to call on the homepage if you’re offering some services.

    Reply

  9. R.W. Jackson Says:

    Another point to consider is the small screens on netbooks. Recently I got an Acer Aspire one and I find that when I go to sites like John Chows where the ghost image comes up, I am stuck unless I create a fake email and click the form. It’s a bummer since I like reading his stuff but hate taking the extra two minutes to do it.

    All the best,

    R.W. Jackson
    .-= R.W. Jackson´s last blog ..How to make money blogging – Part 2 =-.

    Reply

  10. 3D Says:

    I agree to no pointless graphics. Designs must be not too conservative though. Remember, conservative is boring. So key is balance. Don’t be afraid to take some risk on your design.

    Reply

  11. Money-Era.com Says:

    Fantastic post with plenty great advices. My compliments.
    .-= Money-Era.com´s last blog ..Make money on Twitter. Sign up for Magpie =-.

    Reply

  12. Janice @ Mom on the Run Says:

    Great post! I strongly agree with everything you have written here and have tried to capture it in my latest site design. I just wish more bloggers would follow this advice… I hate going to a blog and the whole above-the-fold content is their blog header!

    Reply

Trackbacks/Pingbacks

  1. The First Look – Above the Fold | Adventory Blog - 13. Sep, 2009

    [...] Read this article: The First Look – Above the Fold | Adventory Blog [...]

Leave a Reply