View Full Version : Third website, one page design.

04-23-2007, 12:30 PM


Any comments on this one page site greatly appreciated.

04-23-2007, 12:54 PM
I like it, the colours go well, layout is nice however the only thing I don't like is the top header, I don't like how the height of it is bigger on the left side than the right.

Good job though :thumbsup:

04-23-2007, 01:52 PM
Thanks napster. The original idea for the layout was that I would get the logo to fill the full space but I think it looks disproportionate when I do, I'll try and fill it some other way maybe. Thanks to you anyway. :)

04-23-2007, 06:54 PM
i like it it looks clean

04-24-2007, 03:21 PM
Thanks for your comments. Anyone know how I get stop the footer from being moved down about 20px in IE?

04-24-2007, 06:04 PM
Thanks for your comments. Anyone know how I get stop the footer from being moved down about 20px in IE?

That is because #maintenenacecontent and #makeoverscontent are about 20 pixel too long, but as the content stops firefox pushes the footer below that... IE, however, doesn't. I think it may be something to do with your padding or margin.

Ermmm... it looks okay other than that, very in your face :p and you have a couple of minor validation errors that could do with fixing. But generally, okay!

04-24-2007, 06:58 PM
Thank you ahallicks. Much appreciated.

04-24-2007, 08:49 PM
Generally the layout looks pretty clean and clearly ordered. However, in my opinion it could have some more room to breathe (according to what we’ve learned from the Web 2.0 website (http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm); thanks for that resource by the way – don’t remember who posted that in the other thread).
You could space out the left blue box and the header a little more. You have enough room for that. Ans also having the left column (blue box) somewhat narrower will give the main content more room and it doesn’t look too packed with information.

I just noticed that you have the entire boxes as background images – not a good idea as it makes your layout too static and if you wanna make small changes (like changing the column width as I suggested) you have to change all the graphics; or if you (or your client…) wants to have one column in the main content section instead of two that will only be possible after editing the background.

3D effects are nice and good but only if used sparingly (http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm#rich-surfaces). I have a small problem with the blue boxes and the header all having a drop shadow (and the main content as well). Maybe a shadow just for the header would be sufficient…
As we are looking the header already I think a really nice (Web 2.0) thing would be a mirror effect for the comany name (commonly known as the “shiny table effect”). And since the subject of the website is about glazing I think that would match really good. :)

Then the page background and the main content area should have a different background color. You can have either one of them white but not both of them. And the light gradient on the main content area is too close to the page background in terms of contrast to be distinctive.
The same goes for the header: make it distinctive from the rest of the page by choosing a contrasting color.

I don’t really like the big blue box at the bottom. That makes the page look somewhat cheap in my opinion (reminds me of phone sex hotlines :D). OK; big bold letters are good but make it look more appealing. Leave the word “hotline” out and apply a light gradient to the box background, that gives it some subtle… uhmm… well, you know what I mean.
Another idea would be to just scrap that blue box at the bottom and put the phone # in the header (a little smaller and where the header currently has the “empty corner”). As mentioned before: clearly separate the header from the content.

I don’t see any navigation? Is that all for that company or is there more to come?

Also if you want a Web 2.0 look and feel your star should have smaller “spikes”. Look at the Wordpress (http://wordpress.org/) website or here: http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm#star-flashes
And also the star has some subtle gradient in most cases to make it look more appealing.

As to your code this:

<div id="header">

is a big NO-NO!
Don’t use empty elements. Design the content, not the page. (http://www.webdesignfromscratch.com/current-style.cfm#designthecontent) That means the first thing you need is actual content that you can style. So the least thing you should have in your header is a headline with the company name or the website title. All that is part of semantic website development. You structure your content logically and then style the page (that means you use the elements you’ve got and don’t add empty elements just to add a style). Look at the CSS Zen Garden (http://csszengarden.com). That’s the way to go.

Good luck. ;)

04-24-2007, 10:20 PM
Well Stephan

That is very kind of you to offer such constructive criticism. Thank you very much. I am perosnally pleased with the sites look as is, so probably stick with it. But nevertheless I have taken everything onboard and will be sure to take heed of your critique in future sites.

I must go back and say it is incredible how supportive people on these forums are and I am very grateful for such a healthy community and hope at some stage I can return the favor.

04-25-2007, 02:12 AM
I think first impressions are important... and to me when I first look at it... the sites layout can not be assumed. You have to see what is going on.

It also does not look like a site which suits a glazing company... as a customer I would probably want something a little more professional and less artsy.

04-25-2007, 10:35 AM

Thank you for your input as well. I did actually suspect the artistic side why have been a slight misfit with the nature of the company. I have actually shown the client the site and he is happy with it. I've cleared up the validation problems and is now up and running.

I think that if I create more sites I will gradually attain the skill to match the client's business with the look of the site.

Very grateful once again, you shall have a reputation boost too. :thumbsup:

04-25-2007, 06:27 PM
I found the contrast of white text on the green burst a bit hard to read. Other than that I liked the main page.