Above the fold design is a common theme among website designers. It has, with little mention, become the standard way designers create great sites. But why has it become so popular, and how can you use it to keep visitors on your site?
What is “above the fold” design?
In short, above the fold means placing the most important elements at the top of a web page so it receives the most visibility.
But where, you ask, is “the fold”? The phrase harkens back to the days when we all read daily newspapers. Papers are divided into two styles, tabloids like the New York Daily News and the Daily Mirror, and broadsheets like the New York Times and The Times of London. While tabloids can be read more easily, broadsheets have traditionally been larger, held more information (and fewer photos) and folded in half when transported. As a result, their designers placed the most important information on the top, where it would be seen more easily.
This has carried over to website design. Originally info on a site went a long way down the page, and many scrolls were necessary, but more recent developments have made concise design more prevalent. No longer do you have to scroll eight times to see important info on a page (well, not on modern sites, anyway). Current sites have all their major info on the header and in the first screen on desktop and first couple of screens on mobile.
Why is this style used on websites?
There are two main reasons.
1. User experience is the most important factor. If you saw any of the early websites, many of them were fun to look at (well, maybe once), but they were full of “I can, so I will” design. As a result, we had MUSIC and FLYING and MOVING THINGS and BLUE FONT ON BLACK BACKGROUND and other neat but impractical things. Try to get important info off a site like that, and you’d drive yourself crazy.
Twenty years on, we’ve gotten rid of the fun fancy elements and now clean and simple design is the norm. We want the info we seek to be easy to find, with little effort on our part. We want our information served to us; we don’t want to work to find it. It doesn’t matter if we go to Amazon or our local dry cleaner; we want site to show us view who they are, what they do, where they do it, and how we may reach them so they can do it for us! Just think about the last time you had to search for a local business; did you have much trouble? Or was it easy to find what was needed? If it was easy, you might bookmark it and use them again. If it was difficult, that probably didn’t give you the warm fuzzies, so you won’t use that business again.
2. Mobile devices are the other big factor. When you search on your phone or other device, you usually have a smaller screen with a small keyboard. It is therefore much harder to search a site that has too much text, or the most important info is hidden. Again, remember searching that dry cleaner’s site? Could you find their phone number very easily? Or their address? Or what services they provide? If so, you probably found that within the first couple of screens, and not eight scrolls down the page.
Mobile sites also mean that websites need to have “responsive design,” which means their designs change size and shape based on the device on which they appear. If you looked at that dry cleaner site and had to zoom out to read their text, that was NOT a responsive design, and many folks will not view much of the site.
** Note: here’s another issue that many folks don’t think about. I often recommend having your header (which appears on every page) organized by having your logo on the left and your contact info on the right. This has become the standard, but that’s not necessarily why I recommend it. I do it because many responsive themes automatically create mobile headers by dividing headers this way. They put the logo and the site name on the top, then move the text on the right below it. So if your desktop isn’t organized correctly, your design will look odd on your mobile version.
How can I use above the fold design to help my website?
Make your site easy for your visitors. Place your logo at the top left. Have your contact info on the top right. Make your phone number and email clickable, so by clicking on your phone number or your domain email, visitors are presented with their phone dialer (on mobile) or their email app. Also, make sure your location (or the area/s you serve) are upfront and obvious. Prioritize the rest of your content, with the most important at the top of each page, and less important info at the bottom.
And have alt text for every image on your site; this not only benefits visually-impaired visitors, but it helps your site come up slowly, and Google loves alt text!
Generally try to organize your site the way the larger sites do. Have as much important info at the top. Have it available also on the side, or on the bottom. Make everything easy to find, and simple to navigate. You will find visitors lingering longer, and more of them contacting you.
Bottom line:
The best way to retain visitors to your site is to present them with the information they need. Do this by presenting this info at the top of your site (above the proverbial fold), in the header and in the first screen or two. If your visitor needs to scroll or click to find your phone number, they often won’t. Make your information easy to find and simple to use (clickable where possible). They’ll love you for it!
** If you need help with your making any changes to your website, or for any other services, please contact me at Amy@petsitterseo.com or call me at 732 820-0103.
