Rate My Site Please!

silurian1980

Hey lads,

Would love some feedback, if you have the time, of a site I made earlier in the year www.citypowerboatschool.com. I'm just starting out and it's one of my first pro sites. Have a look at my portfolio site too, www.paddylawlor.com.

All criticism welcome.

Cheers

Paddy

donnaille

Very Nice, some good work there just curious about the Wordpress icon on your portfolio page should that link to your blog or something?

mewso

I'll give you some feedback but I will only comment on the actual html/script being used. The site itself looks fine to me but my business is not design just development.

Fussy point 1. People always take exception when I say this but I firmly believe it. Your doctype is xhtml transitional. For starters transitioning to what? Secondly as this page is being served as html not xhtml-xml why not use html 4.0 strict as a doctype. Unfortunately most software these days is to blame spitting out the xhtml transitional doctype becuse it's "cool" to use standards.

2. Your stylesheets are in the root folder. Just for neatness sake and so your designs don't get too messy I would follow a folder convention. For me I usually put my .css in a css folder and my .js scripts in a js folder. Just helps to keep things organised.

3. This:-

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

suggests to me you are using dreamweaver which uses this god awful outdated way of doing image swaps instead of using css - example - http://brassblogs.com/blog/css-image-swap.

4. Despite the better option of using a css image swap it's a major accessibility issue to use images for text. It's very easy to make your links text, put an image as it's background and do a similar css image swap as above while making it easier for someone using JAWS or other screen readers to navigate your site.

Fussy point 5. I am a very strong proponent of unobtrusive scripting. What this means is that first and foremost you get your site working nicely without script then layer the script enhancements on top of the page in such a way that the page will continue to work with script turned off. I would assume as a designer you have the web developer toolbar on firefox which will allow you to disable all script so that when you refresh you can see how it looks and behaves without it.

One thing I noticed with script off is that some of the fancy tooltips are visible and kind of mashed together and unreadable. Again there are ways around this. Making the tooltips invisible by default (using css) and then having your script display them when needed means they don't appear with script off. Alternatively make sure they look fine with script off by styling them to appear where you want on the page then the script can hide/show them where necessary while they look fine with script off.

6. div madness as I call it. Web standards did plenty of good things but one bad thing it did was make everyone go overboard with divs. The idea with standards is use good semantic code. Divs are fine where needed but there are more appropriate elements in some cases. Example:-

<div id="address">

How about using the address element?

Another common example I see a lot of is <div id="nav"><ul>.....</ul></div>
Theres no need for that div except in some extreme cases. The ul can be used on it's own and styled accordingly. While we are at it we can use some better id values here too:- <ul id="primary-navigation">... and so on. Going overboard on divs is just as bad as going overboard using tables within tables and so on.

7. The site title should wherever possible be a header (h1,h2,h3 etc.) element. I know it's awkward when you have a lovely image you want use but from an SEO point of view actual text is ideal. Again it's possible to have the lovely image as a css background for the header. Generally I would use <h2>My Site</h2> for the site name on every page and <h1>My Site Page</h1> for the specific page title. This is great for google too and nicely semantic.

8. Proper use of H elements is really really important imo. As in the example above and for users of screen readers again (you can guess accessibility is important to me) who love to be able to navigate a page quickly by skipping through header elements. I see no H elements at all on the page. It's excellent for semantics:-

<h2>My Great Site</h2>

<h1>My Site Page</h1>

   <h2>My sub-header</h2>

      <h3>My sub-sub-header</h3>

   <h2>My second sub-header</h2>

O.k. end of overly fussy examination of the html.

EZeeBOS

I think both are quite good. Fareplay

silurian1980

Thanks mewso for the detailed crit. It is very informative and helpful. I intend to to do a full validation on my next website.

I will be using the css based nav techniques next time too.

It is very useful having a programmer look at the code as most of the time people only consider the aesthetics.

Many thanks, much appreciated!

P

mewso

I'm a bit of a fussy bugger when it comes to html/css/js so most of what I wrote are recommendations rather than "laws". I'm fully aware there are many folks out there in the "if it does what it says on the tin" camp and thats their choice and it's hard to argue with if they know their audience etc. so it's very much a preference thing.

Mick Regan

Hi Silurian,

A few immediate thoughts...

Would definitely agree that the 3 centre columns (home page) should be text based (better seo, easier to read etc), and maybe remove the underlines as they could be confused for links (emphasise or bold instead?).

Looks like there is too many words on your meta keywords tag, generally recommendations seem to indicate max of 10 or so with little repitition.

Large header area on home page looks good, but wondering if secondary pages should have a smaller header so that visitor does'nt have to immediately scroll to read content.