Blog Design: What Should Be Above the Fold?

When designing any type of website, you need to keep in mind what visitors will see immediately upon arriving at the site. Whatever is visible without scrolling down is said to be “above the fold.” The content and design elements that are above the fold will of course draw the first attention from visitors, and hopefully they will be encouraged to check out the entire page’s contents and navigate through the site. For this reason, pay layout and design should be done in a way that creates a positive first experience by making an impact above the fold.

Different designers have varying opinions on what has the most impact above the fold, so there isn’t a clear cut right or wrong way to design. And the truth is, you never can be 100% sure what each visitor will see above the fold due to different screen resolutions, among other factors (although doing some research on your visitors with a tool like Google Analytics will give you a good idea of how your visitors are segmented in this way).

Why is the fold important?

1. As I mentioned above, it determines what new visitors will see the moment they arrive at your blog. First impressions are very powerful and they usually influence whether a visitor will come back or not.

2. The content shown above the fold can engage the visitor enough to scroll down or move to other pages throughout the site. There are different theories about what is most effective for this purpose. Some

3. It helps the visitor to know where they are on the blog. Almost every blog uses a template/theme that looks basically identical on every page/post. If each page has a very large header area it requires readers to scroll down just to see what page they are on. As they move through the site they’ll have to scroll down immediately with each new page they visit. Because the top of each page looks the same in this case, it’s hard for visitors to gauge what page they are on without scrolling. On the other hand, visitors can easily tell where they are if the content (including blog post titles) starts high on the page.

Two different approaches

As with any element of design, there are differing opinions on how to have the most impact above the fold. With blog design there are primarily two different approaches, and we’ll look briefly at each.

1. Blog content starts as high as possible


In blog design, content is king and should be the focal point of the design. Design elements that take focus away from the content are probably more of a hindrance than a help. For this reason it’s common to see blog content starting high on the page in attempt to maximize the number of visitors that actually read the blog posts.

Upon entering a blog that is designed this way, the visitor can quickly see the beginning of the content, including a post title and maybe a paragraph or two. The goal of this approach is to get the visitor reading by prioritizing the written content. If the visitor can be engaged quickly there will ideally be a lower bounce rate and more people will continue to read below the fold as well.

2. Larger headers are used to make a stronger visual impact

First impressions are always influenced in one way or another by the appearance of the blog. By dedicating more screen space above the fold you will have a greater opportunity to display an attractive design. This approach is used to improve the look and branding of a blog, but will cause written content to move lower, and in some cases completely below the fold.

My opinion

Large header images are used by some very prominent blogs; however, I prefer the content to start higher on the page. When I’m visiting a blog, regardless of whether it is my first visit or if I visit every week, I don’t like to have to scroll down to see the beginning of the content. Although dedicating less space to header images means it will be more difficult to create a strong visual impact, I think the emphasis on content has a more positive impact.

I feel that this approach to blog design makes reading the blog easier and encourages navigation throughout the blog. Another advantage to consider involves social media marketing. Those of use who attempt to draw traffic through social media know how fickle these visitors can be, and starting content as high as possible makes it easier for them. Of course social media visitors are known for being impatient, and they will frequently have no desire to scroll down just to see what your page is about. For this reason, starting content higher can increase your chances of success with social media.

What should you include above the fold?

Deciding what to include in the screen space above the fold is never an easy decision. This is prime real estate, so it should be considering thoroughly. Spacing can be another issue once you have decided which items are most important to display above the fold. You don’t want to cram everything in to small areas just to keep things high on the page.

Here is a list (in no particular order of importance) of some blog elements that you may want to consider placing above the fold. Of course, you will not be able to include them all, so you’ll need to prioritize.

1. Blog title – Obviously important. Not much needs to be said here.

2. Header graphic/image – Most blogs have some type of head image. It can range from a small logo to a large image that takes up a good bit of screen space. Once you’ve decided which design approach to use, you’ll have a better idea of how much space you are willing to dedicate to a header image.

3. Primary navigation – Most blogs will have links to a few primary pages, and in most cases this will be above the fold. Of course, navigation to these pages will be easy for visitors if the links are placed prominently above the fold.

4. RSS and email subscription options – Almost all of the leading blogs place links or email subscription forms above the fold. Will many visitors subscribe immediately without scrolling down or visiting other page? Not likely. But giving you subscription options a prominent place in the design will always help to make it more visible and easy to find, plus it will remind visitors when they arrive that subscribing is an option.

5. Subscriber count – Most blogs also display subscriber counts right by subscription links. If you have a large group of subscribers this can be effective to immediately show new visitors that you have some credibility.

6. Blog post title and the start of post content – I feel that it’s a good idea to let visitors start reading above the fold.

7. Recent entries – Some blogs will feature links to recent entries very high on the sidebar, which will hopefully improve page views and increase ease of navigation for visitors.

8. Category links – Displaying links to category pages provides the same benefits as showing recent entries, plus it can quickly give new visitors a good idea of what topics you cover on the blog.

9. Featured content – Many blogs include links to popular posts or some other type of featured content (could be WordPress themes, ebook downloads, etc.) so visitors can see them at their best.

10. Advertisements – If you sell advertising space, it may be more effective if the ads are displayed above the fold. And if you’re using affiliate ads you may increase the money you make.

Some examples of good design above the fold:

ProBlogger

The design of ProBlogger does a good job of featuring a lot of content without over-complicating things. The homepage of the website is different than the homepage of the blog. The screenshot below shows the blog front page. Navigation and branding at the top takes up very little space, which leaves plenty of room below for the start of the most recent post. The sidebar features subscription options and a few ads above the fold.

ProBlogger Screen Shot

Devlounge

The screen shot below shows a post at Devlounge rather than the blog front page. Again, navigation and branding are accomplished in a small amount of screen space. The content of the post then starts very high on the page. On the sidebar there is a spot for an author bio (it is a multi-author blog), a link for RSS subscribers (no email) and the start of an advertising section.

Devlounge screen shot

BlogStorm

BlogStorm takes a bit of a unique approach to its front page. Like the first two examples, navigation and branding are kept very high on the page allowing plenty of space for other content. An excerpt of the most recent post is shown prominently, and below that there is a tabbed feature that shows excerpts to posts according to category. So if you see a category you are interested in, just click the tab and you’ll quickly see excerpts of two posts. The sidebar uses similar tabs to give options for latest posts, popular posts, sections, and tools. Below that, banner ads start. The tab idea is a unique way to feature more above the fold.

BlogStorm screen shot

What’s your opinion?

What design approach do you prefer? Are there certain elements that you like to see above the fold?

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

36 Responses

Comments are now closed on this post.

  • sir jorge, January 13, 2008

    I work for an e-commerce site and the above the fold thing comes into question on a daily basis.

  • Vandelay Design, January 13, 2008

    sir jorge,
    Thanks for your feedback. I’m sure for e-commerce this is even more important than for the typical blog.

  • Darren Hoyt, January 13, 2008

    Blasting the Myth of the Fold: “There is an astonishing amount of disbelief that the users of web pages have learned to scroll and that they do so regularly. Holding on to this disbelief – this myth that users won’t scroll to see anything below the fold – is doing everyone a great disservice, most of all our users…”

  • Wayne Liew, January 14, 2008

    Great guide on what should a blog has above the fold. Well, I am a content lover, I won’t be impressed by sites with huge header images (the worst thing that will happen to such blogs is when their image for the header loads slowly and everything will not load until the header finishes its loading).

    I don’t think sites with great designs help these days as readers are hungrier than ever for information and I find most of the time, if you are not in the designing niche or finding a design for your personal journal blog, you will not need any bombastic designs. A professional design that are unique with a header or logo that tells what the site is all about (dog banners for a dog site) should be able to leave an impression for readers.

  • Matthew Griffin, January 14, 2008

    Great article, Steven. I enjoyed the variety of perspectives you introduced—very well-balanced.

  • apple pie recipe, January 14, 2008

    Its been a long morning.. Thanks for giving me something interesting to read.

  • PXLated, January 14, 2008

    Thanks to Darren for the link…I was the design director on one of the top/large retailer sites and we found visitors didn’t mind scrolling. In fact we were better off putting all relevant information on one long page rather than paginating as long as there wasn’t a perceived barrier where the visitor might think there isn’t content to scroll to. So, I guess I would have to agree that the fold is a myth.

  • Not John Chow, January 14, 2008

    When I started my blog, I took screen shots of twenty high profile blogs and printed out hard copies of the area “above the fold”. A comparison of the different styles and themes gave me some direction to what others thought were important. In the end of course, I had to decide for myself what was truly important to me.

    This post takes the work out of what I did when I started and it is a good start for a new blogger or for someone considering revamping their blog.

  • seine, January 14, 2008

    I TOTALLY agree about placing content higher. The blogs that i visit with huge “attractive” headers are a completely distraction. I don’t want to see ads first. I want to see their content. Ugh

  • Vandelay Design, January 14, 2008

    Darren and PXLated,
    While I agree that most readers/visitors will scroll, the area of the screen that is above the fold give the 1st impression, and therefore, in my opinion, should be given some priority. There are a few blogs that have content so far down that every time I navigate from one page to another I have to immediately scroll down past a large header image and some ads. Do I scroll down, yes. But as a visitor I find it to be annoying and that’s what I would like to avoid for my visitors.

    Wayne,
    I agree that most blog readers, like you and me, are more interested in content than design.

  • PXLated, January 14, 2008

    Vandly…I don’t think we’re arguing about “above the fold”, Important things and link should be (or at least hints) should be there.

  • Vandelay Design, January 14, 2008

    PXLated,
    I didn’t mean to imply that anyone was arguing, I simply wanted to state my opinions (and that’s all they are is opinions) on the matter. I appreciate all constructive feedback that adds value to the information.

  • Darren Hoyt, January 14, 2008

    the area of the screen that is above the fold give the 1st impression, and therefore, in my opinion, should be given some priority.

    No argument there. All sites should be designed with hierarchy in mind, which means keeping logo, nav and important statement-of-purpose verbiage well above the fold. Blogs should have all of that, plus some of the post and metadata info you mentioned. But like everything in web design, the rules are fluid, and Tarquini’s article proves how many ways there are to address the fold concept without straitjacketing yourself as a designer.

    Great post either way!

  • Vandelay Design, January 14, 2008

    Agreed Darren. The article was definitely interesting. Thanks for the added resource.

  • Ruchir, January 15, 2008

    I really hate it when people hit the content to much below the fold. In my opinion, the best way is to display at least a paragraph or two above the fold. And don’t include too much information in the header, it just makes your blog look too busy. Subscription links, links to important pages and maybe a list of popular posts is all you need in a header…

  • Karen Zara, January 16, 2008

    I don’t care much for headers. I’ve read on several blogs that without a good header your site would be nothing. As a visitor I couldn’t disagree more. Content comes in the very first place. Primary navigation elements (I’d include Categories among those) should also be easy to spot.

    If someone wants me to click on ads, it would be a good idea to make me see them as fast as possible. But ads placed right below the content are not bad at all, especially when they compliment what I’ve just read.

    I’m not easily impressed by subscriber counts. I like seeing them just because I’m a curious visitor. However, content still comes first. If 20,000 people are subscribed to a blog that looks useless to me, I simply won’t join them. So the position where the subscriber count is placed doesn’t make difference for me.

  • Jermayn Parker, January 20, 2008

    Good points, I think while I agree with most of your points of what should be included above the fold, I think what can be done is to merge some elements together, it can be hard not to get them too squishy but by merging say a header and navigation together, you can save say: 50 or so pixels in height.

    Good example is a website Ive just finished:
    http://www.jubileeworldharvest.com.au

  • Alex Liu, January 21, 2008

    This is really very useful tips for my blog since I’ve been thinking what to put above the fold to stop visitors and let them read.

    johnchow.com is doing very well above the fold too.

    Alex Liu
    The secret to success is Contribute!
    http://secretsofunlimitedwealth.com

  • Caroline Middlebrook, January 22, 2008

    I’ve recently changed my blog theme and my new theme includes a large section beneath the header and before the content – this was deliberate. This section allows me to highlight my best work and showcase my new ebook or anything else I really want to promote.

    I believe that if traffic is coming from social media it can be beneficial to keep the content a little lower because otherwise what happens is that they read the article and then they are gone. By highlighting the rest of your content first you are giving them more reason to explore the site, stick around a bit and perhaps subscribe.

  • Vandelay Design, January 22, 2008

    Caroline,
    I’m glad you mentioned that, it’s a good point. There are obviously benefits to that. I guess in my opinion that is somewhere between the 2 extremes that I looked at in this article. I’d be curious to see how the design effects the number of page views of your featured content.

  • Seo Design Solutions, January 28, 2008

    Great Post Vandelay:

    I just wrote something related to that, but in regard to ranking above the fold in search engines. Wish I would have known earlier, I would have linked to you.

  • kim, January 30, 2008

    What a great post. I always stress this when I am designing corporate blogs or blogs for writers. But, for illustration and art blogs, I disagree. The header should speak for itself since artists are horrible at writing SEO-friendly web content and adhering to usability standards. :)

  • Vandelay Design, January 30, 2008

    Hi Kim,
    Yes, I agree that it is a different situation for different types of blogs. Thanks for the feedback.

  • mmorpg, September 27, 2008

    […] Blog Design: What Should Be Above the Fold? from VandelayDesign […]

  • skins for bebo, October 19, 2008

    jus changed my site a little due to this advice thanks.

  • Kit Homes, November 9, 2008

    This is a great point.Alot of people forget to take in above the fold.We work on a lot of eccomerce sites and we are always looking at what is above the fold

    Great info as usual

    Thanks

  • Goldendoodles, November 18, 2009

    Hey thanks for that article. I have been working on SEO for my site and working on optimizing it. Great read.

  • Toronto Web Developer, June 10, 2011

    Really great, I too work with SE0 a ton and found this article to be really helpful.