Have I missed anything obvious?

[cmrowney]

HI - i Pastor a small (100-150) church in Australia and we have had a web presence since 2003 when I began here. I began podcasting a couple of years ago and we now get a lot of traffic because of that - approx 100GB per month just of mp3, mp4 and wmv downloads. The page was in need of an update and I have just spent a week doing a new design and would appreciate comments. Because of the podcast use one of the key objectives is to easily and quickly direct people to the pages where they can watch or listen to messages. I also try top determine if they are using Mac or Windows and then direct to mp4 or wmv files respectively.

I used GoLive, and made some flash ads and used google calendar and maps for embedded info on some pages. images are a variety of stock images and images from our own youth - children's - and other activities.

Tried to make sure service times and sermon download easily found on home page, and to follow other advice in the FAQ.

Web page in question is

http://www.tcfnet.org.au

Cheers,
Chris Rowney

[David Gillaspey]

Hi Chris,

Thanks for joining the forum and posting about your site.

My initial reaction is it looks very nice. I love the photos, with the torn-edge look. I'll definitely be adding your site to The International Directory of Church Website Design, which I maintain on my website.

There are, however, lots of quirky aspects to your site, which I'll point out below. And, you've done one thing on the site that I consider to be a major problem, and there's a second feature that perhaps should be changed.


Here is a screenshot of the current home page:

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


My comments:

1. Once the site loads, the user's browser is programmatically reduced in size to fit the content. That's a big no no for me. Look what happens if, using my favorite browser Firefox, I open a new tab to check on the latest news at cnn.com:

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

(Above) Oops! The cnn.com home page is cropped, because the browser was set to the reduced size. I have to take time and effort to make the browser window full size again to see all of the home page of cnn.com.

Popup windows commonly are programmatically restricted to a certain size, but I've never encountered a church website (or any website, not counting Flash-based sites) in which the browser window is set to specific size—in this case, about 900 pixels wide by 700 deep, based on a screenshot I made.

Now, I ask, why this size? That's bigger than the available screen space of an 800 x 600 monitor, and considerably smaller than the available screen space of a 1200 x 800 monitor. No one wins, therefore.

But anyway—and yes, I'll be blunt—programmatically setting the user's browser window to a reduced size (or any set size) is just plain rude. Don't do it. Instead, use so-called liquid design to center the content area at least horizontally in a full-size browser window. Allow the user's browser to fill his or her monitor.


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

2. (Above) In print, this graphical treatment of a line just above a word or phrase would be fine. However, as you know, the web convention is to underline links. So, intentionally or unintentionally, the graphical style used in the menus throughout your site defies the standard web convention, for two reasons: 1) The lines (which of course are not meant to be underlines at all but certainly will remind the user of underlines) are above words or phrases, not under them; 2) if the lines are perceived by the user to be underlines, then they're too far away from the lines they are "under."

So, while I'm personally OK with the graphical treatment of the menus (because I have a background in print graphic design, I can appreciate the graphical treatment), it still bothers me. However, other forum members may be OK with them.

What's interesting is, if you center the lines between the text links in the menu,

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

both objections are resolved. So, this is what I recommend.

Furthermore...

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

3. (Above) I looked at the source code and it appears that the rules between the menu items are manually created with rows of underscores. The rules should be created using Cascading Style Sheets (CSS) alone.

4. (No screenshot) On about half of the pages of your site, the vertical menu I've been talking about is on the left. On the other half of the pages, the vertical menu is on the right. I'm not going to say this is bad, but I will say it's example of the quirkiness of your site. Generally, consistency is the preferred standard.


More things I noted about your site's homepage:

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

5. (Above) It's good that you include at least the service times and location of the church on all pages. Why not include a phone number, too?


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

6. (Above) There's three things I want to point out about this media player and the accompanying instructions.

a) When you instruct the user to "click below" to choose a title, where exactly do you mean? Do you mean, click in the line that reads "click the http://www.greatchurchwebsites.org/art/FORUM/torquay_dot1.jpg to pause/stop/resume"? Because that line is, in fact, "below" the first line. Or do you mean, click in the popup menu below, in the area highlighted in light blue? Of course you mean the latter, but I want you to see that your instructions to the user, while clear to you, are actually ambiguous. (And don't rely on color to guide users—some may be colorblind.)

b) Regarding that second line, which reads "click the http://www.greatchurchwebsites.org/art/FORUM/torquay_dot1.jpg to pause/stop/resume", users will expect to find a black dot to click, right? In fact, users need to find and click the little gray dot, http://www.greatchurchwebsites.org/art/FORUM/torquay_dot2.jpg, at the right side of the media player.

So, you're asking the user to click a black dot when it's actually a gray dot that they need to click. That's inconsistent. Moreover, clicking a round dot to pause, stop, or resume a streaming file is not the standard convention anyway! The convention for media player controls is a square dot, matching what is commonly used on the buttons of DVD players.

Since I see (barely) a credit for the media player under the player, I know that your staff likely did not create the media player. Regardless, the books I've read on interface design warn against defying convention and user's expectations to do something "new."

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

c. (Above) As I write this, the words "Choose a show" display twice, which is a flaw. Besides, shouldn't the words be "Choose a title" instead?

d. (No screenshot) To choose a title from the popup menu, the user selects from (at present) a short list of titles in black against the light blue background. On mousing over a title, however, the title turns to white against the light blue background, which is hard to read. The fact that a moused-over title becomes hard to read is alone a problem, but the effect is one of two titles switching with each other. That is, the unintended consequence of your color choices is that two titles stacked one above each other appear to switch places as the user mouses over one or the other. Of course, the titles don't actually switch places. I'm just saying it constantly looks like this is happening. It's annoying to see.

In my research of church websites, I've seen some good media players. This isn't one of them. So, I would suggest that you look around for a better media player—not for quality of sound, but for the interface design. The one you've chosen I think has some serious flaws in its interface design.

7. As mentioned, I think your site generally is well designed. However, again I want to mention the fact that you've chosen to programmatically set the window size on all the pages. This leads to limited space on each page. Church websites have been criticized for too often being just online brochures. I think that because the pages on your site are programmatically set to a small size, thus limiting the available space for content, your site, as nice as it looks, will more likely than other sites to fall into the trap of being just an online brochure. This is another reason to abandon this ill-conceived idea and tweak your site's design to allow more freedom to add content to pages.

I'm going to go ahead and post now what I've written so far. There's a few more things I want to say about the inside pages. I'll add those later tonight.

I hope these comments are helpful to you.

[cmrowney]

HI - Thanks so much - very helpful and constructive - I will quickly explain my thought process that resulted in the problems. I was very unsure what screen size to design for 800x600, 1024x768 or what? so hit on a design that would fit OK in the space of a 1024by768 windows internet explorer. I tried the site in firefox, explorer, opera and safari on both mac and windows and found the default window (at least on the machines i tried) for some opened as smaller than was needed to display the site - so I looked at how to make it open at least big enough to view the site -PROBLEM is that then limits the size for those with bigger browsers - and I also felt it seemed a bit rude! - so more than glad to scrap that idea! (I guess people will resize their window if they can to see it all anyway)

Previously I had no flash player on the home page for sermons (they were on iTunes ad a separate download page that uses a php script to put the podcast.xml into a list on the download page) - On that page I also trialled "precaster" the little flash player - mainly as it was so small in screen realestate - but that was years ago and it hasn't been updated since - is not customisable for look (you are stuck with the shades/colors it has) and others also find its instructions very counter-intuitive - so again thanks for confirming that I will try hard to find another one - or even not have it on the home page at all.

I am new at CSS this time round so will look into how to do rules in css - and will do the centred between lines as that achieves my aim which is the visual look

Also thanks for the tip on the phone number - that was one really obvious one I missed - I am amazed how often I go to a site to find a phone number and it is nowhere to be seen - and whammo I did it myself on the home page!

Nothing expect the download lists needs the 'downward' space at present so I might leave the 'shaded border' at the base unless I put enough content on pages to necessitate scrolling - thanks I look forward to the other comments.

Chris R

[cmrowney]

I have taken your advice and made some changes for consistency and scraped the window resizing and found a better mp3 player (commercial not free but good - and it plays my podcastmaker .xml files (some free players did not recognise its format well)

Major issue now has been getting flash to work OK in internet Explorer for windows without needing to "click to activate" and then having it size things OK - it seems to mostly work but two pop-ups I have added (for mp3player) size differently on IE Explorer than on everything else.

Thanks Again for your help

Chris Rowney