Hi everyone. I’ve been following this forum for a little while, but this is actually my first post. I look forward to learning a lot.
I actually am starting to finalize the work on my first site. I hired a web developer because I’m still not confident enough in my ability to code. Would any of you mind checking out the site so far? It’s not “live” yet, but you can still go take a look at it. All the images will be changed, the homepage image will be a slide show, and there are a couple of other things that will change. I’m curious if the code is optimized at all because I have no idea. I realize that there are certain design elements that aren’t the best, but I’m having to bite my lip some. Also, please be critical while I’ve still got help! I can redirect your suggestions to the web developer.
Errr… can I say that this is the wrong section? This should go to Websites reviews… @spencerlb: if you decide to review your site, you need to do three serious reviews before being allowed to post there…With serious posts that one sentence answers don’t count
OK, in no particular order, here are some thoughts:
You have images that have text content (eg “Welcome to Morrison Properties”) but where you have set alt=“” … that means that anyone with images turned off will see nothing there, and the mighty googlegod won’t see anything either. Anywhere you have text content in an image, you pretty much must include it in the alt attribute.
You’ve set a background image on div#top-menu-repeat, but you haven’t set a background colour. That means that with images turned off, the black background behind is showing through, so the black text is invisible. Any time you set a background image, you should also set a background colour that is similar to the main colour of the image, so that if the image doesn’t load for some reason, the page looks as close to ‘right’ as possible.
Lots of unnecessary nested <div>s. For example, you have
where you just apply the collected styles of the <div>s to a single item. It’s like that all the way down.
CSS stands for cascading style sheets. What cascading does is that any element will automatically inherit properties such as font and colour from the parent element unless you override it. So where you’ve specified the font, colour and alignment in “.top-menu-left”, you don’t then need to repeat it for anything that is within <div class=“top-menu-left”> because it will get it automatically.
Your font stack looks a bit precarious! The reason for having a font stack is so that you can give your “first choice” font, and then a “second choice” for anyone who doesn’t have the first choice one on their computer, and then a “third choice” and so on until you get bored. So the key point there is that the fonts should all be as similar as possible, so that the layout and design doesn’t change significantly as you move down the stack. So with that in mind, Calibri at the top, followed by Arial and Helvetica is good. But take Verdana out, and take Times New Roman out. Verdana - it’s a good font in its own right, but at any given size it looks much bigger than Calibri or Arial, so that will throw the design out of kilter. And Times New Roman (a) looks completely different, so doesn’t fit, and (b) looks crap on websites! You also need to specify a final fallback for anyone who doesn’t have any of the fonts listed, which in this case would be sans-serif. Then just set the font stack once on the body {…}, and all you need to do after that is set an appropriate font-size on each element.
I wouldn’t specify a width for your menu items. The first problem is that the items are different lengths, so when there’s a fixed width (but no outline or background to mark that width) it just looks like they are badly spaced. The second problem is that (on my default setup at least) some of the text is starting to run out of room. Yes, you’ve got the background image on :hover to take into account, but you can easily solve that with the Sliding Doors technique.
Too many different fonts! On the home page, I can see at least 7 different fonts in use. Sure, you want to use one or two different ones in your headings and branding to jazz it up a bit, but 7 is too many, and it looks disjointed and uncoordinated.
The fixed width is a problem - when you zoom in or make the window narrower, the site becomes too wide for the window. Better if possible to avoid setting a width, or at least to set a max-width so that it scales to smaller windows without the need for horizontal scrolling.
On “inner” pages, you’ve still got the “Home” link on the menu bar highlighted - it should change to whatever page you’re on.
You’ve got two “Valid CSS” buttons - they’re the same, but in different colours! Most pro web designers don’t use these buttons any more, so including them is often the hallmark of an amateur or out-of-date designer. There’s nothing outright wrong with it, but why do you want those ugly blobs cluttering up your design?
Right, that’s enough from me … I’ll let someone else pick up from #11 onwards …!
