Want to Write for Us?Read This | LoginBecome a Member

“Above the Fold” – Make it Count

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?

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

  1. January 25, 2009 at #

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

  2. January 26, 2009 at #

    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!

    • January 26, 2009 at #

      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.

    • January 29, 2009 at #

      dude, this year…i need some logo action.

  3. January 26, 2009 at #

    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.

  4. January 29, 2009 at #

    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?

  5. January 29, 2009 at #

    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?

    • January 29, 2009 at #

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

      :)

  6. Jacob
    February 16, 2009 at #

    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.

    • February 16, 2009 at #

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

Leave a Reply

Gravatar Image