Designing above the fold is perhaps one of the oldest guiding principles of design. Even before web developers hijacked the term, ‘above the fold’ used to refer to the upper half of the front page of the newspaper, i.e. where you would put your main headline, the name of the paper, tagline and eye-catching image.
Designing above the fold in newspaper terms was important because, generally, this is how newspapers are displayed by newsagents. There simply isn’t enough room to showcase every front page in its entirety on the newspaper shelves at the corner shop, so they are folded so that they may all be displayed.
Designers, therefore, have to make sure that what’s showing ‘above the fold’ is top quality eye-candy to attract those extra customers who may not be devotees to a specific publication.
Above The Fold In Web Design
When it comes to websites, the concept of ‘the fold’ is of equal importance, though rather than being where the web page actually ‘folds’ (because this is impossible unless you have a particularly bendy computer or phone (and I will resist making an iPhone 6 joke here)), the term has come to mean ‘the part of the page visible without scrolling.’
The term has survived in its original state simply because it fits the bill precisely. When users arrive at your website, they are not normally met with the whole of the web page, but just as much of it as the size of the screen will allow into view. Now, in this day and age, this can vary tremendously. From desktops to laptops to tablets to mobiles, users are now browsing the internet on all manner of devices, which indeed come in all manner of shapes and sizes. So, when it comes to designing above the fold these days, web designers certainly have a rather hard task in front of them.
As discussed in a previous blog, mobile-first web design is of utmost importance, now more than ever. Since the rolling out of Google’s latest search algorithm update, mobile-friendliness is now a specific ranking factor, and, although when talking in terms of ‘above the fold’ web design, the technical design elements that make a website ‘mobile-friendly’ don’t necessarily apply, it’s still worth bearing this in mind as we delve a little deeper into designing above the fold, for you will need to be thinking about how to apply the ideas when it comes to your mobile-first designs.
The Most Important Information Always Goes Above The Fold
When people arrive at your site, you immediately want them to know what you do, who you are, the message of your brand, and of course you want them to be enticed into action as well.
So, what should you put above the fold?
Well, not too much, actually. Above the fold is where your branding goes. It is where you give that enticing one liner that is designed to inspire your customers on an emotional level to buy into and trust you as a brand.
Lots of white space is permitted above the fold (or, if not white, then whatever the background colour of your website might be). White space gives the sense of a clean, well organised website. Your message will be loud and clear with this sort of design, as will your navigation, and, most importantly of all, your call to action.
Put simply, the last thing that you want to do is try to cram every last little bit of information you can above the fold, as this will just leave for a rather cluttered appearance to your website. It comes down to a question of usability – you need to try and group any information that’s appropriate to be placed above the fold together into chunks that are displayed for easy skim reading and scanning.
The Responsive Fold
As mentioned above, these days it’s imperative that you keep the mobile form at the forefront of your mind when designing your websites.
Of course, when thinking about responsive design, which essentially means that your content will be repositioned to fit a screen of any size, the fold will actually always be in a different place depending on the device and screen size that the user is accessing your site from.
You might think, then, that with the increase in mobile browsing, the concept of the fold is now outdated. It’s not. It just means that you have to think about the fold even more carefully now and allow for the inevitable variations on separate devices.
Making Users Take Action
The whole point of designing for above the fold is to make users take action. Whether that action be to ‘Enter’ your site, ‘Subscribe Now’ to your newsletter, or simply scroll down to see the rest of your page, the basic principle remains the same. Everything above the fold must be designed to drive the same action – and that counts for mobile devices just as much as it does for desktop ones. Inspire, entice, intrigue, all above the fold – and then unleash your stellar content below it.
What’s the most important element of web design that you think needs to live above the fold? Let us know in the comments below.
Leave a Reply