I don't know what your level is, but it looks pretty decent to me. However I do feel the menu lets it down as it's too plain; looks like anyone could have made this part. An improvement would be to not have the horizontal bevel/line in the title graphic and move the menu up a bit.

Also the 'about us' box goes a little too close to the right hand column, an extra margin-right 10-15px whitespace would make it look cleaner.

Viewed on FF2+IE7, looked fine in both. With regards to level, I always think it's good to take the experience of the designer into account when judging, as it's unreasonable to expect a new designer to compete with the best sites; it's just nice to know. For people with less sites under their belt it's hard to make an awesome looking site, but if they've generally doing a good job they must be heading in the right direction. I suppose why I brought this up was that if I wanted feedback on my work I'd say I've got a fair amount of experience, but don't judge me as someone who has the experience of 50-100 sites. On the other hand you have experts who will want people to say flat out if they don't regard it as AAA work and want very critical feedback.

One other things I noticed is the spambot proof email address. If it's a company site I think you have to make it an old-fashioned mailto link as this is what clients expect. I'd always worry they'd copy and paste the address and not replace the [at] correctly. It's better to get spam than missing out on clients. Something else you should consider is using Javascript to write the address; I'd say this is pretty web-safe these days. Browsers will read it fine but spam bots will probably filter out the code.

<script language=JavaScript>
<!--
var part1 = "mail";
var part2 = '@';
var part3 = "domain.com";
var safe = part1+part2+part3;
document.write("<a href=\"mailto:" + safe + "\">" + safe + "</a>");
//-->
</script>

Hi jsaul,

I agree with ziphyr's comments, visually it is a nice design.

It would benefit from some tweaks to the menu/navigation, even making the link text bold and in capitals would make it stand out against the rest of the page. IMO all the links would benefit from having stronger hover/rollover effects, the current on is too subtle.

Technically there are some issues that need to be addressed:

1. No h1 or h2 tag on the front page, jumps straight to h3.

Suggestion replace:
<img src="images/print_site_header2.jpg" alt="header image" height="129px" width="824px" />
with
<h1><span>Waring Collins: colour printers, exhibition graphics. magazine production</span></h1>

In the CSS have h1 span{display:none;} h1{background: url(images/print_site_header2.jpg) 0 0;}


People with screen readers get the company name and what they do.

2. To be semantically correct, the navigation should be an unordered list.

3. Semantically put contact details are in a div not a paragraph. Better still use the microformat convention http://www.whymicroformats.com/ for in depth explanation.
4. For accessibility all font-sizes should be expressed in relative units throughout rather than in px.

Suggestion:
start the CSS

html{font-size:100%}
body{font-size:67.5%} /* makes 1em= 10px */

5. The image alt tags should be used to describe the image, alt='header image' or alt='item image' is meaningless to someone using a screen reader.

Ideally images used for presentational purposes should be set background images in the CSS. Perhaps the header image here is a suitable candidate.

If you have an image as a link, use the a title tag within the anchor to describe where the link is going leaving the alt tag to describe the image.

Personally I tend to use a similar technique to that described for the h1 when I want to use an image as a link. Along the lines of

<a href="http://www.ezinemarketing.eu" id="ezine" ><span>Web site for Ezinemarketing</span></a>

CSS:
a span{display:none;}
a.ezine{background: url(images/ezine_ad.gif) 0 0, height:188px;width:90px;}

People with screen readers see a list of links.
(note: now I typed that, it probably should be an unordered list.)

6. Use <hr/> to create horizontal lines rather than empty div's.

My comments are meant to be constructive and thought provoking.

As I said earlier visually it is a nice design.

@axe_sosharp
Thanks for all your comments, I really appreciate you taking the time to write such an informative and constructive post.
I will be going through and making the changes you have suggested, I want this site to be as good as possible.
I wish all forum posts were as usefull as that one !!

@varland
Thanks for your comment, I am really interested in a method of getting better control of the fonts in my pages, axe_sosharp wrote " body{font-size:67.5%} /* makes 1em= 10px */ " is a pt the same display size as a px value ?
If not are these two different methods (one to round to pt, and one to round to px) or is it a typo ??
please let me know as I always make a mess of my font sizing and this will help loads I think.

@all
Thanx

jsaul... If you're still confused, think of it this way: by declaring

body { font-size: 62.5%; ... }

you're setting your base font size to 10 pixels. If you want all of your paragraphs to be 12 pixels, you declare

p { font-size: 1.2em; ... }

or

p { font-size: 120%; ... }

If you have a user who has trouble with smaller fonts, your solution is flexible. Maybe they increase their browser's default font size to 24px instead of 16px. Then your base font size is 15px instead of 10px, and your paragraphs as sized at 18px instead of 12px. This is the ideal solution for accessibility because it puts control in the hands of your users. Most users will probably see your default font sizes, but it's the outliers you have to worry about. If you start by declaring

body { font-size: 10px; ... }

all of your users are stuck at 10px regardless of whether they can read it or not. Firefox still allows them to increase the font size, but IE doesn't.

hey one more question,

@axe_sosharp

You mentioned the fact that I have no <h1> 0r <h2> elements on the front page, Is this something that is considered bad mark-up ?

Ie. do you always need to use an <h1> before you can use and <h2> and so on ?

Is this a requirement for accessibility ?

jsaul... Using the higher-order header tags is an accessibility thing. Think of it like an outline... why would you indent two levels if you didn't have anything at the first two levels? I don't know that it's great practice, but what I sometimes do in that situation is create a "h1" tag with the title of the page in it. I assign the h1 class "semantic", then set *.semantic to "display: none" in my CSS. This gives you the semantic value of the headings, but doesn't force them to be displayed on the page.

@varland

Agree with you about accessibility.

Your suggestion is basically as outlined in point 1 of my first post. You use the class .semantic to target the text rather than h1 span.

@jsaul

Not sure whether I am qualified to say it is 'bad mark up' but I would like to hear from those with far more experience. What is definitely bad mark up is to use <hn> to control the size of the text.

In terms of SEO within a document the <hn> tags are the most important after <title>, so care should be taken to ensure they are used correctly and the information in them relevant. I have read that Googlebot in particular gives more importance to <hn> than to the <meta> for content and description.

I am not sure how you approach building your pages. I was taught that the acid test for good xhtml was view the page as a search engine robot would ie. no styling or images (view the alt tags though). The information conveyed should be the same as with the styling and images on, if not go back until it does.

HI all, first post too.

The design itself is really pretty solid. My only suggestion (other than the things pointed out already by other members) is to use more relevant imagery for the home page. This is a print services provider, correct? Use some images of printers, printing, display graphics, etc. much like you have for the other pages. The image used on the home page made me think it was a dating or lifestyle web site. Since you want to have that "human" element in the design try finding an image of someone using a commercial color printer.

Here is a link to an excellent resource for FREE images:
http://www.sxc.hu/

Just create an account and begin searching for images.

Really nice and clean design with minimal clutter. Keep up the juice! :)