Website Review Request

Hello everybody! (first post)

Can you guys take a look at my site and let me know what you think? I am interesting in hearing about the layout, feel, user experience, and please feel free to make suggestions. Don't worry, you won't hurt my feelings. :D

Link (http://www.texascontractorratings.com)

Thanks in advance,
Steve

Nice layout, easy to use and intuitive.

Code: Very nice, although you should really use a doctype.

I'm not quite... "qualified" to review your code, but I have been a graphic artist for quite some time so I'll tell you what I think of your layout, etc.

The top banner is sharp. It has a nice "flow". Or, I guess, nothing seems out of place in other words. The colors are great! I noticed at the bottom you have a orange horizontal line running across the page and I think incorporating the orange in other areas, such as the top, would have a nice effect. I'm taking a guess that you used about ... 3 different seperate images to make the banner's background. Then again, maybe you completely produced it all from ground up. If so, very impressive. None the less, :thumbsup: on the banner.

The layout is simple, and easy to follow. Some may say to simple, but for the sites purpose it suits it just fine.

I can't think of too many things to improve upon "visually" except for the orange bar, and possibly making the horizontal navigation under the banner have rollover changes, such as the text color changing. This may provide some more dynamic to the site and help users out in knowing that the bar is the nav. I realize that it is part of your banner as a whole (I do believe) so maybe what you could do is chop the small slice off under the banner and then go from there.

Well, I probably didn't help, but this is my first 'review' of anyone's site. By the way, good job.

*waits for the coding critics to come in*

Nice layout, easy to use and intuitive.

TY

Code: Very nice, although you should really use a doctype.

I've read a little about doctypes, but have yet to understand what they do and how to pick one. Can you explain or provide a decent link?

Thanks,
Steve

this is my first 'review' of anyone's site

Thank you for taking the time to review mine. I appreciate it. ;)

The banner was made for me by a gentleman on another forum. I cut away some parts and made the nav portion myself. The orange is a reminent of his original design. My point? I am no graphics artist and have no sense of color or design at all, so I could use some advice on how to incorporate the orange into the top banner. :p

Thanks again for your time,
Steve

Originally posted by se4b4ss
Thank you for taking the time to review mine. I appreciate it. ;)


It's a pleasure.

Anyways, some suggestions on incorporating the color orange? Well, Possibly adding the same size of line on the bottom onto the top underneath the navigation. One could go as far as to change the bold text in the banner to an orange gradient or turn the silhouette of Texas to something likewise. Hmmm... would you mind if I gave you an example just editing on top of your image? If you do, that's fine - I was just curious - it would be no personal stab. :)

Hmmm... would you mind if I gave you an example just editing on top of your image?

Not at all, as long as you don't mind if I use your ideas. :D

Thanks,
Steve

Originally posted by se4b4ss
Not at all, as long as you don't mind if I use your ideas. :D

I have no problems with that if you decide to do so...

Here's a quick lil' orange"ed" out version of your banner. It's rough but depicts some ideas.

(The quality is a tad bit on the jpeg artifact side, but only because the image had to be reduced to a max. size to be able to be posted)

Originally posted by se4b4ss
I've read a little about doctypes, but have yet to understand what they do and how to pick one. Can you explain or provide a decent link?

http://www.codingforums.com/showthread.php?s=&threadid=18346

ok, i put in a doctype, made the orange stripe across the top, and created an advertising section. let me know what you think of these changes.

(in a test directory)
link 2 (http://www.texascontractorratings.com/test)

thanks,
steve

Although I don't mind the look of the site, the image maps for menus on both top and bottom is a little bit of an issue.
It is my understanding (and I'll quickly be corrected if I'm wrong) that the purpose of having a second set of navigational links at the bottom of the page was so that there is a plain text alternative for those who for some reason or another cannot use/understand/see you primary nav.
While I'm on the topic of your navigation, the use of image maps absolutely boggles me. They are totally unnecessary in this design, as a styled (CSS) <ul> with <a> links could look exactly the same, while using real text for the menu. That way you could also assign :hover variations to give your user a more immediete indication that their mouse is over a menu item.
If you have any Q's about doing this, I'm willing to help :thumbsup:.

Andrew

Although the layout is fine, the graphics are pretty and the majority of the coding is done quite well, I have to second mindlessLemming on the image maps.
the header graphic takes quite some time to download, and in the mean time nothing is showing, in the header at least.

I'd suggest using CSS styled text links instead of images per mindlessLemming's suggestion and implement the three blue gradient bars as background images for an appropriate container element (the footer as well!). That way, only one tiny image repeated in the x direction could be used, which would reduce download times considerably. Also, specifiying a background color for those bars would ensure the the text in them is immediately visible while the images are downloading.

Furthermore, the body text could do with a little adornment, perhaps styling the headings; while you're at it, actually use headings, for example <h2> instead of:
<p><strong>Our goals:</strong></p>
Talking about this section, such a list can far better be implemented using ul and li elements instead of pre-ing the whole section.

A great tutorial on lists is Listutorial (http://css.maxdesign.com.au/listutorial/index.htm), where you can find info on basic lists, styling lists, horizontal lists and lists as navigation bars and menus.

first off, thank you guys for the great suggestions. i appreciate your time.

before i go asking for help, i'm going to spend some time on the tutorial (thanks ronald) and see if i can do this myself. i'll post some results before the end of the day.

thanks again,
steve

ok, got somewhere but am mildly stumped on a few problems...

link 3 (http://www.texascontractorratings.com/test2/)

1) how do i vertically center the text on my nav bar?

2) in mozilla there is a white bar between my banner pic and the bottom banner nav bar. how do i close that gap?


btw, i am starting to realize that i will need to reduce the size of the banner or move to a hosting company. :eek:

thanks again,
steve

Try giving the <a> styles a line-height or 28px (that's the height of the <ul>).
Try removing the "padding-top: 15px;" from your <a> styles.

those suggestions didn't help...:confused:

let me know what you guys think about this total redesign...

new css layout (http://texascontractorratings.com/testcss/)


thanks,
steve

Hmmm... didn't work at all? Worked for me... Anyhoo.

I like the redesign. ;)

no, button still sticking to the top of the nav bar. here's what i have currently...?


#navcontainer ul
{
margin : 0;
padding : 0;
list-style-type : none;
width : 100%;
font-family : Arial;
font-weight : Bold;
font-size : 14px;
height : 28px;
background-image : url("nav.bmp");
color : #ffffff;
}

#navcontainer ul li
{
display : inline;
}

#navcontainer ul li a
{
text-decoration : none;
color : #ffffff;
border : 1px solid #036;
height : 28px;
}

#navcontainer ul li a:hover
{
color : #000000;
height : 28px;
}

thanks,
steve

It's line-height, and you only need it in the a tag -- not a:hover.

It's line-height, and you only need it in the a tag -- not a:hover.

thanks, g money, that did it.:D

anybody got any ideas on the mozilla horizontal line in my banner?

link (http://www.texascontractorratings.com/test2/)

thanks,
steve

One thing I noticed is that when I click on a link and go a page it doesnt tell me where I am at. You also might want to consider using #f5f5f5,a light gray, or img for you body background....it will bring out your content more.

You're welcome. ;)

Also, not sure about the line-problem, but it might be the fact that you have an empty <ul>?

<div class="headerbox">
<div id="navcontainer2"><ul></ul></div>
<div padding=0 margin=0><img border="0" src="header.gif"></div>

Also, "padding", and "margin", aren't valid attributes. You'll have to put them there like so:

<div style="padding: 0; margin: 0;"><img border="0" src="header.gif"></div>

the empty <ul> is the only way i can get the background to populate the top gradient blue bar. i took it out to test it, but that didn't help.

that other stuff was just there for testing. it didn't help to have it like you said or to remove it altogether....

see anything else?

*edit - this may be a clue...when i removed the center image, there was no gap between the two hor bars.

thanks,
steve

Your top banner is 217px tall. The image contained within it is 153px tall. There's your whitespace done....

Also, your border CSS
border-style : solid;
border-bottom-width: 0px;
border-top-width : 1px;
border-left-width : 1px;
border-right-width: 1px;
border-color : #000066;
can be reduced to
border:1px solid #000066;
border-bottom:none;

If you did this for every declaration you would cut a few Kb and make it neater to work with ;)

decreasing the size of the header didn't help, it just cut stuff at the bottom off...

yeah, i need to clean up my style sheet. i'll do that after baby bath/bed time.:D

thanks,
steve

i noticed that taking the doctype out clears it up....what does that mean?

*edit- i changed to a "transitional" doctype and that fized it.

thanks,
steve

i noticed that taking the doctype out clears it up....what does that mean?
Probably that your code doesn't validate against that doctype. Try and validate it before you start to remove or change doctypes.

Originally posted by se4b4ss

*edit- i changed to a "transitional" doctype and that fized it.


* This should be a note to all new web coders. doctypes serve a purpose...Use the right one and you'll avoid unnecessary stress.:thumbsup:

I don't think anyone's mentioned this yet.

48kb banner image is too much.

Hello,

I saw the link but im a total newbie so cant comment on it. But ive got lots of questions in my head.

Like u had in ure site, an option to register. On clicking the Submit button, a password or a confirmation code is sent to the email mentioned. I want to include this in my site. How to do it? Is it easy?

I also want to include a discussion forum like this one in my site. I have no idea how to do that. I just want to know whether it is easy and can be implemented by a newbie like me.

These things might have already been discussed in some other thread. Does all this require the knowledge of Javascript?

It will require that you have acess to a server-side langauge on your, hosting server, usually PHP, ASP or CGI access.

Javascript cannot do things like send e-mail and save to databases ect. Most message boards, like this one, require the use of a database. MySQL database is one of the more widely used.

heres some links:

http://www.php.net
http://www.mysql.com


If you want to ask about how to implement any of these things on your own site, you should post a topic in the forum that best suits the question. Providing you dont ask someone just to do it for you, people will usually be willing to help out.

Like u had in ure site, an option to register. On clicking the Submit button, a password or a confirmation code is sent to the email mentioned. I want to include this in my site. How to do it? Is it easy?

are you the one who registered this morning with the nonsense username? i take it you were just testing and i can delete that account. :p

to answer your question, no it's not hard. i only knew basic html before starting this site in dec. i'm not saying that it's a professional quality site, but i'm happy with what it is after a month of learning apache, php, css, sql, etc. i suggest reading this and other forums. a lot of the peops who hang here do this stuff professionally and are happy to help out.

48kb banner image is too much.

yes, it is. especially when i'm hosting at home on dsl...anybody want to optimize an image for me? :D

pic (http://www.texascontractorratings.com/gfx/copy of header.jpg)

just optimize the whole thing and i'll clip it down to what i need. i am currently using 760x153...


thanks,
steve