Church Site Review

[two4god07]

I made this webpage for a church as voluntarily in order to get something of mine on the net.

They asked for a page that wasn't too fancy because all or most of them are running on a dial-up modem.

I understand there are a few CSS problems I have to attend to (Outreach page headers got indented when they weren't supposed to)

but can you review the overall layout of the page and tell me what you guys think?

I'm still a javascript beginner and only know how to layout with css.. I can't do any fancy tricks with it.

http://www.faithmiracle.net/

Thank you!

[Charles]

I have pretty exacting standards, both as a churchman and a web designer, so take this for what it's worth.

JavaScript? There is no reason for any JavaScript there and I can't even figure out what it's doing there. Get rid of it.

Your mark up is pretty bad. See http://validator.w3.org/check?uri=http%3A%2F%2Fwww.faithmiracle.net%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0 . But that list misses your misunderstanding of what the "alt" attribute is for. It specifies what to display when the image cannot be presented, like with a Braille or audio browsers. The alt text for the banner shouldn't be "banner", that doesn't help anybody. It needs to be text that the banner is displaying, "Faith Miracle Ministry". On the other hand, that big image on the front page doesn't add anything to the meaning of the text so the alt attribute should be set to "".

That image background, big beveled frame around the image and even the fonts look so 1995 if not earlier. Today they look juvenile and dated and are certainly distracting. And put some padding around the body. Some of the text is disappearing beyond my window.

And the image on the front page is completely wrong. It's way to big and eats up too much time and resources to load. And a photo of a church is the worst thing in the world to put on the front page of a Church web site. They pretty much all do it, I guess because the things that the congregation is about are not visual. But you have to work with this group to find out what picture or pictures show just who they really are. They are not about that building. Get some pictures of them worshiping, playing together, serving the community.

This is the world wide web so I need city, state and country though I suppose I could be expected to figure out the country from the rest. When people look for a church they'll Google something like "church, washington, d.c." If the locality doesn't appear on the page the people are never going to find that page.

I hate mission statements on web pages or any where other than the vestry meeting. When decisions are being made the mission statement can keep the group on track. But it doesn't really tell me who the group is. Under "Who We Are" I want to know who these people are. If I'm going to stop by on a Sunday morning I need to know a few things. Are they associated with any larger organization or are they unaccountable? What's their worship style, happy-clappy or Gothic cathedral? Is an obviously gay couple going to feel comfortable and affirmed there? An interracial one? You don't need to spell this stuff out but you do need to give hints. And carefully chosen photos can do the hinting. At a Church near me, one I'm pretty familiar with, the front page photo is of a white female priest baptizing a black infant among an obviously integrated congregation. People do get the message and the show up expecting that church depicted there.

[two4god07]

On the mission statement page, it is only still lacking information because they told me not to put anything on there until they were finished rewriting all of what they believe and stand for. They are rethinking the ideas behind the church. I can't fill in any of their information for them unless they tell me because I've never been to their church so I really don't know who they are.

The javascript is there to make the drop downs not disappear right away when they drop down. it always made me mad on some webpages when I get to the drop down and try to go to one of the list items and it disappeared on me.

Now all the rest of the criticism I'll take. Without straying too far from the layout (Because the church is in love with it.. I'm personally not) What can I do to improve the look and feel to make the site more attractive? I agree about changing the alts and adding city and state (I just copied and pasted the contact info they gave me and gave it no second thought)

My CSS is validated.. my xhtml.. is not

I've combed through the site multiple times trying to find anything that would not make it xhtml valid.. and I can't find much of any more problems. The validator finds plenty, but I don't understand what they problems they are telling me are. The only one I understand is when it tells me it isn't encoded utf-8... but I did encode it.. and re-encoded it just incase I misclicked.

[Charles]

Those drop downs don't work for me at all and I'm using FF 2.0. Get rid of them. There is so little on that site that it could use some consolidating. As to the XHTML, 1) you should be using HTML unless you know what you are doing and you, by your own admission, don't know yet what you are doing and 2) you should start learning and fast.

It looks like there is a Bible study and worship this evening. You should go to both of them and you should worship with them this Sunday. Talk to the people. Ask them what sort of images describe the place, who they are and what they do. As luck would have it my congregation is currently searching for a new rector and I served on the committee that wrote what we call the profile. It's basically a brochure describing us to prospective candidates. It took six of us four months and a hired graphical designer. And that was for eight pages of PDF. A decent web page is going to be even more work.

Once you've done that get permission to take pictures during the worship. Use an SLR, 35mm and scan if you have to, but you need to be able to open up the lens and grab all the light you can. Do not use flash indoors, the results are awful. Once you have your photos you can figure out which ones show them as they are and which ones show them as they would like to be seen.

While high contrast sites with big lettering are easy to read, they do look awful. Also, there are subtle psychological effects that you need to keep in mind. The level of contrast in the colors, the amount and use of whitespace, the size and type of the fonts will cause the Church to be seen as affluent or not, elegant or not and the web site professional or not.

Check out another site currently under review here, http://www.bastadkliniken.se/valkommen.html . Let's skip the splash screen because those things are always a mistake. The whitespace there is doing as much or more work than the text. I don't even know what language the text is in yet the page is giving me elegant and soothing vibes. Particularly elegant is that simple, effective menu across the top. I wouldn't use images quite that way but I was struck how the image and the text are in balance, alongside each other and about the same size. But they are also in contrast. It's quite wonderful actually. The only thing that I would change is that I might add just the slightest bit of letter spacing or line spacing to make it a little bit more readable and just a touch more elegant yet. Notice also how the graphics anchor the page vertically in the same way that the image and text pair anchor it horizontally.

[two4god07]

The main reason for the drop down menu is because they have a lot of pieces to the site. They have a newsletter, a prayer request page, a page set aside for the staff, outreach events and upcoming events are separated at their request. Using a horizontal menu, the navigation would have been too wide. A vertical menu wouldn't look all to well with that image of the church they wanted on the front (at their request)

Any ideas how to rid of the drop down without making the navigation two layers?

I can ask them if I can take pictures during their worship, but they are very reserved about electronics, and I think they might see it as disrespectful and distracting. But it's worth a try.

[two4god07]

I redid the layout of my index page. Please take a look at this address

http://www.faithmiracle.net/new/

It isn't the main index until the pastor of the church approves it.

Now the only issue I have is that FireFox distorts it.

I'm going to post my css.. and you can see all my source code from the page. Maybe you guys will be able to tell me why firefox aligns it wrong? (slightly wrong, but enough to take away the quality of the layout)

#banner {
position: absolute; top: 0px; left: 180px;
}
#toc {
position: absolute; top: 200px; left: 180px;
padding-left: 15px; padding-top: 15px;
width: 150px; height: 500px;
border-top: thick solid maroon; border-right: medium solid maroon;
}
#content {
position: absolute; top: 200px; left: 330px;
width: 714px; height: 500px;
border-top: thick solid maroon;
}
#church {
width: 390px; height: 285px;
float: left;
margin-left: 10px;
}
#address {
padding-left: 420px;
}
#tag {
margin-left: 100px;
}

I removed css that directly edited text fonts and colors and background colors to minimize the amount on this post

[Charles]

You're certainly getting better. But don't consider yourself ready to approach the client with it until you have spent some time getting to know the congregation.

That Jesus and those praying hands are really hoakie, but you're getting the idea about the images telling us who these people really are. And perhaps they're a really hoakie, but charming, bunch of people. You are, however, using the dread font Papyrus. That thing is becoming ubiquitous as syphilis and about as welcome. The thing is that its proportions and those little notches in its lines give it a really elegant feel at small sizes and in large blocks. It's perfect for the body of the text but awful in titles. And everybody and his dog keeps using it for titles. But that's just me.

Your mark up is also getting better but it's not there yet and you're still mixing HTML with XHTML. Get rid of those trailing "/" in your empty element tags. And start the page with <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">And then make friends with The Validator (http://validator.w3.org/). Your navigation menu, it's a list so mark it up as such. You should pretty much never use the BR element. Download and install the browser Lynx (http://lynx.isc.org/lynx2.8.6/index.html). This is the most important thing that you can do right now if you want to learn this stuff. You need to know how a machine is going to see your page. And you need the page to work for search engines, Braille and audio browsers.

The problems that you are having with your layout come from you trying to nail things down so that they work on your screen. This has to work on a lot of different screens. The good folks will help you with that once you have the HTML right.

Step back from your page and close your eyelids until everything blurs a bit. You should note that everything is flowing from the upper left to the lower right. It's not the most harmonious. Unless you are trying to say that these people are dissonant or going down fast I'm not sure that works.

I note that you are in love with those bold colors. It's always that way with the young. Time has worn away my rough edges and I prefer the subtler things in life. Use the colors and contrast that they are using in their worship space. Color actually tells you a lot and people are usually attune to its effects.

[Charles]

Here's a simple template to get you going:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>

<style type="text/css">
body {
color:#000;
background-color:#eee;
margin:0;
padding:0;
width:864px;
}

#skip {display:none}

h1 span {display:none}
h1 {
background-image:url(http://www.faithmiracle.net/new/indexbanner.jpg);
height:200px;
margin:0;
padding:0;
width:864px;
}

#content {
margin:0;
margin-left:15em;
padding:1em;
}

#navigation {
list-style-type:none;
margin:0;
margin-top:1em;
padding:0;
position:absolute;
top:201px;
left:1em;
}

#navigation a:link, a:visited {
color:#600;
text-decoration:none;
}
#navigation a:hover, a:active {
color:#600;
text-decoration:underline;
}

</style>

</head>
<body>
<div id="main">
<p id="skip"><a href="#content">Skip to content</a></p>
<h1><span>Faith Miracle Ministry</span></h1>
<ul id="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="about.html#mission">Our Mission</a></li>
<li><a href="about.html#believe">What We Believe</a></li>
<li><a href="staff.html">Our Staff</a></li>
<li><a href="events2.html">Upcoming Events</a></li>
<li><a href="events.html">Outreach</a></li>
<li><a href="counsel.html">Counseling</a></li>
<li><a href="sermons.html">Sermons</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="prayer.html">Prayer Requests</a></li>
<li><a href="newsletter.html">Newsletter</a></li>
<li><a href="http://www.faithmiracle.net/blog1">Pastor Speaks</a></li>
</ul>
<div id="content">
<p>Lorem ipsum dolor sit amet consectetuer tristique Vestibulum et Curabitur quis. Augue laoreet montes Nunc neque et justo dui facilisi leo non. Hendrerit sem Suspendisse nec laoreet Vestibulum libero sollicitudin ut vitae facilisis. Aliquam ut sapien justo dictum Vestibulum pede enim pede ut Aenean. Sed malesuada Phasellus consequat sagittis feugiat consequat semper condimentum Lorem metus. Leo id.</p>
<p>Malesuada nibh rutrum in nascetur leo condimentum nibh et in enim. Nibh Donec nibh quis quis facilisi Sed Curabitur elit nibh et. Amet quis et pretium Aenean Nam lacinia quis interdum vel augue. Libero nulla Nullam quis Quisque vitae lobortis quis congue risus enim. Interdum Ut sagittis at malesuada metus ante tincidunt Nulla risus nibh. Aenean magna.</p>
<p>Quisque Sed laoreet Nullam nunc eu tellus justo aliquet Quisque id. Orci neque accumsan elit ac laoreet et Aenean ligula ac semper. Mus Curabitur orci Ut pellentesque at elit vel elit Vestibulum felis. Eget turpis Curabitur In id Pellentesque lacus lacinia congue turpis enim. Curabitur pede Nulla et Nunc Vivamus et at tellus tristique In. Nec.</p>
<p>Venenatis egestas nibh sem vel tempus leo et id et laoreet. Auctor nec justo mauris et Phasellus dolor Proin aliquet semper tortor. Laoreet non pretium Aliquam Phasellus velit ut Vestibulum Maecenas Aenean lacinia. Congue facilisis faucibus at nulla Nam interdum elit cursus at libero. Ut Curabitur Curabitur Pellentesque faucibus interdum tincidunt accumsan lobortis Aenean et. Aenean.</p>
</div>
</div>
</body>
</html>

[two4god07]

my main reason for the bold colors is.. well.. every other church site in town looks almost exactly the same.. pastel blues and white etc... so I wanted to make something that stood out from the crowd.


Thanks for all the input. It's really helping me re-think my design of the site.

[two4god07]

I found out why it was viewing different in EI and in Firefox. I set the doctype to strict and it began to work. None of the other doctypes put it together.

But now the validator says that my image isn't allowed in a strict doctype and therefore won't validate me.

[Charles]

It's not that your IMG element isn't allowed it's that it isn't allowed there. Read the error message carefully. It needs to be inside a block level element. And as your image is doing the work of the H1 element it needs to be inside an H1 element. That's why in my example I used your image as the background of an H1 element. Both methods work but mine is more flexible. See http://www.csszengarden.com/ .

[two4god07]

that's a weird and stupid rule for html. Why can't an image just be an image?

[Charles]

Well, in your case it isn't just an image so perhaps the rule is for the best.

Read, mark, learn and inwardly digest http://www.w3.org/TR/REC-html40/ .

[two4god07]

my final product is up.

http://www.faithmiracle.net/

I have every page in the new layout.

Thanks charles for the input. I tried to keep some of it in mind when editing. I changed the navigation text color to a softer maroon instead of the black. The img is now in a header. All my pages validate (except for the hidden code yahoo small business puts after my code.. so I can't actually get it to say "its valid!")

I added padding to increase readability.

I kept the mission statement because they want it there. Beliefs and actual information about the church will follow.

i have asked the associate pastor if I could sit in and take pictures and he concented. The picture of the church will soon be a short 4 picture slide show showing the church, the pastor, the worship, and the outreach.

Oh.. and about those praying hands.. i did that to make a statement. The church is all about reaching the younger people so it signifies young and old worshipping together.. The picture of Jesus was more or less a space filler.

I'm going to hold tight to my bold colors.

What does everyone think?

[andr105]

I think, you should choose another font. Sans font is very simple and not readable.

[two4god07]

should I just switch to arial? I thought sans-serif was a little blocky for this site because the site looked more antiquish

[Charles]

Sans serif fonts are easier to read on a screen, serif fonts on the printed page. But Ariel is a yucky and overused font.

But at the moment you are just using the system fonts, which are different for each of us.

[two4god07]

which do you think I should use. Verdana or Tahoma?

I like calibri, but I don't know if it is on a lot of computers.

[Charles]

Which one best represents your subject?

I've always found this page quite helpful: http://www.microsoft.com/typography/fonts/default.aspx

And if you haven't already, do see: http://www.w3.org/TR/CSS2/fonts.html