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.
