Feedback for a newbie?

[rallred84]

Hey everyone, I have just designed my first ever website and was hoping for some feedback from some people who have been doing this for a while. I bought a book a couple weeks ago and learned HTML/CSS specifically so that I could build a new website for our family business, but found that this is much more fun than I thought it would be… so now I want to learn more!

http://www.abcplumbingdfw.com

Any advice or criticism, positive or negative, would be appreciated. Thanks!

[Waffle]

hey Rallred.

Good Start, I must say! When I started web design, I did much worse than this, so thats good.
A few things I can tell you which I am telling you to help you not to insult just to make clear.

On the Menu Bar at the side… When you hover. The blue background of the text appears, add some padding to this..

So example.

Menu li { Padding:5px; } Or
Menu li a { padding:5px; } for example, i dont know how you’ve styled it .. Didnt look that deep into your code.

But Anyway! Thats a pointer!
Looking at it now, Thats the only point I can see at this moment. Other than that! it’s good.
Good try!

Maybe some work on Colours, Too much blue can make the website unattractive, with webdesign, it’s not all about the coding side to it, design too, but of course you know that!

Hope I helped. !

Waffle.

[whiteInkDesign]

Not crazy about the all the bright blue or the thick black border, but nice work.
Your footer has a table in it with a missing closing tag, I’d recommend getting rid of the table there altogether and using paragraphs or something besides a table as its not really the best choice semantically.

[rallred84]

@Waffle

Thanks for the feedback, much appreciated.

Is this what you were talking about with the padding on the menu bar?

If so, I think it is a good suggestion. Helps the hover stand out a little more. But if you meant something else, please clarify.

Also, I ten to agree with you about the “too much blue” issue, but don’t really know the best way to approach it. I made the body content background white to increase readability, and I like the blue in the header, footer, and nav bar… but I don’t know what to do with the body background color to help make the page pop. I originally had it as a kind of gray, but the lighter blue is MUCH better than that. Any suggestions on improvement here?

Thanks again for the help!

[rallred84]

@whiteink

Thanks, and good catch on the closing tag. Is the best way to get the same effect without a table to use paragraphs with different classes, and then use CSS to determine positioning on the page? (I admit I was taking the lazy route with the table!) :)

Also, same question for you that I had for waffle, bc I tend to agree with you two that I can find a better background than the light blue. What is a better color to go with to make it pop? I have tried grays and lighter/darker blues, blacks, and this royalish blue is the best ive found so far.

Thanks!

[whiteInkDesign]

You’re right on with styling the footer paragraphs. Color wise I’d go with something high-key (closer to white than black).

Some resources for finding colors:
http://colorschemedesigner.com/
http://0to255.com/
http://kuler.adobe.com/

[rallred84]

Awesome whiteink, i’ll definitely give it a look later tonight. Also, you were right about the thick borders. I changed them from 4px to 2px, and it looks much sharper. Will have to go back and touchup the logo to make it match the page, but I do think your suggestion will really help visually (Thankful now that I created my logo in layers! haha).

[Waffle]

Yes thats exactly what I ment with the Padding
However, move you’re styling the wrong bit because as you noticed, you don’t want the text to move on the hover over.

For example!

ul li a{ padding:5px; }

this is gonna style the hyperlink in the list. which creates your problem with the moving of the text,

try..

ul li{padding:5px; }

Obviously just examples but.. you get my gist right?

[rallred84]

Actually originally I had only styled a:hover… If I just add the padding to the a, it gets the effect I think you were talking about:

When I applied padding to the li element, it gave each of my navigation links way too much space on the top and bottom for my liking.

Still trying to find a background color for the body that I like…

[rallred84]

I decided to take away the texture from both the body background and the header/footer/nav backgrounds. Was thinking that maybe this is one of those “less is more” scenarios. The background is still blue-ish, but not quite AS blue. I think its an improvement.

Haven’t uploaded the changes yet (still need to fix the footer table stuff), but here is a screenshot with the changes):

Improvement or is it still off?

Thanks again for the help guys, really appreciate it…

[DogsGhost]

Yea the screenshot definitely looks like a step in the right direction. Less is more.
Also I see you have the text in your div#header commented out. Doing this prevents search engines from reading it, so you don’t want to do that with content information. Instead add a text-indent:-999em to the div#header.

ABC Plumbing, Inc.


Serving the DFW Metroplex Since 1996

[rallred84]

@Dogs

Thanks for that tip, will definitely make that change. This is a very helpful community, thanks to everyone for the tips and advice.

[snillor]

With the changes suggested and made, it’s looking much better.

Maybe sharpen and brighten the image of the van?

[rallred84]

Thanks snillor, will try and do that.

Which reminds me of something else. I have been using paint.net for all of my photo editing, but have also considered getting one of the photoshops if I decide to make this more of a hobby of mine. What do yall use for photo editing? Any other good free or reasonably affordable photo editing software to recommend?

[DogsGhost]

Photoshop is pretty much the industry standard, though a lot of people get turned off by the price if they don’t do design or something related full-time. Adobe did just start some kind of leasing program for their software, though doesn’t look as cost-effective as it should be imo. Anyway, here’s a read, paint.net’s on this list:
http://sixrevisions.com/graphics-design/10-excellent-open-source-and-free-alternatives-to-photoshop/
a lot more recommendations in the comment section of the article as well.

[Author]

Posts