Please take a look at my site

[bert156]

I would love any comments you have about our church website. We completely updated it about a year ago. Here's the link http://cpclombard.org

This website is currently live and I am the main person who updates and changes the site. We have podcasts (also on iTunes) and videos of weekly sermons. I video quality needs some improvement, but one step at a time. I use Dreamweaver and Flash for the site. But I also use Photoshop, Illustrator, Final Cut Pro and other applications. I also have a google map and google calendar on the site also. I just added a members login page where members can download a directory with names, addresses and phone numbers. Also just started putting up the newsletter for download.

I am updating the site on a weekly basis. There is alot of stuff on this site - is it overwelminjg?? Anything I could change to make it better?

[David Gillaspey]

Hi Bert,

I'd be happy to comment on your church's website. However, because of my schedule, it can take as long as a week for me to find the hour and a half to two hours it takes me to write a review of a church website. It should be worth the wait, however. So, please check back from time to time over the next few days.

[JackWolfgang]

First and foremost, let's look under the hood:

Your site is reporting an XHTML 1.0 Transitional doctype, but when validated, there are 86 errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcpclombard.org%2F). Correcting these errors will help your site to render better in all browsers, be more accessible, and make redesigning your site easier.

You're using CSS, but you have similar problems with the CSS: 13 errors (http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fcpclombard.org%2F). Again, correcting these errors will help your site render better in all browsers.

When images are turned off in a browser, your slideshow only displays a black square. Also, your church's address disappears when images are turned off.

Visually, the site is nice, but the problems under the hood are a stumbling block for those who can not see, which includes the Google Search Program.

I recommend two resources to you as you seek to improve your site (one book and one website):

Designing with Web Standards by Jeffery Zeldman.
Now in it's second edition, it should be available from your favorite online book retailer.
Mark Pilgrim's Dive Into Accessibility (http://diveintoaccessibility.org/) web site.
While it's more focused on blogs, it's a wonder reference for any one putting together a web site.

[David Gillaspey]

Hi Bert,

Finally, I'm done with my two online courses (video editing and project management) and have time to review your site.

Below is a screenshot showing how the home page looks as of this writing. The ministry ad in the middle left rotates through a number of alternate ads, so the home page may look different when other people visit the site.

(Keep in mind that my comments may be directed to you or to everyone, and the switch back and forth may come with no warning.)

http://www.greatchurchwebsites.org/art/FORUM/community_pc1.jpg

Speaking of the rotating ministry ads, each is actually divided into three "zones." Mouse over the left third of the ad, and you see a left arrow. Click and you see the previous ad in the rotation. Mouse over the right third of the ad, and you see a right arrow. Click and you see the next ad in the rotation. Mouse over the middle and you see the silhouette of a small light bulb. Click and you are taken to the page with information about the subject of the current ad.

I've combined all three possibilities in the screenshot below, although this would not normally be possible:

http://www.greatchurchwebsites.org/art/FORUM/community_pc2.jpg

Using this technique is an interesting idea. I've mentioned it in case others want to adopt the technique.

1. However, I'm afraid I don't understand why a light bulb was chosen to appear when the user mouses over the middle. I simply don't get the connection between "light bulb" and "link to this page." However, most users will assume that clicking on an ad will take them to a page on the site with information related to the current ad, so I guess this is not too serious of a problem. It does make the user think ("What does the light bulb mean?"), however, and that violates author Steve Krug's "don't make me think (http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758)" rule.


http://www.greatchurchwebsites.org/art/FORUM/community_pc3.jpg

2. (Above) In the code for the rotating ministry ads, you wisely include the "Title" attribute for each image but don't include the "Alt" attribute. This is needed by the screen readers that blind people use to browse the web. To be sure, including the Title attribute helps, but you'll need the Alt attribute for each image, too, for the page to validate (see Jack's post regarding this). The ambiguous file names ("Images/slide23.jpg") don't help matters, but being a programmer myself, I realize there are situations where one needs to do that.


http://www.greatchurchwebsites.org/art/FORUM/community_pc4.jpg

3. (Above) Conversely, for the images (the round circles) used in the navigation on the right side, you've included the Alt attribute, which is good, but also included the Name attribute, which is not used for this purpose. Use only Title instead.

For the Title and Name attributes (the latter are used in form controls, not IMG tags), you'll want to use values that contain no space, e.g., "PhotoGallery," not "Photo Gallery." The Alt attribute is more forgivable, as you know, and will accept words or even sentences.

All of these are flagged by the validation report to which Jack linked. You would be wise to follow that link and make the necessary changes.

4. (No photo) When you mouse over the circle to the left of "Photo Gallery" in the righthand navigation, the logo incorrectly appears in the circle above it. When you mouse over the words "Photo Gallery" themselves, however, then the logo correctly appears in the circle to the immediate left of the text.


http://www.greatchurchwebsites.org/art/FORUM/community_pc5.jpg

5. Due to the server you use, the file names of the pages on your site are case sensitive. It appears that, in planning this site, you (or someone) made the decision to capitalize the first letter of each file name. (See example above.)

It would be too much work to change this now, but if one were planning a new site, then I would advise using all lowercase filenames to avoid typos by users. (This is in agreement with Elizabeth Castro, HTML, XHMTL & CSS, 6th ed. (http://www.amazon.com/XHTML-Sixth-Visual-Quickstart-Guide/dp/0321430840), p. 34.)


6. As I've reviewed 1000s of church websites, I've come to really dislike dropdown menus. Every time you want to go to a new page, you have to mouse over a main menu link again, then move the mouse down to the desired submenu link. This eats up time, and sometimes the dropdown menu vanishes before you can select the desired submenu link.

Thus I welcome alternates such as the submenu system you employ:

http://www.greatchurchwebsites.org/art/FORUM/community_pc6a.jpg

http://www.greatchurchwebsites.org/art/FORUM/community_pc6b.jpg

in which the submenu links appear, and persistently so, in a row below the main navigation. (Sorry, I can't get my cursor to appear in the screenshots today, so I can't show mouse overs the way I want to. But assume I've moused over "Get to Know Us.")

However, yours can be improved in two ways:

a) As soon as you click a submenu link and go to that page, the submenu disappears. See if you can make submenus persist.

a) As you mouse over other main menu links, the previously displayed submenu goes away and is replaced by the correct one for the main menu link that's currently being moused over. This is as it should be. However, when you mouse over the Home link, then any submenu that is displayed does not go away. It should.


http://www.greatchurchwebsites.org/art/FORUM/community_pc6c.jpg

7. (Above) I assume the reason for the gap between "Get Involved" and "Get in Touch" is to keep any buttons from covering up the logo. However, the Gestalt principle of graphic design states that when objects are close together, they appear to belong to a group. (See my Flash illustration demonstrating this principle at www.discovergraphicdesign.com (http://www.discovergraphicdesign.com).)

Thus, assuming I'm correct above, you are (perhaps inadvertently) communicating to the user that the leftmost three links and all the sections of the site associated with them have something fundamentally in common with each other that makes them different from the sections of the site linked to from the rightmost buttons.

In the same way, you are communicating that the rightmost three links and all the sections of the site associated with them have something fundamentally in common with each other, that makes them different from the sections linked to from the buttons on the left side.

I'm not going to suggest that you cover the logo with another button, but I will encourage you (if you didn't already, which may be the case) to make sure that the three sections of the site referenced by the buttons on the left have some fundamental relationship that justifies their being grouped as they are.

In the same way, make sure that the three sections of the site linked to from the buttons on the right have some fundamental relationship that justifies their being grouped as they are.

Correcting this, if necessary, may only require moving a few of the buttons around from one side to the other.

That's it for the home page. I hope in a few more days to have time to provide comments on the inside pages. If so, I'll add to this post.

[jbraden]

David,

Can you elaborate on this:

"6. As I've reviewed 1000s of church websites, I've come to really dislike dropdown menus. Every time you want to go to a new page, you have to mouse over a main menu link again, then move the mouse down to the desired submenu link. "

The solution shown on Bert's website is, in fact a dropdown (albeit horizontal). What are you trying to say here?

John

[David Gillaspey]

Hi John,

Sorry for the confusion.

I had in mind the classic dropdown menu, an example of which is shown below.

http://www.greatchurchwebsites.org/art/FORUM/dropdown_example.jpg

[generalhavok]

I have my own problems with dropdown menus: they're almost invariably made with javascript.

Why is that a problem? Simple: search engines can't click through a javascript link. They stop. If there's a page that can only be reached through a javascript link, that page will often fail to be indexed by search engines. This cuts down on peoples' ability to find you by searching, which is really the goal: to have people find you.

Yes, not having js dropdowns takes away a "cool" feature.
No, it's not usually worth it to have them anyway.

Of course, a quality site map goes a long way toward fixing this problem...