Hey, it's been a while. Although I don't post here as much as I used to, I still visit regularly too see what designs other people have created. I've not been idle whilst I've been away, far from it! I have been busy studying, and learning the fundamentals of XHTML and CSS, and I feel that I am now at an advanced stage of understanding. I have a new exciting and experimental concept of my own to post in a few weeks, but for now I thought I'd critique Div's
Remus design (with my new found understanding).
Right, I like your design Div, everything looks great, there are a few things I think that you could do differently with the structure and source though. I'm in the middle of creating a web design of my own, so I always look at the presentation, and hope to get some ideas from the code on how that site was created. I do this now with most sites I visit, so please don't think of this as a put down, it’s not my intention to rubbish you creation. think of it instead as helpful advice. If you were to post this on a proper CSS/HTML forum for critique, you could expect a similar response to mine (maybe not as long
).
Although my review looks thorough (sorry about the length
), it isn't. Most of it concerns the HTML structure of your document - the part no one sees, but probably the most important part of the document. I have not made a critique of the overall presentation, because I think the look is good.
Validate! Validate! Validate!
The w3c has two excellent validation services the html service can be found at:
W3C Markup Validation Service and the CSS service can be found at:
W3C CSS Markup Validation Service. use both of these frequently, as they can flag up errors you don't notice in your code, and they will help you achieve the standard (aka !DOCTYPE) easier than if you never used them at all. the first thing I did when I saw your code, was validate it with the W3C markup validation service. After looking at your nested tables layout, I was sure there were errors, and there were - 154 errors in fact! Not all were down to incorrect table design, some were a combination of other things. I then loaded the page up in Dreamweaver to get the unclosed tags fixed - I sure as hell wasn't going to leaf through the code looking for those errors! This of course flagged up the first most important flaw in your tabled design - maintainability.
Maintainability
This site is going to be an absolute nightmare to maintain! It was de rigueur to use tables back in the day, but nowadays, CSS positioning is the way. tabled designs, are slower, a lot harder to maintain, and are not at all accessible. your tabled design actually holds this site back. say for instance the site owner asked you to give each exhaust image a 10px margin, how would you do that? Your using inline style elements (on some images), which are a big no no because you will have to alter the style for each image separately, which (if you have more than a few) will be a right ball ache! if you were to separate presentation from content, then you could style the images separately through CSS, and you may only have to alter one statement for it to change all the images on your site.
Here is some sample CSS:
img {
margin:10px;
}
That’s how simple it is to give each image a 10px margin! Now if the same guy comes back to you later, and says 'Hey, I want a 5px margin and a 5px border too', you spend two seconds altering the above statement, like so:
img {
margin:5px;
border:5px solid #ff0;
}
All images on your site will now have a 5px margin, and a 5px border that is solid (as opposed to dashed, or dotted) and is of the color #ff0 - a rather loud yellow. I suppose, there is no accounting for taste!
CSS is powerful and very time friendly, you should use it as a matter of course!
!DOCTYPE
Respect for adding a !DOCTYPE, it shows that you are attempting to present an interoperable, standards-based web page. I did notice that you had kind of strangled off the full declaration though (by missing the W3C URL) :
Yours:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Actual:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
There is nothing wrong with doing that, but for maximum accessibility, especially for older browsers, it might be advisable to keep the URL part of the declaration for now.
Markup Confusion
Following on from the !DOCTYPE declaration, I was a little confused by the style of your img and br tags. they were escaped like they would be if you had an XHTML !DOCTYPE, but you have declared an HTML 4.01 !DOCTYPE. Also, when you escape those elements, you need to keep a space between the end of the attributes, and the closing escape.
Yours:
<img src="http://www.remusexhaustshop.com/templates/001/images/logo-3.jpg" height="168" width="1024"/>
Correct:
<img src="http://www.remusexhaustshop.com/templates/001/images/logo-3.jpg" height="168" width="1024" />
If you intend to switch to an XHTML !DOCTYPE sometime in the future (which I recommend), remember to include an XML namespace declaration in the opening HTML tag, it will aid in interoperability i.e.
<html xmlns="http://www.w3.org/1999/xhtml">.
Images
I thought your thumbnail images were a little iffy, but I couldn't put my finger on the problem. Then it hit me. View image, and you can see that you have chosen to use a larger image, and shrunk its dimensions through HTML markup. this is a bad move! browsers are not very good at scaling images, and that’s why your images look odd at smaller sizes. it would be better, and save you bandwidth, if you were to have a thumbnail, and a full size image, linked to it.
Another thing you need to look at is the enlarge image option. on the Audi 100 exhaust for instance, it only enlarges the overall picture by a few pixels (on other images, it does not alter the size at all!). I was expecting a bigger high resolution image of the exhaust manifold. Realistically, the enlarged image you used could have just been included in the item description.
You’re a little choppy with the old alt description too, it’s there sometimes, other times it’s not. To be on the safe side, always include an alt description, even if it is empty for instance alt="" would be fine. They are not mandatory with the !DOCTYPE you have used, but for future proofability, get into the habit of including them.
Here is an average link for an image on your site.
<a href="http://www.remusexhaustshop.com/ferrari-modena-f131-romulus-dual-tips-round-embossed-remus-sports-label-system-00up...
...-1990031578-p-698.html"><img width="126" height="93" border="0" title=" Ferrari 360 Modena F131 | 3.6L | Romulus Dual 2 tips round 3.31" embossed Remus Sports Label System 00-up [199003_1578] " alt="Ferrari 360 Modena F131 | 3.6L | Romulus Dual 2 tips round 3.31" embossed Remus Sports Label System 00-up [199003_1578]" src="images/199003_1578_b.jpg"/></a>
It could so easily be:
<a href="http://www.remusexhaustshop.com/ferrari-modena-p698.html"><img width="126" height="93" title="Ferrari 360 Modena F131 Romulus Dual 2 tips" src="images/199003_1578_b.jpg"/></a>
First Look at this (I removed the
http://.www part, for obvious reasons):
...remusexhaustshop.com/ferrari-modena-f131-romulus-dual-tips-round-embossed-remus-sports-label-system-00up-1990031578-p-698.html
Is there a reason that you need a link to another document that is that long? I have a 1280x1024px display, and it takes up over 60% of the status bar area when I mouseover the link. On a 1024x768px display, it is nearly 90% - much too long! I always look at the status bar for the destination of a link, I like to know where I am going. The length of your link is totally unfriendly, and makes me feel a little uneasy about where the link is heading.
Next:
width="126" height="93" border="0"
It’s good that you have used width and height attributes, I use them myself, but (as I said earlier) you should stay well away from inline styles, especially depreciated styles like you have used with the 'border' attribute.
Ok, onto the title attribute:
title=" Ferrari 360 Modena F131 | 3.6L | Romulus Dual 2 tips round 3.31" embossed Remus Sports Label System 00-up [199003_1578] " alt="Ferrari 360 Modena F131 | 3.6L | Romulus Dual 2 tips round 3.31" embossed Remus Sports Label System 00-up [199003_1578]"
You want to look into your use of the title="" and alt="" elements in regard to how you have used them for describing the image they are related to (this image has no alt="" but others do). Personally, I think that you have used too much information within both elements - you in fact are using the whole description of the item, which overflows the size of the tooltip (aka title=""). I must also assume that it might also be too big for the alt="" attribute, which will, in turn, hurt accessibility. Try to keep both the title="" and alt="" attributes concise, and relevant.
Tables vs. CSS
Your CSS markup is a little patchy too. you’re using a combination of inline and linked styles. you should really be only using linked styles, as this will reduce the amount of changes you will make in the future, save you bandwidth, and save headaches further down the line. If you decide to alter the value of an element through CSS (at a later date), you may have a problem with specificity.
CSS styles cascade that is why they are called cascading style sheets! Styles you include in a linked stylesheet, are superseded by a style block in the head section, which in turn is superseded buy inline style definitions. So even if you declare a new style definition in a linked style sheet, it would have no effect on an element you were targeting if that element had an inline style - You have this problem on many elements.
As well as using a linked style sheet, you want to seriously look into creating a new design that is not based on tables. CSS is mature enough, and powerful enough to create a design identical, if not superior to yours. That design, would be lighter, more interoperable, accessible, and most importantly, a doddle to maintain and update. Tables should only be used for tabular data (as they were originally intended), and nothing else!
Further Reading
If you would like to learn more about how to create valid, accessible and future proof designs, here are a couple of educational, and inspirational websites, that are part of my web design knowledge base:
A List Apart
Aimed more at web design professionals than enthusiasts or beginners, A List Apart, is still a good solid reference if you are looking for information regarding web standards and accessibility. They have a wealth of knowledge that spans the length and breadth of design creation from initial concept, through to final presentation. There are literally hundreds of articles written by many of today’s best web design professionals. A must visit!
W3C Schools
This place is great! If you’re looking to expand your rudimentary knowledge of any part of web design, this site is for you. I learned the basic concept of XHTML, CSS, JavaScript, and PHP here, and I still go back if I need a little refresher! A great site, and another must visit.
CSS forums
This forum is great, and you can be assured of plenty of responses to your queries. If you’re stuck with CSS, ask the question here!
Veerle's blog
Looking for inspiration? Look no further than here! Apart from the striking design of her blog, Veerle is a professional web designer. She has many articles on the subject, and a wealth of links to many more on the web. Another must visit site!
If you’re looking into expanding your knowledge, you will have enough information there to get you started, Good luck mate!
blique;' CSS rule, you would then have nice semantic, and italicized quotes which would set them apart from the rest of your content.
JESUS CHRIST!!! GET THOSE FONT TAGS OUT OF THERE AT ONCE JON! THEY HAVE NO PLACE IN ANY XHTML DOCUMENT!
. I got one of my members to sort it for me.
)
Thats all i need to know.
