I've taken the responsibility of working on the website for my church. It's something that we've been meaning to do for ages but never got round to it. The older guys in charge just saw a website as evil so it took a while to get the go-ahead. Annnnyway... I've been holding out from asking for a critique until now, basically 'cause I wanted to try to get it as good as I could first. link Just used the first free host that didn't have ads that I could find, until I get a domain and proper hosting sorted. I really want you to be picky about anything that you feel isn't right. In particular, I want this site to be simple and easy to use because many of the users will be elderly, that's why I've gone for a convential layout really. I know about the poor quality of the top left image, I just stole it from some other local site so I could make the site. I'll be taking my own photography soon so that image will be very sharp and clear. I am also aware that the main content area may look a little too grey when viewed on higher resolutions, but I'm not sure of how to sort this. As far as I can see, it does resize nicely for whatever resolution. Browser compatability may not be that great though. I could only test on Mozilla 1.3.1 and IE6. Anyway, thanks in advance for any criticism. Once I get the template finalised I can get on with the PHP/MySQL stuff.
Not gonna give you a full critique, cause I'm lazy. It all looks very clean and good - good way to do it for a site that will likely have a fair few beginner visitors. Only things I would comment on are the lack of a heading/title and as you've said, the pic in the top left. Good stuff
I do like that it is clean, and easy to navigate, however I would agree with you on changing the picture, and would reccomend also adding some sort of header possibly. Just something nice to look at, like a collage of members/church pictures, or something like that. (a very trivial, optional suggestion that may even be bad, who knows?!) I'm also glad to see it is working in IE now! Nice job, IE can be pretty stubborn at times when it comes to CSS. The only thing I would add to it is title tags to your text links and maybe a print version of the style sheet strictly for print media. Other than that, it looks easy to navigate with or without CSS and you are using xhtml so you've got my approval so far! Keep it up.
Thanks for the comments. As I said, that picture will be fixed with a much crisper one. As for a top banner, I'm not sure about it. I mean is really necessary. I think it is kinda okay without it. The breadcrumb shows the current location and the section titles explain the content. I dunno, I'll have a think about it. Apparently, after running my page through a validator, I'm not supposed to re-use a div multiple times, so the #navlink thing is invalid. What other way should I go about this. I've noticed that on other sites links often have ids. Can I ask why this is? The page seems to validate as XHTML Strict without them. About a seperate print stylesheet, that seems like a good idea. Can I ask how exactly that works though? By the way, I will be including printer-friendly page links for each of the news items or any other relevant pages via PHP. However, if it is more efficient with CSS I am open to change.
Wow, a church website that doesnt look like it's been written in Notepad by someone learning HTML 2.0! Well done, looks suitably professional
Here are my CSS tags: Code: <link href="wtp.css" rel="stylesheet" media="all" type="text/css" /> <link href="print.css" rel="stylesheet" media="print" type="text/css" /> You can test them out at www.woventhorns.com, just click "print preview" in your browser. You can tell the biggest difference on the services home page. There are just a ton of display:none; in the print css. (although I'm sure I could just jump them all in one massive clump with one display: none, but advanced-find-and-replace did most of the work.) Bradford:: You wouldn't believe how many people try and read that and complain that they can't tell what language it is in, and that the people viewing my page may not like it. Once it is described they usually just say, oh... okay, you may want to change that though... EDIT:: Keep in mind the main page is still in xhtml format with no php programming whatsoever. (look at me acting all cool because I found the media=print feature...)
OneSeventeen thanks, that great actually. I'm gonna get to work on doing a print stylesheet as soon as I've finished eating my soup. I'm glad I know about this now, because a lot of net novices will like to just go FILE>PRINT and it'll mean it'll be much better. Also, older people often like to actually have a printout rather than read on the screen. Thank you Can you tell me a little about giving links IDs please? Bradford: hehe, thanks for that. I'd always wondered why MS Word etc. always used that "Lorem ipsum" thing. I don't think I'll bother with it for this though, the news etc. will be populated fairly soon. Edit: just played CS all afternoon instead. I'll get cracking with it tomorrow and should hopefully have an update for y'all.
For links you should use class tags, or create your link info inside a div definition in your CSS file. (yes, that is the worst possible way of wording that, but I'll explain) Code: <a href="link.htm" class="menu1">Link Text</a> [b]CSS FILE::[/b] a.menu1 {style info....} a.menu1:hover {style info....} OR... if the link is within a DIV, maybe with an ID of "mainarea": Code: <div id="mainarea"><a href="link.htm">link text</a> lorem ipsum... <a href="link2.htm">link text</a> etc, etc...</div> [b]CSS FILE::[/b] div#mainarea a {style info...} div#mainarea a:hover {style info...} With the first example every link with the class set to menu1 will be affected, and with the second example every link in the mainarea div will be affected. I prefer the second way, because I usually use the menu class I create on the menu, which is in one div. It is a good way to keep your links consistent based on where they are on the page. But both ways work fine. Let me know if this made sense or not, and above all, play around with it.
All of my nav links are actually within a div with the css code stated for that. The main section links are defined within the #content section too.
you asked about giving links IDs, so do you still have some questions about it? (or did I misunderstand you... it happens... far too often actually ) To make it validate the only thing I could think of would be take the id="navlink" out of your <a> tags. But from the sounds of it you've got things sorted. Looking good
It was just that you said that I should use IDs within my link tags. I asked if this was necessary because it still validates without, and you explained. Really, because the links are within a div, there isn't really any need for an additional link ID. All is ok Except the fact that I reuse the: div id="navlink" I don't think DIVs are supposed to be re-used. I'll need to sort that but it shouldn't be too hard. Still to start on this print stylesheet. I've got a bit distracted with this MSN client. I'll update as soon as I get it done.
Sorry I haven't updated this for a while, just didn't get round to it and been on holiday for the last week. I finished the print stylesheet a while ago. same link as last time Click print preview to see the difference. Also, I've been doing some thinking about the header problem. I'm not sure I want to throw in a big header at the top, but the design definitely needs something with the title. I was thinking of a faint grey watermark going up the right side saying "Killermont Parish Church". What do you think? It might add confusion to the design with having a third column.
I've added a kinda title thing at the top. Just plain text, kinda boring. Ever so slightly better. Might do something a bit better later. Oh yeah, I've also made the top-left logo thingy a link to the homepage. Best sticking with net tradition so that users don't need to adjust to something different. (still got to stick the border="0" part in the stylesheet though ) I've been having a think about the navigation and I really need to do something about it. Within each of those links on the navbar there's going to be a lot of other levels. I was gonna just have a list of links in the content area when you click on "about" for example. But that is a little messy and isn't particularly professional. Any ideas what I could do? Perhaps a little expanded menu thing. eg. When about is clicked it might look like this: Home About Us -Church Services -History -Location -Photos Newsletters What's On etc. Except that's gonna make the stylesheet thing so much more complicated.
