Hey all, I have just finished hand coding my first site that validates in CSS and HTML but it would be great to see what others think of my coding and such. Domestic Energy Assessor Please be constructive, thanks!
if you are providing a professional service i think it would be a good idea to spice up your site with some graphics so it will have a more corporate look.
I've been seeing here how hard you've been working on this site. Nice. I know you're not done with all the text yet, but I would give even more info on what you do. For instance, the first page could have a picture of a "knowledgable-looking dude" (this means grey in the hair) standing outside a house with the homeowner, both looking at his clipboard. A few (maybe 3) photos of for instance the blower-door fan being taped in, a person looking at someone's furnace/home heating system, and a picture of an electricity meter's disk would be awesome. A vector graphic on the Learn More of a home (where you can see inside the walls) showing airfllows, with heat leaving through for instance a NON-energy-saving heel truss where the roof meets the wall (I see versions of this at the hippie/solar-energy/green building fairs I go to... always looks cool), where water etc is wasted or arrows pointing out where water/heat/electricity can be saved. The About Us will hopefully have your names and degrees/certifications. I kinda think the main page should have the info about the Home Info Pack sentence nearer the top. It tells visitors that even if they stumbled on this site, they NEED an energy assessment etc. Only other thing I can say is, while I like your colour scheme, I would worry about colour-blind people having trouble distinguishing the dark green letters from the black background. Possibly a white outline around the letters could be a solution. To the red-green colourblind, dark green could be awfully close to poop brown, which isn't the easiest to see against black.
Code wise i think it looks fine but design wise it needs more added especially if your are trying to atract customers
<div id="footer"> <p class="footer"><a href="/">Home</a> | <a href="/what-is-an-energy-performance-certificate.html">What Is An Energy Performance Certificate</a> | <a href="/what-is-a-home-information-pack.html">What Is A Home Information Pack</a> | <a href="/how-to-make-your-home-more-energy-efficient.html">How To Make Your Home More Energy Efficient</a> | <a href="/links.html">Links</a> | <a href="/about-us.html">About Us</a> | <a href="/contact.html">Contact Us</a></p> Code (markup): This should be a list, not a paragraph. You can also safely lose the DIV around your navigation list as well. You also don't need the line breaks or the clear class since you can apply the clear property to the H2 headings directly. I'd seriously take a strong look at minimizing the HTML code independent of the stylesheet, then do the same to the CSS.
All these comments are awesome, I am doing the site for a friend you see. I am more than aware that the colors look awful but the reason my friend wanted the site black was because it actually is an energy saving technique (sounds crazy I know). Check this site out and it will tell you how it is saving money and energy www.Blackle.com Click the "About Blackle" part and read it. I think business sites generally need to be clinical almost, like whites and silvers. Anyway I am going to try and get round to making the code adjustments you have suggested. So anywhere where there is a block of links I should always make it into a list right? Thanks again for all this help.
Nothing wrong with the black -- you are very correct in that it saves energy-- I've taken a Kill-A-Watt meter from P3 International (as well as a normal DMM) and measured television sets. The power consumed goes waaaay down in between commercials : ) I did just check the green on your site for simulating colour-blindness (http://vischeck.com) and it actually still looks readable (the green gets lighter). As for navigation -- if you ever have a bunch of links that a visitor doesn't need to follow in a particular order (they could go to About Us or FAQ in whatever order, or not at all), then you would use an unordered list (ul). In the Lynx browser (a text-only browser), links and sub-menus are differentiated with little plus signs (or whatever you configure it to). UL is standard markup and tells many browsers what those links are. P is standard markup for a bunch of text that isn't a quote. So if there's a bunch of clickie stuff just randomly sitting in a paragraph, it can look confusing (although not so much in your case, since they're seperate from other text and have pipes in between them, good thing to do). The Crusty Old Guys here (and Web Accessibility people) will tell you that when you're coding, use the tag that describes what the content IS or DOES, not what it's supposed to look like (so even if your links look like a paragraph to you, they are a list of links actually and not an informative paragraph). Anyway, white and silver sites get pretty sanitary-looking if not used carefully. A little note on the bottom or in the FAQ about the energy-saving technique would be cute : ) To take Lethal's advice, you could for instance have an outline or a little light reflection on the Green letters, or have thin white (or whatever) borders around stuff. This is best done I think with image replacement techniques (the kind that still leave the text in place for people with images turned off). I like the black but I'm used to reading stuff in the vi editor which is easier on my eyes than TextEditor or Kate.