Hey, I have been messing around with making sites and such for a while now and I have started learning how o make websites following the W3 standards and hand coded but what I want to know is this, what is it that will make my sites feel like they are up to the standard of any other site? This is a latest work of mine Poole Driving Schools I just don't understand what it is that changes your site from amature to great. Be intresting to hear what you have to say on this.
I think the biggest contributing factors are attention to detail, ease of use, and that 'clean' look. Also, I noticed you like using rounded edges, they help by making the site look like it had some planning put into it, or at least effort.
For me a lot of what 'professional' means is the underlying code - more specifically the proper use of indenting. Usually it can be the difference between being called a jack-off by the next person who has to work on the page, or giving them a wow. But also you have SEO concerns, semantic markup, and a host of other things... For example: <div id="header"></div> Should probably be a H1 with the site title in it. <div id="nav-menu"> <ul id="navigation"> <li><a href="/">Home</a></li> <li><a href="/about.htm">About Us</a></li> <li><a href="/prices.htm">Lesson Pricing</a></li> <li><a href="/car.htm">The Car</a></li> <li><a href="/QandA.htm">F.A.Q</a></li> <li><a href="/exams.htm">The Exams</a></li> <li><a href="/links.htm">Links</a></li> <li><a href="/contact.htm">Contact Us</a></li> </ul> <div id="nav-001"> </div> </div> Code (markup): That bottom shouldn't even be needed, and I even question the need for the wrapping div. The classnames are vague, redundant, and in some cases unnecessary. #nav-menu - ok, that's good. #navigation - this doesn't even NEED an ID. #nav-menu ul is good enough. Three bytes in the CSS vs. 16 bytes of HTML? #nav-001 - What the heck is this? I ASSUME that's how you are rendering the bottom of the UL. First, I'd name that nav-bottom if I was to use it. Second, it's not needed. Assign the background of the whole top to the UL, then pad the bottom of #nav-menu and put the image in 'bottom left' <img class="nissan-thumb" src="/images/nissan_thumb.gif" alt="Nissan Almera" /> <br /> Line break after a perfectly good class - that's what margin-bottom is for. <h3>Welcome</h3> Your first header tag on the page is a H3?!? Not good. That should probably be a H2 if you make the header DIV above that a H1, otherwise this should be your h1. <span><strong>01202 733991</strong></span> Uhm... ok. Not sure what you are trying to accomplish there, but it looks like something that should have a class instead of strong tags. (or just use span and set font-weight on the span - not that I'd use span) <div id="footer"> </div> <div id="footer-links"> <br /> Don't know what that empty footer is for, but from the layout there's no reason for that to exist. Footer-links should probably be inside footer as a UL, but then we don't really even NEED a class then. Did I say list? What's that bottom part again? ... and WHAT is with all those stupid line breaks BETWEEN PERFECTLY GOOD PARAGRAPHS?!? Double up on your margin-bottom if you want that - or use padding instead of margin so they don't overlap. Still, the code is fairly clean and overall isn't too bad compared to most of what's out there. We're talking common problems, not total train wreck. From the appearance standpoint, you've got some odd spacing issues that make it look less than professional in my mind - the large gap next to the menu for no reason for example, as well as the excess padding above the Welcome H3 looks more like an error than 'style'. The subtext in the header should probably be pushing the actual title upwards, right now it looks 'off balance' and I'd darken up that text and the copyright text as they are too low contrast making them difficult to read. Your links in the footer lack a mouseover effect - underlines are fine for the most part, but people have come to expect mouseover effects on links, even if it's just a subtle color change. The choice of fonts, being fixed px in size is also problematic as it means people on large font machines (like me) are diving for the zoom control the moment the page loads. On that note I would ditch the fixed-width layout for a fluid or semi-fluid... given the lack of content on the pages, semi-fluid supporting 600 across up to 1024 (or slightly less) would probably be the best choice. The 'contact us' page shows a flaw in your menu - are you using left instead of padding-left or margin-left on that? If so that explains the layout being broken. Oh, and forget not the entire layout is broken in IE6... when the page layout shouldn't be complex enough to break IE6 given you have a valid doctype - this probably means ... huh, I can't even figure out how you are indenting that menu - that can't be good. LI doubling? Most likely, those LI need to be 'hard set' to display:block for IE. (wierd since that's supposed to be the default state, but hey, it's IE) On the subject of the CSS - you should also be targeting media types. A professional page IMHO should have one stylesheet for 'screen, projection', another for 'handheld', and a final one for 'print'. I wouldn't worry about TTY, embossed, braille, tv or aural since the first two are nearly nonexistant, and the latter three aren't even supported by the devices/software FOR that. (yet, if ever) But, YMMV.