First website for a client

[Carol Haynes]

I have just set up my first website for a client (albeit on a voluntary basis).

It is a UK charity that supports the only school for the blind in The Gambia.

I figured it is an opportunity to develop a website for someone else and that involves working with others and to a deadline (not something I am good at). It has taken about two and half days in total to get it to this point - but half a day was spent on editing the links page - which needs some serious organising to make it useful!

A lot of the contact basis for the website is local friends who are involved and do things like deliver minibuses to the school (yes they drove from the UK to The Gambia across Europe and half of Africa - including the Sahara)!

Note the actual content is as supplied by the client but the site design and page graphics are mine. I know some pages need some extra 'interest' in the form of graphics. The news page is a work in progress - I will add a breadcrumb trail to archive stuff so that the page becomes a manageable length.

For now here is is - warts and all www.friendsofgovi.org.uk

What do people think? Constructive criticism is welcome.

[Veign]

Some very quick points:
- Remove all the META tags except for Title, Description, Robots, Content-Type and maybe Language.  All others serve no purpose anymore.
- Move the Styles (CSS) into an external stylesheet and call it from your pages.  This way its cached on the users system and reduces the 'weight' of a page
- To align the text in a container, like a DIV use a Style and not the align property which has been deprecated.  To do so create a CSS rule like:
    .text-center {text-align:center}
and then call it from the container where the text should be centered like:
    <div class="text-center" ...

If you want an img centered, without being contained within a container you can use a rule like:
  .img-center {display: block; text-align: center;margin:0 auto;}

These are some of my base rules:
.clear        { clear:both; }

.float-left    { float:left; }
.float-right  { float:right; }

.text-left    { text-align:left; }
.text-right    { text-align:right; }
.text-center  { text-align:center; }
.text-justify  { text-align:justify; }

.img-middle {vertical-align:middle}
.img-center    { display: block; text-align: center;margin:0 auto;}
.img-left      { float:left;margin:4px 10px 4px 0; }
.img-right    { float:right;margin:4px 0 4px 10px; }

- Don't use Caps (or spaces) in any file name (including images names / folder names) or URL.  It only leads to issues down the road and will lead to problems on a Linux server.  Users are used to lowercase and type them by default.
- Validate the page through the W3C (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.friendsofgovi.org.uk%2F). ; Validation doesn't mean it will work in every browser or look the same but it helps.  It also helps get rid of the tricky little displays bugs that may pop up.
- Close all you tags (i.e. <META NAME="Title" CONTENT="Friends of GOVI"> should be <META NAME="Title" CONTENT="Friends of GOVI" />)
- The sidebar would do better as an unordered list styled into a menu then a bunch of P tags.  Its semantically more correct.

Thats it for now as I was just looking at the code.

[mouser]

I like the overall look, just have 2 small visual quibbles:

1) the left hand sidebar touches the line, which gives me a bad feeling
2) the top text needs some antialiasing to reduce the jaggies, which make it look less professional.

[Carol Haynes]

Thanks for the comments guys -I'll have another look tomorrow.

[Perry Mowbray]

You must have fixed mouser's #1 as it's fine on my machine, but the width is causing an issue (my resolution [at work] is 1280x1024):

[Carol Haynes]

That's odd - which browser are you using. Here is what it looks like in two browsers on my system with the windows dragged really narrow:

Firefox:    Internet Explorer: 


Unfortunately I can't access from the domain at the moment as the server seems to be down (I can't access any of my domains)

[Carol Haynes]

OK I have done a bit of cleaning up (not everything) and http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.friendsofgovi.org.uk%2F now says the site is valid.

I found a few errors (and HTML version differences) and corrected those.

Dreameaver checking says it doesn't have any obvious browser compatibility issues.

I also found that the meta tags were in the wrong place - and the style sheet import in the template was in the wrong place (Dreamweaver's fault - strange 'cos I used apply style sheet and that is where it put it - maybe it looks with ref. to meta tags rather than the head tag as it should ... odd though).

I have fiddled with the banner image - unfortunately I was REALLY REALLY stupid as I rasterised and flattened the text in PhotoShop so I can't go back and edit the antialiasing settings. I have done the best I can manually - what do you think Mouser?

Server seems to be up again now.

Is the width fixed now Perry? I increased the margin for the content div and reduced its size by a couple of pixels. As I can't see it on my system I don't know if I have done enough!

[Perry Mowbray]

That's odd - which browser are you using. Here is what it looks like in two browsers on my system with the windows dragged really narrow:

Firefox:  (see attachment in previous post)  Internet Explorer:    (see attachment in previous post)

Unfortunately I can't access from the domain at the moment as the server seems to be down (I can't access any of my domains)

I agree it aint width: IE6 was the only browser they give us at work 

[Perry Mowbray]

Is the width fixed now Perry? I increased the margin for the content div and reduced its size by a couple of pixels. As I can't see it on my system I don't know if I have done enough!

Not at work any more Carol, so I can't reproduce it: it's fine in FF and IEtab here 

Would you like my opinion on your banner text? I'd go back and redo it if it was me: it'd be the first thing I saw on the site each time I visited 

[nudone]

looks to me like you've got the old internet explorer column drop problem.

make the image 'kidsatschool.jpg' a bit smaller and it won't push out the column and make it drop.

probably stick a bit of space between the top banner and the link above it also (the registered charity bit).

redo the text on the top banner when you can.

(maybe consider resizing the heads so that they are in proportion to each other - i'm not too sure if that is necessary. if resizing obviously looks better after you've done it then use it.)

and, don't trust dreamweaver to get it right for you. you'll soon find that when you are trying to accommodate all of the browser problems that dreamweaver is very ignorant.

[Carol Haynes]

OK I have placed 'kidsatschool.jpg' in its own div, reduced it a bit and centred it.

I have a VMWare IE 6 running and it seems to work OK now. It was just the index page that seemed to cause an issue.

I have now removed the top banner (didn't like it - and it got blocked by AdMuncher because of its size - so probably other ad blockers wouldn't like it either) and added a bit of padding at the top of the page. Strangely the padding available seems to vary from browser to browser so the 'gap' in Firefox is more pronounced. I have placed the ad in much smaller form in the menu and it takes you to the original ad on "You Can Help" page using an anchor link.

I'll redo the banner (and this time I'll keep the PhotoShop source - not the first time I have done that - you think I'd learn!). I agree it looks fuzzy.

Thanks guys for all the suggestions and help. Keep 'em coming.

[Perry Mowbray]

Rats, second attempt...

Looking good Carol!! 

Had the time to leisurely wander through your site, and here's a few thoughts...

• The top of the menu-bar and the main content are not top aligned
• Have you thought of adding a border to your photos? I think it adds a little extra definition (depending on your colour scheme of course)
• Have you considered a colour difference between the "body" of the page and the border (that you don't use)? I think it adds more definition to your content.
• The News page is loooong. Have you considered a wee index at the top, maybe with a teaser?
• I'd suggest offering the newsletter in HTML as well as downloadable PDF. My general rule is that everything on the site should be able to be displayed in the browser.
• The NGO Links is a loooong page too. Sorted alphabetically. Is that best? It depends on what people are looking for: if it's a name then alpha is good, if it's a service, then maybe categorized is better?
• Your Email Form does not have any validation: though I like your tool tips!
• Have you thought about making the menu bar links more blocky? If you made it a DIV rather than a P then the "block" could hight
• Also on the menu bar, there is no visual indication of what page you are on; plus the link to the page you are on is still active.

Sorry if it's too pernickety (it's a fault of mine  ): I think it's looking really good.

Also, Nudone's comment about re-doing the banner when you can is perfect!

[Carol Haynes]

Yes I am aware of the news and links page problems.

I can't figure out how to get the menu and main body aligned correctly - there doesn't seem to be an border or padding on either so I can't see why they don't align.

I agree about the PDF version of the newsletter - unfortunately I am not editing or supplying the content. Hopefully it will get sorted.

The email form has validation - not sure what you mean. It only accepts an email address in valid format, and insists compulsory fields are filled.

I agree about the menu - maybe I will change that altogether. It was done for speed and it needs to be better.

[Perry Mowbray]

Yes I am aware of the news and links page problems.

Sorry: just thinking out loud...

I agree about the PDF version of the newsletter - unfortunately I am not editing or supplying the content. Hopefully it will get sorted.

Always a problem: do you need to invest in a PDF converter? There is a deal about to happen with Software995??

The email form has validation - not sure what you mean. It only accepts an email address in valid format, and insists compulsory fields are filled.

My mistake then, sorry. I didn't go all the way through it, just typed and exited the field. You have validation on Submit.

I agree about the menu - maybe I will change that altogether. It was done for speed and it needs to be better.

What you've done is great. It's generally the case, especially with time limits (as you mentioned in your original post), that you need to get the project over the line. Fine tuning can come later...

[Carol Haynes]

Menu is now an unordered list - took me a while to work out how to sort out the correct CSS tags though!

Pictures in main body text are all now frames

The top of the menu and text are better aligned (though still not perfect).

Re. PDF stuff that is a problem that will be passing soon. Ideally the only PDFs on the site should be sponsorship forms and membership forms that need decent print quality. The content editor for the site is getting to grips with cutting down the rather verbose style of previous articles. Hopefully the whole thing will become a bit more 'multi media' orientated. Personally I'd rather look at pictures, find out about the kids and tecahers and their fmilies, hear them singing etc. than read long reports.

I have an idea for an article to follow the journey of some friends who delivered minibuses to the school from the UK by driving across Spain, North Africa and the Sahara - it would give a sense of place and I think could be interesting.

I am thinking about how to indicate the current page on the menu - not sure what would be the easiest way. One thought was to put each menu entry into a separate div on the template page and then on each page override the background colour of the div in the stlyesheet by a local page CSS tag. I'll have a play. Anyone got a better solution?

[Perry Mowbray]

Menu is now an unordered list - took me a while to work out how to sort out the correct CSS tags though!

Does the trick though: much easier to select.

Pictures in main body text are all now frames

Do you think they present better with a frame? I do 

The top of the menu and text are better aligned (though still not perfect).

The pages with a heading look perfect to me!

Personally I'd rather look at pictures, find out about the kids and tecahers and their fmilies, hear them singing etc. than read long reports.

I'd be putting the long reports on a different page, so that people can still read them if they want to.

I have an idea for an article to follow the journey of some friends who delivered minibuses to the school from the UK by driving across Spain, North Africa and the Sahara - it would give a sense of place and I think could be interesting.

Sounds wonderful! Where can we join up??

I am thinking about how to indicate the current page on the menu - not sure what would be the easiest way. One thought was to put each menu entry into a separate div on the template page and then on each page override the background colour of the div in the stlyesheet by a local page CSS tag. I'll have a play. Anyone got a better solution?

Thats generally what I do, all depends on the style of page that you're following.

Following on from what you've done so far, I'd make the background something like a darkish grey: so highlight is black and current is a "lighter black".

[Carol Haynes]

OK - I have removed the roll over on the menu but it now indicates which page you are on.

Getting things to line up is enough to drive you to drink!

Look at these two:

IE:   FF:

They are both to the same scale and same bit of page:

• top spacing is different
• div text alignments are completely different from the menu to the main text
• doted bar is a different style!
• even the background colours look different to me (though it is probably my eyes!)

[cranioscopical]

Haven't commented before as I don't know this stuff at all, but here's a non-expert (you can say that again!!) pov.

I like the site.  I think the principal images are well chosen and engage attention.

Have you considered a colour difference between the "body" of the page and the border (that you don't use)?

FWIW,
I second that.  Something about the page was disturbing me and that's it.

Also agree about redoing the banner, I don't think your improvement to the text is enough, Carol.  (Personally, I quite like the different head sizes, though.)

I wholly understand your dismay about having to recreate the file (pity about the flattening, you need something to back up every iteration of that stuff  automatically, eh?) but consider the fact that you'll be using this as a 'reference' for future clients. Every improvement you make both upgrades this site and enhances your sales tools. It has to be worth it in the long run.

(Am I the only one who doesn't like that image of the wall?  It's hard work to make out what it says.)

[Carol Haynes]

Pink excess space now (matches current page marker in the menu - taken from one of the kids clothes).

I agree the wall isn't ideal but it is a real symbol of the school and what it stands for.

Try viewing the page with page reader software and it will read the wall to you

[Carol Haynes]

Here's a poser - can anyone help ...

If I open a website in IE 7 and tap CTRL + repeatedly the page scales up brilliantly.

If I do the same in FireFox 2 the text scales up but other page elements are unaffected.

How do you code so that a whole page will scale properly in both IE and FF (and Opera, Safari etc. if it comes to that)?

[jgpaiva]

Carol: that's just ff2's default behaviour, it's supposed to work like that.
On ff3, that isn't the default anymore, but it's still available as an option.

[Carol Haynes]

Thanks.

[Curt]

I think it is a fine job you are doing, Carol, and the page is really getting better and better. However, a minor detail: Do you have the original wall.jpg image? The displayed copy was compressed wrongly or too hard; the text is a little too hard / difficult to read.

[Carol Haynes]

Thanks - I'll see if I can find the original

[Perry Mowbray]

The displayed copy was compressed wrongly or too hard; the text is a little too hard / difficult to read.

I thought it was too sharpened? Though I didn't look closely.

I agree: it's getting better and better!!