Design, Strategy
11

“Above the Fold” – Make it Count

Posted by John Saddington on Jan 25, 2009

above_the_foldI’ve talked about this generally before about how first impressions really matter but a few questions have been shot my way about specifics, so I thought I’d drop a few nuggets.

The “Fold”

Whatever a visitor sees the moment they come to your site, without scrolling, is called “above the fold.” Naturally, the content and the particular design elements (and their presentation) will make the first impression stick.

It should be exciting, attractive, and most importantly it should encourage the reader to want to see more. Essentially, if you don’t create a “positive experience” above the fold, you’ve lost them.

Now clearly you can’t be 100% certain what each and every visitor will see because of the different screen resolutions and monitors that they visit your site with, so one needs to be even more strategic. Get tools to “simulate” different resolutions, like 640×480, 800×600, 1024×768, etc…

Some Thoughts

  • For a blog or a site, you could have your content start as high as possible. I like this a lot. Design elements, graphics, art, images can sometimes take away from the “meat” of your site or blog. I redesigned ChurchCrunch and Human3rror with this in mind (and a few others).
  • Visual impact is something that some may prefer, putting content second. A big image or branding might be more appropriate. This can work, but it’s got to work. Written content will obviously be pushed down, sometimes below the fold. Be careful and thoughtful!

Above the Fold Elements

  • Who – Blog title, site title, brand, who you are… duh.
  • Image – Header image or graphic logo works. Something to stand out. If not at the very top, make sure it’s above the fold somewhere obvious.
  • Navigation – Make sure it’s right there and obvious. If they have to search for it or scroll to find it… that’s not good.
  • Subscriptions – RSS Subscription should be obvious and apparent. I need to do a better job here here on ChurchCrunch. Working on it! Email subscriptions are still very cool too.
  • Title and Content – Should be above the fold, especially for a blog. Get them the content fast. Grab ‘em with that good provocative blog post title…!
  • Historical Stuff – Archives or recent posts should be seen. I’ve chosen “Popular Posts”. Lots of ways to skin this bird.
  • Category Options – Some people don’t use categories. I’m headed that way too, but, I for many, it still is very important.
  • Featured Content – If you’ve got a template that does this, great. If not… look for one!
  • Ads – Be strategic here and be safe.

Anything you’d add?

  • Buzz it!
  • Bookmark and Share

John Saddington

John is the Chief Editor @ The 8BIT Network and Senior Blog Junkie here at ChurchCrunch.He enjoys Triple-Tall Americanos, developing Wordpress Themes, and a few other Random Things.

Leave a Reply

11 Responses to ““Above the Fold” – Make it Count”

  1. Ancoti
    Sunday, January 25, 2009 at 9:31 pm

    I think it is great you recycled an old newspaper term. The new media borrowing from the old, the legacy lives!

    Reply
    • human3rror
      Thursday, January 29, 2009 at 5:59 am

      :) dude, nothing's new here…

      Reply
  2. Gabe Taviano
    Monday, January 26, 2009 at 12:48 am

    I agree that the RSS / email subscriptions aren't apparent enough, and applaud you for humbly sharing where progress needs to be made. Wouldn't mind seeing a ChurchCrunch "identity" either. Maybe just a typeface, but a logo might be beneficial in the branding efforts. Keep up the good work on the content – you're doing a fabulous job on that front!

    Reply
    • Cameron
      Monday, January 26, 2009 at 3:16 am

      Could it be that Church Crunch is being intentional about their lack of logo or fancy typeface and that IS in fact their identity…? I'm a fan of simplicity whenever and wherever possible.

      Reply
    • human3rror
      Thursday, January 29, 2009 at 5:58 am

      dude, this year…i need some logo action.

      Reply
  3. Kevin Cooper
    Monday, January 26, 2009 at 2:42 pm

    I'd be interested to hear your thoughts (or anyone's) and ideas on a purchase page flow. What do you think the standards are for "checkout" sites.

    Reply
  4. human3rror
    Thursday, January 29, 2009 at 5:55 am

    I have a “contest” going on for the design for a logo… but it seems to have fizzled out. this year i'm looking to really spend some time on branding. got any ideas?

    Reply
  5. Aaron
    Thursday, January 29, 2009 at 1:58 pm

    I've got a good question for you.

    Following up on a blog from a week or two ago on shortening your page load times… how do you setup WordPress to display a brief portion of each blog entry (a few paragraphs or whatever) so that the user has to click to read the entire story? Is this a plug-in or a hack?

    Reply
    • human3rror
      Thursday, January 29, 2009 at 3:12 pm

      It's the “more” tag. it's on your WYSIWYG editor.

      :)

      Reply
  6. Jacob
    Monday, February 16, 2009 at 4:22 pm

    The fold can be a dangerous thing in online media. Not only is there the resolution issue (where mobile and eventually TV screens weren't mentioned) but also the standard computer display resolutions are only valid if you have your browser maximized.

    Anyone here browse maximized?

    I completely agree with having your most important content higher on the page, but if people start asking you to draw the "fold" on your web page design comps you've gone too far.

    Reply
    • human3rror
      Monday, February 16, 2009 at 5:06 pm

      good point jacob. it can be a double-edged sword in some instances. case by case basis..!

      Reply