scifunk

Hi David
 
I really like your design. It looks very clean is easy to navigate.
 
My only suggestions would be:
 
(i) Consider using less bright shades for the logo and changing the font/text-color of the main navigation bar (as it is a little difficult to read these items).
 
 
(ii) Perhaps reduce the size of the side bar where the adverts are. There is a huge amount of whitespace under the fitness equipment writing. The side bar sections could be split into little groups and displayed in a set space using a javascript rotation.
 
 
From a personal design point of view I would change the default color from a visited link to your standard setting and get rid of the dotted border around any links when they are clicked.
 
I have had a look at the HTML and CSS and made some changes to the main html, header1.css and menu.css. These are enclosed.
 
I had placed the logo and the form inside the header div and changed the CSS accordingly. I floated the logo and the form wraps around it. I then tried to mimick your original locations for the logo and the input. After doing I noticed the menu was below where I expected it to be so I make a couple of tweaks to its CSS too (changing the top from 50 to 20).
 
The HTML suggestions:
 
<div id="header">
<div id="SFELogo"><img src="Images/SFE-Logo.jpg" /></div>
<div id="form"><form action="sphider-1.3.4/search.php" method="get">
<input type="text" name="query" id="query" size="30" value="">
<input type="submit" value="Search">
<input type="hidden" name="search" value="1">
</form>
</div>
</div>
 
The header1.css suggestions:
#header {
width: 850px;
height: 143px;
margin-top: 5px;
margin-left: 5px;
background-image: url(Images/header-bar.gif);
}
 
#SFELogo {
width: 420px;
height: 110px;
z-index: 100;
float: left;
margin-top: 16px;
}
#form {
 
margin-left: 480px;
z-index: 100;
}
#query {
margin-top: 40px;
}
#container {
width: 850px;
}
 
Menu.css:
ul#topnav {
height: 36px;
margin: 0;
padding: 0;
width: 850px;
list-style: none;
position: relative;
top: 20px;
left: 0px;
}
 
Hope that helps,
 
Paul
index.htm
header1.css
menu.css

It is a very simple website, with some really peculiar code, for example you've commented out the the stylesheet at the top for some reason...
 
There are several problems that I have with the site:
Visual:

The very top of the site looks strange because it goes all the way to the top of the browser, if you had a rounded off top, then it would look nicer, the reason being that you've got a space by the footer with rounded corners, so you need to be consistent. The navigation and the header both have some really obvious effects added to them, such as gradient and emboss. When you're designing a website, you want to use as many effects as you can, but also be as subtle as possible, my using a small amount of gradient, small drop shadows and a small amount of emboss, you're getting a good looking header (for example), without ramming it into the viewers face. For example, take a look at this site, the header has a drop shadow and a gradient, without it, the site looks very simple and flat, but by using a small amount, it is very effective, you should take that into consideration. For your navigation, you should always use lists, this helps to keep the navigation in order and help make the code semantic, flexible and accesible, read this article on how you should create navigation using a list. Another thing about the navigation, when the anchors are :active, they should be the same state as when they are being :hover'ed, so make sure that in your css you have a:hover and a:active set as the same state, and not different, because at the moment that's really letting it down. The use of images on your site is good, although it would be better if you had ones that are higher resolution, don't worry about the filesize, most people have broadband now, so as long as they don't exceed around 500 - 1024kb, then you'll be okay. With regards to content, you seem to have a decent amount, however you need to work on your spacial awareness, at the moment a lot of your content is in line with the edges of the content area, what you need is to add margins and padding to your text and images to allow some room, and the site will look much nicer, remember your CSS box model when designing. Once again, this is an issue with over use of effects, remember that they're called 'blending options', so you should use it to blend, and make it look decent, you seem to have used drop shadows where you can, I'd avoid using the drop shadows in the content area, and instead use lines to seperate content. The footer of your site isn't sitting where it should be in Firefox 3, the reason may be because you've used a margin or padding on your text, but you need to fix that because it looks strange. Code:

You have your site set as XHTML Transitional, but your code isn't validating, visit the W3C XHTML Validator to find out what the problem is, the CSS on your validates, but there are still some issues. The first thing that strikes me as odd is the way you've laid out the styles at the top, you've got two <style></style> tags, and a <link /> tag and you only need the latter, because one of your <style> tags is empty, and the other is commented out, so you're wasting space. You can remove the <style> tags from each page. Looking at your code, you seem to have a grasp of XHTML/CSS, so you're making a good start, but there are some things that you need to start doing, for example the anchors (<a></a>) always need to have a title="" in your links, and your images (<img />) always need to have an alt="" attribute, this helps with SEO and for accessibility, so make sure they're as descriptive as possible, as these are some of the reasons your site aren't validating. For your navigation, you've used a div with the align="" attribute, you should never do this, all of your styling and positioning should be done with CSS where it can be, and most of the time it can, so use the margin:0 auto; hack in CSS to make what you need to centre, or even use the position:relative; attribute. As previously stated, your navigation isn't created using lists, and it should be, refer to the previous list of bullet points for the article. For the header of the site, you've used <strong></strong>, you really should use the header tags (<h1></h1>), to make your code more semantic and for it to make sense, plus it'll make it easier and reduce filesizes by a few bytes. You've definitely overcomplicated your website, really a lot of the stuff you've written is a waste of space, you could've massively reduced the amount of code, and I'm surprised that for such a simple site, so much code has been used where it needn't be, you should try and reduce it by learning more advanced xhtml and css. Looking at your CSS now, I can see that you've overcomplicated this too, for example in your body selector, you've used multiple items for margin and background, you can summarise all of this in one by just saying margin:0; and background:url(Jade-conservatories-images/background.jpg) fixed repeat-x; remember that for the future, and also remember never to use JPG as an image for layouts, it's purely for content purposes, try and use PNG or GIF. It's the same thing throughout to be honest, I think you just need to learn a bit more css and you'll start creating some great sites.
Hope that helps.With regards to charging, personally I wouldn't charge anything more than about £200 for that website.

To be honest buddy, with the errors at the moment, you shouldn't be charging that much for a website, you need to tighten everything up first. What would happen if you charged £400, spent the money, and then they found out about all the issues with the site, they could claim the money back from you.