WEB DESIGN -- Important Info "Above the Fold"
Yes, a good webpage design places the most important info "Above the Fold"!
A Lesson from Newspaper Layout
Next time you are at the magazine stand, take a look at the newspapers. You will notice that the full-size newspapers are folded in two and are displayed with the top half of the front page showing the most important headlines and sub-headings. As you pick up a paper and open it up, you will see that the important stuff is always at the top. The big headlines, the attention-grabbing pictures, the newspaper’s title – are all “above the fold” to use the newspaper industry jargon. We can learn from this model and apply it to our websites. What the newspaper industry calls the "front page" becomes the "main" or "home" page of a website, and what is called "above the fold" becomes the upper portion of a webpage, the part that appears on the computer screen or device display when the webpage first loads.
Your Main (Home) Page
When a site visitor brings up your main (home) page on their screen, what do they see? Before they scroll or resize the browser window, is there anything interesting that would make them want to investigate more of the website? Remember, in this age of smartphones and tablets, it is quite likely that your site visitors don’t have a display as big as the one you have, or a resolution set as high as yours – so they may see even less information on their display than what you see on your computer's screen.
If your website is for a local church, you will typically see the following items "above the fold":
-- A banner (nameplate) with the logo /church name / slogan at the top of the screen.
-- A picture of the church, or maybe a mug shot of the pastor.
-- Part of your navigation system.
-- Some of the text in the body area of the webpage.
Viewing With A Smaller Browser Window
Bring up your website in a browser window that is not maximized to fill the screen. Is there anything displayed there that will hold a visitor's attention for more than two seconds? Did all of the stuff on the main page take too long to download? Can you see any interesting text "above the fold"? What percentage of the page is "above the fold"? Half the page? Or a small fraction of the page? Last question, Do you have to scroll right-and-left as well as up-and-down in order to see the entire page? That’s bad – up and down is OK, but additional right-and-left scrolling should be avoided unless the webpage is viewed at a resolution of less than 1024 pixels width.
Some of us can have an enlightening experience in viewing our website on a small screen. We just realized that the first impression of our website is not a very good one! Let’s take the four parts of the typical webpage that most of us see, and deal with each of these parts in more detail.
It’s good to have a nameplate banner at the top of the webpage that identifies the website and makes it easy for visitors to know which site they are visiting. This is equivalent to the identification banner at the top of a newspaper, which could read something like "The New York Times", or "The Guardian", or whatever. The nameplate banner can also include a logo and a slogan. If your website is for a local church, the slogan could be something like, "Where Jesus is Exalted and the Word Comes to Life".
We often make mistakes with the banner. Many times it’s WAY too big, often taking half (or more) of the space that is "above the fold". This means that important attention-getting information is pushed down "below the fold". In other words important information is not visible on the screen when the home page loads, and it can only be seen by scrolling down the page. Hopefully your site visitor will be motivated to scroll down to see it -- but they may not be, and with the click of a mouse they are gone! Perhaps forever!
Some church websites have a nameplate banner on them that has on it only the domain name of the site, for example "MyChurchName.org". While it can be very useful to have the site's domain name displayed somewhere on the banner, to have on the banner only the domain name is a classic waste of space. Your site visitor knows that the website is "MyChurchName.org" – it’s displayed right there in the address bar. So more importantly, please place on the banner your full church name, including denomination affiliation if it’s not part of the church name, and also show the city and state/province if it is not part of your church name. Remember that many visitors to your site will be from outside of your area, and you need to let them know exactly which church website they are visiting. However be aware that banners are typically a graphical image, and so any text on them cannot be "read" by search engine bots. Thus it is important that the name of your church and its address must also be placed as text somewhere on the home page, so that the search engine bots will read this critical information and take it into account when indexing and listing your website in search results.
Graphics / Photos
Many local church website home pages feature an oversized picture of the church or the pastor. Is that picture of the chuch, or the photo of your pastor, really the most important thing about your church? Pictures are very good and should be placved on your home page. However, carefully choose your subject and the size of the picture. "Above the fold" space on the home page is an extremely valuable asset. Use it wisely. Be sure to edit the picture in a photo editor and reduce the file size of the image so that it will load quickly when the site is brought up in a site visitor's browser. Consider periodically changing any pictures that you have on the home page. This will give your returning visitors a sense of freshness and renewed interest in the site.
What does the visitor see when they look at your navigation scheme? Is there just a couple of buttons that aren’t all that interesting, like for example "Home" and "Our Church History", or perhaps "Our Organization's History"? Or does your main navigation comprise of links offering interesting information that will be attractive to your visitor? Make sure there are some interesting navigation links that are placed "above the fold".
Text Displayed "Above the Fold"
Some websites don't display any text at all "above the fold", the area that is displayed on the site visitor's screen when the webpage first loads. This is bad in several aspects. Search engines specifically look for text at the top of the page (above the fold) to help rank your site – no text in the upper portion of your webpage equates to bad rankings. The second reason this is bad is that interesting text placed "above the fold" will draw your visitors into reading the rest of the webpage. And from there they will move on to the rest of the website. Interesting text "above the fold" engages them and keeps them around long enough to be motivated to check out what you offer on your website. Have you ever seen a newspaper with only the identification banner and a so-so picture filling the whole area "above the fold" on the front page of the paper? No bold headline, no bold subtitles, no important leading sentence. No larger-print leading paragraph. Such a newspaper does not exist. Neither should your homepage be designed in this manner.
Putting Almost Everything "Above the Fold"
Some people feel that their entire home page should fit "above the fold"! They use tiny font sizes and tiny pictures so that they can cram a whole bunch of information onto the upper portion of their website's home page. This doesn't work either. Site vistors will need to enlarge their browser window in order to comfortably read all that the "small print" and see all those small pictures. This forces the text off the display in both the horizontal and the vertical directions, so what has been gained? Nothing! Site visitors with small displays will not even bother to stay around.
Website visitors know what scroll bars are and how to use them, especially the vertical scroll bar. So don't try to cram everything "above the fold". Place your most interesting content "above the fold", and as such motivate your visitor to scroll down and see more. However try to avoid forcing your site visitor to need to use horizontal scroll bars as well as vertical scrolling. A good policy is to restrict you native page width to 1024 pixels, this will often avoid the need for horizontal scrolling.
Study the top newspapers, and learn how to place the most important information “above the fold” on your website.