Jun 15, 2012
My latest Beacon Blog! Be amazed!
For all of web design eternity, clients and designers alike have been concerned with what content on their site lies “above the fold” with the belief that sometimes users will not scroll and will only see the content within the browser window when the site loads. This may have been a valid concern at one time, but now more than ever we live in a society that has enough experience on the web to know that what a site has to offer them may not be within first glance. It’s our job to design a site that is interesting and appealing enough to make the user want to scroll. They know they can. What is more important to consider is, do they want to?
Just like the front page of a newspaper, the content found above the fold of your website should be organized, engaging, and give users an accurate taste of what else is waiting, below the fold. First impressions are important and if the user likes what they see or can clearly identify that this site will provide them the information they are looking for, they will continue to browse the site. If the top of your site is overwhelming, disorganized, or difficult to read because there is lack of whitespace or visual hierarchy, users may skip to another site.
Think about this, if you put all the good stuff above the fold of your site, what is left below? Boring content? Less than engaging graphics? Disclaimers and privacy policies? It is better to spread the content out and think about the page on a holistic level so that the content is useful and engaging the whole way down, with intros to the best bits at the top and clear navigational elements and limited spot graphics, ads, and call to action areas so that the information there can be easily sorted visually and understood instantly.
One thing that is still a valid concern is large image faders that take up so much real estate that users can’t see the beginning of the body content at first glance. I see a lot of blog templates designed this way because it makes for a very moving and dramatic design that can lead to more downloads of the theme, but ultimately may not be the best way to present your valuable content. Larger header and fader images are an inconvenience because it creates one step – the scroll – for users to find out if the site content contains what they want or need. Even if people do scroll, it’s still a delay in getting them what they came to the site for. The only exception would be sites that do not have body copy of significant value – like a portfolio or photography site – where the imagery is the most valuable content. In these cases massive sliders can be justified.
Two column layouts are very valuable for allowing more content to reside at the top of the page, but at the same time keeping it organized. Then people can clearly see how to content continues down the page and get a strong idea of what is further down below. Also with increased screen resolution and larger site width designers can now safely work in, you never want to have paragraphs of text running all the way across that page. The user will find it difficult to maintain what line they were reading since the lines are so long.
Finally some stats:
78% of users now have screen resolution that is greater than 768px high. That is really a LOT of “above the fold” real estate. Many people consider 600px to be the cut off but that just isn’t true, at least to 78% of your visitors.
13% of users are now using mobile devices. That just blows the concept of “above the fold” totally out of the water. Plus, those devices often have two fold lines, technically, since most of them have both horizontal and vertical browser orientation. And mobile device users have to scroll, a lot. This is part of the reason why we can accept that for most people scrolling is second nature.
To summarize – don’t ever sacrifice the design of your site to place more content above the fold! Instead disperse it throughout the page to successfully unite design and content. Keep the most useful and engaging items at top, and keep everything clearly organized so that users can easily assess how the site is laid out.
I like to treat a webpage like a painting and “work the canvas” from corner to corner, treating it like a piece of artwork.