Client Site - Feedback Please

tim

Senior Member
I'm back again!

Another one of my client's sites has been put together.

Here goes nothing ...
= IRO - Institution of Railway Operators =

Any comments or feedback would be appreciated :D (coding or just plain appearance is fine either way)

Don't quite know what to put, apart from it's only a homepage at the moment, I'm awaiting my payment before I go any further with building it in case it's wasted time.

Thanks for your efforts!
 
Nice structure, but the design could still use some tweaking. It feels a little plain to me. Feels a little plain and just a little tight in some places.
 
Well I do like the fact that you have moved to a pure CSS based layout over tables, semantically correct and a definatly an advancement in your skill set.

Coding ~
However there a few coding niggles starting with, what the hell is this:
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>

I know you know how to fix that and why that is bad. :(

This one is new though:
<p class="style9">---------------------------------</p>

Refernace the above element and give it an id, that being ~

<p id="example" class="style9">Tel: 01444 248931<br />
Fax: 01444 246392</p>

Then in you CSS give it a dashed bottom border to pull the same effect off then add some padding as you have removed a paragraph tag so ~
#example{border-bottom:1px dashed;padding-bottom:15px}

Same effect but to better coding practise and reduces your HTML code bloat.

Like the use of lists, right context.

However what is wrong with these?
1. <html xmlns="http://www.w3.org/1999/xhtml">

2. <h2 align="center" class="style14">New Loco Named 'Institution of Railway Operators </h2>

3. <p><img src="media/IRO-naming.jpg" alt="" height="252" width="360" align="left" border="0">

4. <tr>
<td colspan="2" valign="top" bgcolor="white"><div id="txt"></div>

Your h1 does not need a class it can just be refernaced as h1,.style1 in your css this reduces your bloat in your HTML file.

This section is an address ~
PO Box 128<br />
Burgess Hill<br />
RH15 0UZ<br />
United Kingdom</p>
So should go in what kind of a tag to be semanitically correct?

I'm not trying to be funny but I know you know the answers to most of those and I know you want to learn so questions are the better approach IMO.

Design wise
I would add the gap where the roll over navigation goes from the start as this helps to stop the whole design moving down on hover.

The main content area needs more padding at the top as the heading, which is semantically correct I may add, is too flush against the top of the page.

The tabs should have a different background colour and change to white on hover this helps the user know where they are within the site. However the only exception should be the page you are on that should be white to tell the user that this is the page they are on, however what should it not do, that it currently does?

Or you can do the opposite have the tab you are on a different background colour and the rest white, however to be truely effective the drop down navigation would then have to have the same background colour as well and not be white to give the illuision of a tab menu more effectivly.

I would say the roll over navigation also needs about 3-5pixels of padding both above and below the links to make it more readable.

In IE7 there is a massive drop at the bottom of the page you may want to fix.

To follow convention your name and the link to your site should be in the footer.

The main content looks to far over to me try moving it left say 30 pixels as it doesn't look like it aligns properly.
The latest news does not need to be centred

Again with the tabs in the roll over state at the bottom the current tab should be the same colour as the background, IE #FFF, so as to give the illusion of a tab menu.

Never have a link that says here, it does nothing for you in the search egnines nor for the site visitor. For example here you have this ~

Our site has had a recent makeover! If you want to submit photos for banner art for the regional site, click here and fill in the form.

What would be better from an SEO and useability point of view would be this ~

Our site has had a recent makeover!
You can now submit photos for banner art for the regional site.

I didn't check the concralization issues, ie redirecting www. and non www., as I presume you have fixed them with the .htaccess file.

Hope it has helped and has given you some pointers. :)

Jaz

Key:
Purple ~ XHTML
Green ~ CSS
Brown ~ Example text
 
Thanks Jaz. I've been a total muppet with most... no scratch that, ALL of this coding. I really don't know why I haven't sorted it out. I changed quite a bit of it before publishing it here (including hiding the CSS into an external one, getting rid of more "<p> </p>" etc), so I'm really disapointed in myself for not sorting it out in the first place. :down:

Thanks for all the feedback though; coding wise and client's view - wise.

 
Oh and @Jaz: Although I'm not psychically answering your questions, I'm trying to answer them by showing you the updated versions every couple of hours.

As for the <p> </p> I've been placing in, I've found an alternative even without using a CSS spacing code using Dreamweaver (I hope).



I think I've been too proud of this design. When I first did it (about two months ago), I wasn't that great at designing or coding or pretty much anything to do with computers, so to come up with that was ... pfft ... I was over the moon! I guess I got too contented with the whole design; the new ammendments/suggestions however have helped me to stay on track and hopefully get me a better chance of earning some money.

Thanks :)
 
For start off, get some sleep you fool :D

Secondly no worries, learning new techquies take time to master but more importantly they take time to get into using them on a regular basis.

Don't feel down with your self that was not my intention, the important thing here is you have realized where your mistakes are and how to improve them your self and that's by far the main thing here, but also shows an imporvement in your overall skill set as well. :)

Also you have moved to a pure CSS layout, rather than using tables for layout, now I know people who have been coding before I even knew what HTML meant who are still using tables for layout because they can not master CSS, so that is again a very good improvement.

I'll give it another look over this afternoon if thats alright.

Jaz
 
Hay yeah full marks, lol,1-3, the dashed border and the p tag have all been sorted.
However 4 is still left to do.
But you where up to 3am :mad: so I will cut you a break, lol, and put that open table down to be on the to do list TBH. :D

Right the address I will also let you off with due to the fact that I imagine a lot of people never use it, but for good coding pratise you should turn this ~

PO Box 128<br />
Burgess Hill<br />
RH15 0UZ<br />
United Kingdom</p>

Into this ~

<address>
PO Box 128
Burgess Hill
RH15 0UZ
United Kingdom
</address>
</p>

Then in your CSS file you can write ~

address{white-space: pre}

The white space pre will keep the line boundaries and you can then remove the br tags to help to reduce your code bloat even more. If you wanted to instead, and TBH technically it should be in the HTML rather than in a CSS, you could instead forget the CSS rule and just write ~

<address>
<pre>
PO Box 128
Burgess Hill
RH15 0UZ
United Kingdom
</pre>
</address>
</p>

The second one is more semantically correct I suppose, you could argue it though, but both will achieve the same effect.

Design wise now the link to your site is at the bottom I just think the page would benefit from a footer TBH, I don't know maybe a top border of #CCC would do it, not sure TBH but it just needs something I think.

Hope I have been of help. :)

Jaz

Key:
Purple ~ XHTML
Green ~ CSS
 
I inserted the <addresss> tag inbetween and it just inserted a bit space on Dreamweaver, telling me 'invalid markup'. I did obviously finish the tag, but I took it out as it was spacing things out further and doing nothing (according to Dreamweaver)

And yep I'll get onto putting in a footer soon :)

Yeah, about sleeping, I'm never able to sleep if I have something more interesting to do; A WEBSITE! lol
but that wasn't the real reason... I was also watching IT Crowd and Friends Series on my macbook :D

off to peterborough to meet my gran :) at 8.30 after a 4.30 sleep. Hmm.

Thanks for all the coding/design tips, I'll get onto them when I'm back home :D
 
You mad man :mad:

I don't use Dreamweaver but if it apperantly allows you to use align="left" and not flag it as invalid code, well........... as that attribute has been deprecated by the W3C in the last working update of the HTML spec. (V.4.01) and the address tag hasn't I know which I would go with. :)

What should happen, when you view it in an actual browser, is that most will render the address in italics and apply padding around it to make it stand out, it definatly does in IE and FireFox. Dreamweaver well......

If you want to get rid of the default padding place it in a CSS sheet as such ~

address{padding:0;margin:0}


But to me that is semantically correct.

Enjoy your trip anyway buddy, we can argue semantics when you get back, lol.

Jaz

key:
Green ~ CSS
 
I'm back now!

I'm quite ill as my body can't cope with less than the normal 15 hours sleep a day! :)

oh well...

back to the site... I will try again with the address code- another thing it did in Dreamweaver was change all the left column to italics. And I definitely closed the tag. :eek:

I think you said something about a few more niggles you wanted to talk about with me? What were these?
 
If you run each page through the W3C HTML validator it will pick up any coding mistakes, depreacted tags, etc.....

Also change your doctype to strict so rather than having transitional, which allows more errors ~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

change it to ~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

That will help you to improve your coding which if you get a job in web design later on will matter, I know if I took someone on they would have to know their stuff and code to strict and I know a few web designers who are like that.

Try to work through any errors you get and let me know how you get on.

Thats probably the best way you are going to advance IMO.

Jaz

Key:
Purple ~ XHTML
 
Back
Top