Why Above-the-Fold Matters for Blogs

16 Must-Have Elements to Put At Top of Your Blog

Old media meets new media Location matters for blogs the way it matters for real estate. Your blog’s most valuable real estate is the space above-the-fold, a term borrowed from traditional print newspapers describing the top half of a broadsheet. Above-the-fold is the top section of your blog. It’s important to consider what should go there when designing your blog. Unlike a newspaper, this space varies based on device and other factors. Therefore, maximize the space’s ability to lure readers in to click-through.

Here are sixteen above-the-fold blog elements.

  • Must-have elements

    1. Branding. Include typeface, visual elements like color and content. The goal is to identify your blog.
    2. Navigation. This can be horizontal (across) or vertical(down). Give readers an idea of what’s available on your blog or other aspects of your offering. This is particularly useful if your blog is integrated with your company website.
    3. On-site search. This can be incorporated into your navigation. This is a critical element to help readers quickly find the information they want. Make sure that it stands out and is easily identified. You don’t want readers to leave your blog for a search engine to find other information since they may not return.
    4. Contact information. How can readers and visitors contact you? Offer them a variety of options including your phone number, email address and social media links.
    5. Call-to-Action (CTA). The action you ask readers to take. Besides reading your posts, invite your visitors to participate in some activity that furthers your relationship. There’s a broad variety of options such as: subscribing to your RSS feed, registering for an email newsletter or connecting with you on social media.
    6. Social media connections. Which options are you using and how big are the buttons/text? Do you have a related call-to-action? Visitors are more likely to like you if you ask them to.
    7. Sidebar content. Use the top-most widgets to draw readers in with options like recent posts, most popular posts and tag clouds. Given the limited room above the fold, these widgets may not be as effective in this context.
  • Blog content

    This is important because at least the first post appears above the fold.

    1. Title. How catchy is your title? Does it make sense to readers? To search-bots? This is one area where newspaper context doesn’t always translate well.
    2. Strong content. This is the cheese that attracts readers and hooks them into reading further. While it’s on every blogging how-to list, it’s the core of why people read blogs! (Having trouble with Blank-Post-Syndrome? Don’t sweat it, here’s there’s 125 free blog topics to help.) This can be the most recent post or a sticky post that remains at the top.
    3. Photographs. Do you use a photograph to draw readers in? How large is it? Would a smaller thumbnail be as useful?
    4. Tweets and Likes. Do you have buttons on each post? Do they get readers to share your content? The wisdom of crowds rules. People will read your most popular posts and this is one way they check.
    5. Keywords. Do you emphasize important words and phrases in your content? Are these the same keywords your readers use to search for your information?
    6. In-content links. Do you link to appropriate content in your post to draw readers into your blog?
    7. Categories. Like tags, do your categories make sense to your readers?
    8. Tags. Are your tags useful to readers? Do they compliment your keyword?
    9. By-line. Does the post byline link to other columns to broaden readers’ ability to find more of the author’s quickly?

Design-related above-the-fold factors

How much page real estate exists above-the-fold varies based on your blog’s design and on the browser settings controlled by each user.

  • Blog design factors:

    1. Type size including typeface. The size of your text can have a big impact on how much content appears above-the-fold. Consider your audience and their ability to see and read the type size and type face.
    2. Line spacing. How far apart are the lines in your content? Take into consideration headlines and bulleting.
    3. Page width and margins. A wider page means more content above-the-fold but if the page is wider than the visitor’s browser, he’ll have to use the horizontal scroll bar, which can be annoying. Your blog can be designed either with a fluid width so that the content area is as wide as the browser’s window, or it can have a fixed width with adjustable margins
  • User controlled factors:

    1. Screen size or device. Don’t assume readers are using the same device (such as computer, netbook, iPad, or smartphone) as you, especially with the growth in smartphone usage. Nor are they using a large 27” screen like your web designer with your blog reduced to fit on less than one screen.
    2. Screen resolution. This element is a bit wonky. It’s the number of pixels per screen inch. On desktop PCs, the user sets this using the display monitor’s control panel.
    3. Font size. The user has the ability to set the browser’s default font size for text that is otherwise un-styled in your design.
    4. Brower toolbars. Screen space is reduced based on the number of toolbars the user has open. From a blog perspective, this translates to less real estate.

To illustrate how variable the location of the “fold” can be, here are screenshots of this blog’s front page on three different devices.

20" Desktop monitor

Droid Smartphone

Android smartphone

iPad in landscape mode

iPad in portrait mode



Whether you’re building your blog from scratch or tinkering with an existing one, it’s important to maximize your above-the-fold real estate. The goal is to lure readers in and keep them engaged in your blog. It’s all about location, location, location.

How have you organized your above-the-fold space on your blog? Are there any other elements that should be included? If so, what are they and why are they important?

Happy marketing,
Heidi Cohen


P.S. Please help us celebrate #BloggerLove Month through the month of February by joining our #BloggerLove Contest.

Hat tip to my webmaster, Larry Aronson, for help with the screenshots.

Related reading on blogs:

Photo credit: Irinia Slutsky via Flickr

Tags , , . Bookmark the permalink.
  • Jason Shoraka

    Wow good info

  • Storewars News

    Nice read! Very informative. Did you also know that Morrisons seeks
    middle ground to differentiate from discounters? http://bit.ly/1gv0V0l.

    If you want the latest news about FMCG, just check our twitter, Twitter.com/StorewarsNews.