can you critique a website design?

[mlegg]

I made a website for my buddy's business a while back. I will be doing an update soon for the product lines and thought maybe a few small changes.
The site is http://nationalkitchencabinets.com/

thanks

if this is the wrong forum please move it to the correct one

[molendijk]

Looks good I like the colors and the composition of the pages.
There's hardly flicker on page transition, even with Google Chrome and IE9.
The site has been created with large screen resolution in mind. On smaller windows, there's a horizontal scroll bar. Have you envisaged to use percentages for sizing the content?
Arie Molendijk.

[jscheuer1]

We generally discourage this sort of thing. But for you we will certainly make an exception in this case. And this is the right forum for it. When I have more time I'll comment more extensively.

For now I'll say what springs to mind. It seems clunky and boxy, not enough rounded corners. It takes too long to get to the product images. And I get the feeling it takes awhile to get to a lot of things. Basically too many pages and/or organized with details up front that could perhaps be more off to the side. At least in Opera, Visual Lightbox seems sluggish. I'd look into either updating the jQuery version if that would help and still work (might, 1.7.2 is generally compatible with scripts using the 1.3.2 version that the site employs there and has a faster css engine), and/or perhaps using another faster box type script.

[mlegg]

The site has been created with large screen resolution in mind. On smaller windows, there's a horizontal scroll bar. Have you envisaged to use percentages for sizing the content?
Arie Molendijk.
I didn't use percentages, no real reason why not. Would you suggest that I do so?



We generally discourage this sort of thing. But for you we will certainly make an exception in this case. And this is the right forum for it. When I have more time I'll comment more extensively.
thank you


For now I'll say what springs to mind. It seems clunky and boxy, not enough rounded corners.
I made it boxy/square on purpose because cabinets are square. I was thinking like that in my thought process of the look.


It takes too long to get to the product images. And I get the feeling it takes awhile to get to a lot of things. Basically too many pages and/or organized with details up front that could perhaps be more off to the side. At least in Opera, Visual Lightbox seems sluggish. I'd look into either updating the jQuery version if that would help and still work (might, 1.7.2 is generally compatible with scripts using the 1.3.2 version that the site employs there and has a faster css engine), and/or perhaps using another faster box type script.
that is one thing I did want to do is change lightbox script for the door styles

[keyboard]

Looks pretty good, but I've got a few suggestions:

In my opinions, the main content window contrasts to heavily to the background... have you thought about putting a border on in?

Also, that background colour (the red) is a bit bland... I'd suggest putting a textured background image instead (after a quick google search; http://www.koksgiganten.se/natbutik/images/fprov-mahogny.jpg; something like that...)

One specific note; on this (http://nationalkitchencabinets.com/order.html) page, I don't really like the "1) MEASURING YOUR KITCHEN:" Subheading style... I'd get rid of the red background behind the text and try something a bit different...

One more specific note; when you're on a page, it'd be nice if the corresponding navmenu link was lit up...

Oh and I'd move the About us on the navmenu a bit (inbetween Home and Products)

Otherwise, I quite like it!

[ajfmrf]

Personally I like to keep my web pages to the size of the screen so scrolling is not needed to see what is on the page(most,not all of my webpages adhere to this thought)

I like the photo display used.

Overall the site was good

[mlegg]

smaller windows, there's a horizontal scroll bar. Have you envisaged to use percentages for sizing the content?
Arie Molendijk.

how can I change my css to do this?
http://nationalkitchencabinets.com/design.css is the location of my css file


Looks pretty good, but I've got a few suggestions:

In my opinions, the main content window contrasts to heavily to the background... have you thought about putting a border on in?

Also, that background colour (the red) is a bit bland... I'd suggest putting a textured background image instead (after a quick google search; http://www.koksgiganten.se/natbutik/images/fprov-mahogny.jpg; something like that...)

One specific note; on this (http://nationalkitchencabinets.com/order.html) page, I don't really like the "1) MEASURING YOUR KITCHEN:" Subheading style... I'd get rid of the red background behind the text and try something a bit different...

One more specific note; when you're on a page, it'd be nice if the corresponding navmenu link was lit up...

Oh and I'd move the About us on the navmenu a bit (inbetween Home and Products)

Otherwise, I quite like it!

I LOVE the mahogany image for a background. I am definitely going to use that!

1) MEASURING YOUR KITCHEN:" Subheading style will be changing.

the corresponding navmenu link was lit up... I'm not sure how to do that :confused:

[keyboard]

Try adding

#current {
color:#ffffff;
background:transparent url("images/hmenu-sel.jpg") repeat-x top left;
}

to your css... you've already got the #current set up for which ever link is currently active...

Did you make this site from scratch or revamp it?
Keyboard1333

[molendijk]

how can I change my css to do this?
Replace the top lines of the css with this (this is only an approximation):


body {
margin: auto;
background-color:maroon;
background-repeat : repeat;
position:absolute;left:18%; right:18%;
}

#mainPicture {
position:relative;width:100%; height : 235px;
width:100%;
padding-top: 0;
margin: 0;
}

#nav1 {
background: transparent url(http://nationalkitchencabinets.com/images/hmenu.jpg) repeat-x scroll left top;
height:40px;
margin:0 auto ;
width:100%;
text-align:center;
}

Then on the pages where you have the div with id="mainPicture" and/or the iframe for the video player:
The div:

<div id="mainPicture">
<img src="http://nationalkitchencabinets.com/images/KSLogo.jpg" style="position: absolute; width:100%; height:100%" alt="">
</div>
The iframe:

<div style="position: absolute; bottom:40px; width:40%;right:10px;height:40%;">
<iframe title="YouTube video player" type="text/html" src="http://www.youtube.com/embed/uKow1lb4W7k" allowfullscreen="" frameborder="0" style="position:absolute; height: 100%; width:100%; right:0px">
</iframe>
</div>
Arie.

[mlegg]

Try adding

#current {
color:#ffffff;
background:transparent url("images/hmenu-sel.jpg") repeat-x top left;
}

to your css... you've already got the #current set up for which ever link is currently active...

I did that, it didn't seem to do anything. Did I place the line in the wrong spot? http://nationalkitchencabinets.com/design.css


Did you make this site from scratch or revamp it?
Keyboard1333

This was made from a compilations of a few designs I made.

edit: I made a few changes to the site and it's uploaded now. I didn't realize I was using a table on the main page still, so changed it to columns with css. I will work on the page sizing later, thanks so far
Mike

[keyboard]

ok... instead of the earlier css I posted, add this -


#nav1 ul #current a {
color:#ffffff;
background:transparent url("images/hmenu-sel.jpg") repeat-x top left;
}

[mlegg]

I just added that but now no matter what page you are on, the home page button stays highlighted. :confused:

http://nationalkitchencabinets.com/design.css is where the newest css is located.

[keyboard]

ahh...oops... my mistake :D

On each of your pages, you have to go through and make a small change;


<div id="nav1">
<ul>
<li id="current" style="border:none">
<a href="index.html" shape="rect">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="order.html" shape="rect">How to Order</a></li>
<li><a href="testimonials.html" shape="rect">Testimonials</a></li>
<li><a href="about.html" shape="rect">About Us</a></li>
<li><a href="contact.html" shape="rect">Contact</a></li>
</ul>
</div>

On products.html should look like


<div id="nav1">
<ul>
<li>
<a href="index.html" shape="rect">Home</a></li>
<li id="current" style="border:none"><a href="products.html">Products</a></li>
<li><a href="order.html" shape="rect">How to Order</a></li>
<li><a href="testimonials.html" shape="rect">Testimonials</a></li>
<li><a href="about.html" shape="rect">About Us</a></li>
<li><a href="contact.html" shape="rect">Contact</a></li>
</ul>
</div>

and so on... so all you have to do is add id="current" style="border:none" to the li for whichever page you're on! (I'm not actually sure what the border:none is for???)

[mlegg]

THANK YOU!

Now I think all I have left to tweak on the site is to find a good background wood image and then make the site a fluid width.

[EatOnGoing]

The website looks great.
You might want to add h1 text. sorry if someone else already mentioned it.