Originally Posted By: Chris Morrell
This post was automatically imported from our archived forum.
They say a picture is worth a thousand words, so I've sketched out a few changes that would make your site look, in my opinion, 100x better. I've not changed your design much, just illustrated ways to make your design work better. (Give it some time, I've had to leave the quality somewhat high so that you can see the images. The 2 images here should take approx 5 sec. each to load. The bigger images will take approx 11 sec. each to load).
Here's your original site:
Here's your site after my suggestions:
Here are my 5 comments (marked on the image):
1. Let people know what page they're on by highlighting it differently than the other menu items. This is often done with "tabs," but in this case, simply setting that menu item's background to white makes it appear to be part of the current page, rather than the menu.
2. Use rollovers (or even better, CSS hovers) to make your menu items highlight when you put your mouse over them. That lets people know that they're clickable, and makes your site easier to navigate. Also note how I changed the text to white. This is much more readable.
3. Effective use of images is a must. The car really stands out and makes you look at what's next to it. Don't use too many images, but instead use them to draw the reader's eye to where you want them to look.
4. Get yourself a logo to incorporate into your header. It looks much to bare currently. Also, I'd recommend dropping the current image you have in your header, and using the one lower in your original page.
5. Because your index page has very little text (this isn't a bad thing), drop the NACHI logo & description to the bottom of the page. This is a natural place for people to see this kind of information. They'll acknowledge your affiliations without being distracted by them. After all, your promoting yourself, not NACHI.
A few more comments:
1. You're currently using images to display all of your plain text menu items. This just makes your site load slower, and makes it less accessible to those who use a screen reader or text-only browser.
2. Your page is currently "fixed width" which means that it will remain 770 pixels no matter the size of the viewer's browser window. A typical browser window is going to be 800 by 600 pixels, which means you'll have at least 30 pixels of white space on the right hand side of your page. As you can see in the picture above, it's even more on my screen. This is also an issue for smaller screens. All Macs have a default browser width of 470 pixels, which means that almost 40% of your page won't be visible.
3. Your site is built with tables. Though this is the current standard, I would recommend that any new designs be done with CSS. This will half the load time of your site. It will also ensure that your site looks good on old, current, and future web browsers, as well as handheld devices, et cetera. This is a major undertaking, though. I wouldn't worry about it too much.
4. I would also suggest adding "alt" tags to each of your images. These are an accessibility must, and will improve your search engine visibility on Google. Alt tags describe the image. They also are what determines the tooltip that pops up over images when you hold your mouse over them. Google gives the text in these tags a lot of weight, so by putting "Tri-State Home Inspections, serving..." as your alt tag for your logo, you're improving your search engine ranking for the words in that tag, and also describing the image.
I'm sorry that this was a little long-winded. I just thought it might be helpful to others as well. Your site is quite nice as it is. I think by even making some of the changes I've suggested you can make it even nicer.
Director of Information Technology