So I walk into my favorite coffee shop this morning and queue up for an xtra-large decaf and a banana nut muffin. Normally I forgo the bun, but I was in a hurry for a meeting this morning. So as I’m standing in line, I look down at the news rack which contains various papers for sale. Living here near D.C., I have a choice between the Washington Times, Washington Post, the Montgomery County Journal and on some rare mornings, the NY Times. Each paper is folded in half for the convenience of storage. Each upper half, or the portion I like to refer to as the section “above the fold“, contains snappy headlines in bold accompanied by a eye-catching action shot of some major news event.
This is not by accident. Editors understand that revenue and readership is won or lost on that section above the fold, so they take great care in what is said, how it is said and how it looks when it is said. The same is true with your front page. You’ve got in most cases, anywhere from 400 to 600 pixels from the top to the bottom of your browser screen to satisfy a seeker visiting your website. If you’ve got something compelling to say, say it above the fold. Say it so it loads fast and reads even faster. Say it like you mean it.
Which brings me to today’s example, the Valley Fellowship of Huntsville, Alabama. First let me say, I’d like to commend this Church for investing its talents in conveying the thought that Christmas is more then gifts, cookies and made-for-TV specials. I love their message that reads “With all the home decorating, frenzied shopping, and festive gatherings to attend, how much attention do you really give Jesus at Christmas time? Would you like to feel more like hallelujah than humbug this season?” I just wish they wouldn’t hide it below the fold on a page that takes too long to load.
Above the Fold
We’ll get to obvious, the size of the images in a minute. But lets talk first about communicating online effectively with the space you have. And the first thing I would do to heal the Valley Fellowship would be to physically reduce the dimensions logo/banner emblazed on the top of their page. As it stands, the height of the image is almost 300 pixels. That is just too much wasted space “above the fold.” I would recommend a simpler 468×60 or at least 580×100 that conveys the same sentiment. I think I’d also avoid the lime-green beveled fonts. More on that in a moment. There are two major benefits to this redimensioning of the logo/banner. First, we would reduce the load time. The current image is 53kb. This is not good since you want the entire page’s size to come in under 35k … though I prefer to get under 20k for most of my work. Second, you gain at least 200 pixels of usable space “above the fold” to post your compelling content.
In the previous paragraph, I commented on the size of the logo banner. It alone was well over a reasonable load time limit. So imagine my dismay when I added up all the image sizes. According to my math 53kb + 8kb + 17kb + 6kb + 118kb equals a page that no seeker using a dial-up is going to sit around and wait for. I’ve already talked about the logo banner, so now lets talk about the 118kb “From Humbug to Hallelujah” image. A common mistake I see on many church web sites is that they scan in a large an image of a flier or a book cover, then post it on their website using the <img> tag to get the image to fit. That is what I suspect happened here as the image in question was scanned in at 1024×768 pixels. What the webmaster apparently didn’t understand was that the height and width attributes of the <img> only resize the image on screen, they do nothing to reduce the physical size of the image – which explains the bandwidth busting 118kb size. What the web master of this site needs to do is obtain access to a graphics application and physically redimension the image to the desired height and width and then save the results to a color optimized .JPG file. Then use the resized file for the web page.
Beveled edges on images were cool back in 1997. They was okay back in 1998. But on the eve of 2003, these convey a message that … well .. they’re tacky, cheap and convey the wrong message to web-savvy seekers. Moreover, the color gradients required to get that smooth beveled look consumes mondo bandwidth. Each of those buttons should be 4 to 12 color .GIF images weighs in at 1kb at the max. Again, most of this can be handled through a graphics package, though there are some cool online tools to help you get this done.
The front page also makes the mistake of depending soley on graphical navigation elements. Don’t get me wrong, it is okay to use graphics as your primary navigation, but make sure you provide some simple text navigation options along the footer of your page. It makes those with disabilities or otherwise using image-less browsers very happy.
Make sure all your images are identified by using the ‘alt’ attribute of the <img> tag.
I’m going to keep saying this until it is no longer an issue. The title tag of your church web site should include your church name followed by the city and state where it resides. It makes it much easier for seekers to find your site.
Quick Fix – Recap – Summary
Remember, our mission here is to build the Body by building better web sites. So here’s what I’d do if I had 10 minutes to fix this front page:
- Reduce the color palette and the physical dimensions of the 1024×768, 118kb ‘Humbug’ image image by 75%.
- Redo the logo/banner so it was only 500×100 pixels large, dropping the lime green beveling of the church’s name.
- Replace the navigation buttons with some generated image, or fast-n-flexible text buttons via CSS/DHTML.
- Make sure all the images are color optimized/reduced
- Add the city and state to your church name in the <title> tag
- Add some text links along the bottom of your page
- Move my compelling content ‘Above the Fold‘
There is still plenty more to talk about with regards to the sub-pages, navigation and fun stuff like that, but I’m only allowed one healing at a time. Hmmm … need a cup of coffee ….