Website Review and Suggestions

**grayceworks** · 01-31-2007, 01:44 PM

I'm doing a home decor products site, and would love reviews, ideas, suggestons...

Is it usable?
Is it easy to find things?
Colors and layout --- good/bad?
Products and Prices--- good/bad?

Any other ideas to make it good for searching?

Thanks!

(posting a tinyurl instead of actual url, cuz right now all the search engines find when I search on the site are past posts to web forums from previous designers regarding the site *sighs* )

http://tinyurl.com/3xnfv8

~Grayce

**travelagent** · 01-31-2007, 03:40 PM

It's a pretty decent website, but I do have some issues regarding a few items about the review ... since this is a template site set-up and run by "Zen-Cart", hopefully you have full control over all documents:

1. Get rid of the scrolling "Specials" box in the lower left corner; it slows the site load-time and that's something to consider for those on dial-up if you want to keep visitors on your site.

2. Try and come up with a better NavMenu on the left; it jerks when passing your mouse over and you should never have words wrapping to the next line, as it looks tacky.

3. Your title tag isn't really worded properly, according to the site content -- presently, you have this:

<title>VillaDec, Lamps, Lamp Shades, Furniture, Porcelain, and More</title>

I would strongly suggest you change it to match what's in your leading content statement like this:

<title>VillaDec -- Your Single Source For Unique Home Decor</title>

4. Your meta tag description is wayyy too long, consisting of the same meta tag keywords -- mistakes like that will get you banned in all of the SE's quickly, as they consider that spamming ... the meta tag "description" is exactly what it implies ... i.e.; make a SHORT, BRIEF sentence of what your site is about; typically no more than 7 - 10 words.

5. Same goes for your meta tag keywords -- shorten those up; you're repeating numerous words in there, like "decor", and this too is heavily frowned upon by the SE's.

Lastly -- you might wish to fix the following code errors:

Code:

line 109 column 66 - Warning: <marquee> is not approved by W3C
line 109 column 240 - Warning: inserting implicit <marquee>
line 111 column 1 - Warning: discarding unexpected </marquee>
line 19 column 1 - Warning: missing </div>

**toms184** · 01-31-2007, 03:47 PM

The site took a while to load. I had the feeling that you had no logo until it came up. It is a very attractive site. The font might be a bit small on the Home Page main text. Maybe a little too much "dead air" as the "Specials" window wraps around.

**grayceworks** · 02-04-2007, 04:29 AM

It's not set up by zencart... I did the design/css/graphics work on it, based on their shopping cart system.

Yes, I've had a few comments about the scroll box. I have noticed that it seems to slow things down in mozilla more than IE, and I hate it... lol.. But the owner of the site wanted it there, and there's only so much that I can get a compromise on. I did move it to the bottom of the page, as having it directly under the category links was very distracting.

The navigation on the left jerks? Hmmm... seems to work smoothly on this end, on several browsers... If I have my browser at 800x600 it does appear to jump a bit when the text wraps at that resolution though... I will see if I can widen that column a bit to prevent the text from needing to wrap on the porcelain categories.

OOPs on the title tag... that was supposed to be a -- not a comma there ... It was supposed to read VillaDec -- Lamps, etc................

I had it matching the slogan , but several places that evaluated my site said I should have the title containing the types of things on my site, for example, on product pages, the names of the products are in the title... Is this not right?

as for the keywords... there are many different types of "decor"... and they are not searched for using the same terms... do I need to put them in quotes? I have them separated by commas... for example, "tuscan decor" is not the same as "wall decor" and both of those are now getting good traffic on the site according to google analytics... before I added those, google said I didn't have high enough quality keywords and I had to bid higher amounts, but now that I changed the meta tag keywords, google gave me a higher quality rating on the keywords, so I don't have to pay as much per click...

I don't know what happened to my meta tag description though.. it used to have the correct description there.. .I recently updated the metatags.php page, so I 'll have to see why it changed...

the <marquee> error will go away when I turn off the scrolling box...

on the pages I show, all the div tags are closed... I'm using a notepad that color codes tags and draws lines between pairs of tags, so I can see if any are missed, and I have been through all the relevant pages of code that the page calls and I can't find a missing tag... the referenced div tag is the one for the main wrapper, which would be closed immediately before the body tag, however it is not closed on the same php page that it is opened on. which could account for the error. It is closed on the footer page, while it is opened on the index page.

I will look further at my descriptions, and would appreciate more comments on the keywords part of it, in response to my questions on that... Thanks!

Quote:

Originally Posted by travelagent

It's a pretty decent website, but I do have some issues regarding a few items about the review ... since this is a template site set-up and run by "Zen-Cart", hopefully you have full control over all documents:

1. Get rid of the scrolling "Specials" box in the lower left corner; it slows the site load-time and that's something to consider for those on dial-up if you want to keep visitors on your site.

2. Try and come up with a better NavMenu on the left; it jerks when passing your mouse over and you should never have words wrapping to the next line, as it looks tacky.

3. Your title tag isn't really worded properly, according to the site content -- presently, you have this:

<title>VillaDec, Lamps, Lamp Shades, Furniture, Porcelain, and More</title>

I would strongly suggest you change it to match what's in your leading content statement like this:

<title>VillaDec -- Your Single Source For Unique Home Decor</title>

4. Your meta tag description is wayyy too long, consisting of the same meta tag keywords -- mistakes like that will get you banned in all of the SE's quickly, as they consider that spamming ... the meta tag "description" is exactly what it implies ... i.e.; make a SHORT, BRIEF sentence of what your site is about; typically no more than 7 - 10 words.

5. Same goes for your meta tag keywords -- shorten those up; you're repeating numerous words in there, like "decor", and this too is heavily frowned upon by the SE's.

Lastly -- you might wish to fix the following code errors:

Code:

line 109 column 66 - Warning: <marquee> is not approved by W3C
line 109 column 240 - Warning: inserting implicit <marquee>
line 111 column 1 - Warning: discarding unexpected </marquee>
line 19 column 1 - Warning: missing </div>

**Mike Hazelwood** · 02-04-2007, 07:12 AM

I am pretty new to the site, but I think your site looks pretty good.

**maliksattar** · 02-04-2007, 10:55 AM

hello good site plz clear the topic

**LadynRed** · 02-04-2007, 11:40 AM

Ok, the left nav menu 'jerks' because you've got the on hover set to bold the text. When you hover over "hand painted porcelain", bolding forces the menu to 2 lines, which makes the whole nav area/left side 'jerk' down to accommodate the extra line. The 'jerk' also happens on the Lampshades page. You might want to reduce the text size so that it doesn't force the 2nd line. Wrapping the menu items doesn't look right, as in the 'beaded wine bottle covers'.

The very dark burgundy background on your category thumbnails is way too dark. You can barely see the graphic that is 'Accent Furniture' because of the background color. Anyone with visual impairments might have a very hard time seeing the graphics at all.

112.5 is not a valid height value, neither is 126.62626262623

The design is nice, but you do have some validation problems.

**abrewitt** · 02-04-2007, 12:17 PM

Only one suggestion, add another color.

**grayceworks** · 01:55 PM

Quote:

Originally Posted by LadynRed

Ok, the left nav menu 'jerks' because you've got the on hover set to bold the text. When you hover over "hand painted porcelain", bolding forces the menu to 2 lines, which makes the whole nav area/left side 'jerk' down to accommodate the extra line. The 'jerk' also happens on the Lampshades page. You might want to reduce the text size so that it doesn't force the 2nd line. Wrapping the menu items doesn't look right, as in the 'beaded wine bottle covers'.

The very dark burgundy background on your category thumbnails is way too dark. You can barely see the graphic that is 'Accent Furniture' because of the background color. Anyone with visual impairments might have a very hard time seeing the graphics at all.

112.5 is not a valid height value, neither is 126.62626262623

The design is nice, but you do have some validation problems.

Ok... I fixed the column width where the navigation is, so that the bolding does not cause the porcelain to move to 2 lines any longer. I made the column 20px wider, rather than reducing font size/readability. It also fixed the beaded wine bottle covers, which I hadn't noticed was wrapped.. (thanks! I've been looking at this thing for so long it's all starting to run together... lol)

On the height value... I have no height value put in at all. Only a width value, and it is auto-calculating the height dynamically based on the image original size. So I have the width set to 100 px on some, and 75 px on others depending on the placement in the page, and it is calculating the height on it's own... So if it's giving it that value, it did it all by itself... lol...

Eventually, I plan on doing the "optimized" thing with the images, and going through one by one and making large, medium, and small pics, but there's over 1000 images, and I only took over this site a few weeks ago, so I set it to auto size it for now using image handler.

Are there any other validation problems other than the few already mentioned? So far I've tested the layout/look/usability in IE5/6/7 in Mozilla and FireFox, in AOL, and in Opera... and at 800 x 600 and larger... any others I need to look at?

As far as the dark images... I made the images on one computer.. then looked at them on another screen and noticed they were a bit dark... I will be going through and adjusting that... I guess my monitor is not calibrated... lol..

**travelagent** · 02-04-2007, 03:45 PM

Your site, like I tried to explain earlier, is powered by Zen-Cart, no matter how you slice it; dice it; cut it up ... it's at the bottom of your site (barely visible text) and shown several times in your HTML code; even if you did do the graphics.

Your command of HTML and CSS shows you need to learn more, as the NavMenu on the left is still jerky; words wrap like I and several others have told you that it needs to be fixed ... NEVER code for just ONE browser; you need to learn not only proper coding, but to also test your site in numerous browsers.

You've already been told about these code warnings too:

Code:

line 19 column 1 - Warning: missing </div>
line 86 column 221 - Warning: <img> attribute "height" has invalid value "126.26262626263"
line 108 column 197 - Warning: <img> attribute "height" has invalid value "112.5"

**colbyt** · 02-04-2007, 05:29 PM

Did not see that scrolling box maybe you won that discussion.

Site is broken using IE7 at 1024x768 maximized. Looked great at whatever size it opened but when I maximized things went crazy. I suspect some absolute positions are to blame.

**grayceworks** · 02-04-2007, 06:57 PM

Quote:

Originally Posted by travelagent

Your site, like I tried to explain earlier, is powered by Zen-Cart, no matter how you slice it; dice it; cut it up ... it's at the bottom of your site (barely visible text) and shown several times in your HTML code; even if you did do the graphics.

Your command of HTML and CSS shows you need to learn more, as the NavMenu on the left is still jerky; words wrap like I and several others have told you that it needs to be fixed ... NEVER code for just ONE browser; you need to learn not only proper coding, but to also test your site in numerous browsers.

You've already been told about these code warnings too:

Code:

line 19 column 1 - Warning: missing </div>
line 86 column 221 - Warning: <img> attribute "height" has invalid value "126.26262626263"
line 108 column 197 - Warning: <img> attribute "height" has invalid value "112.5"

Ok... As I already mentioned, the "invalid heights" will be fixed WHEN I manually go through in photoshop and create large, medium, and small images (over 1000) by hand, rather than allowing the shopping cart image handler to auto-calculate the height based on the width of 100px.

Regarding the zen-cart system... the zen-cart only runs the sql/php stuff that talks to the database... the reason the references are there in the code and at the bottom of the page, is that if I want the page in the zen cart showcase as an example of what can be done with customizing zen cart, I have to put that in there. to show that the site is using zen-cart's code for my shopping cart. the php pages that query the database are separate from the pages that layout the site. the layout pages, graphics, and css are mine, not zen carts. Does that make sense?

regarding the coding for only one browser? where did I say I tested in only one browser??? I mentioned that I have tested in multiple browsers at multiple resolutions, all the way from IE5, 6, 7 and Mozilla and FireFox and AOL and Opera... Those are the major ones, correct? I have tested in all these...

I just now fixed the column width on the navigation, so it shouldn't be wrapping any more at this point...

Yes, I am fairly new to using css, but considering I coded the entire stylesheet/template to integrate this site into this shopping cart system, I don't think I did too bad did I??? And that IS why I'm here asking for reviews... LOL... No need to speak condescendingly...

what I asked for are any OTHER issues, that what has already been mentioned... I'm working on the stuff that's already been mentioned...

on the /div... I can't find an unclosed div tag anywhere... The one referenced as not being closed is the "main wrapper" tag, and it is closed near the end of the main_page.php, after the footer php page is imported. I have searched the header, the main_page, and the footer, and all the other tags are closed, no extra tags, and the main page file calls the header, then opens the div for main wrapper, then calls index, then calls footer, then closes the div for the main wrapper. I have looked through all of these files and find no unclosed tags. Any ideas?

**Sydpix** · 02-04-2007, 09:31 PM

a.hover links that are larger than .a in css causes issues.

Nice site however.

**travelagent** · 02-04-2007, 10:34 PM

ROTFLMAO -- I give up; NOTHING has been changed!!!

Can anybody else get thru her brain-cell???

**dionak** · 02-04-2007, 10:36 PM

Looks like you've got an extra closing div...maybe here:


<div class="leftBoxContainer" id="specials" style="width: 190px">
<h3 class="leftBoxHeading" id="specialsHeading"><a href="http://www.villadec.com/index.php?main_page=specials&zenid=a4d1e364ac6 9c415b4ed00b428a8800b">Specials</a></h3>
<div id="specialsContent" class="sideBoxContent centeredContent"><a href="http://www.villadec.com/index.php?main_page=product_info&products_id=5 370&zenid=a4d1e364ac69c415b4ed00b428a8800b"><i mg src="images/blueandwhiteporcelain/D-116.jpg" alt="11.5 in. Hand Painted Blue and White Porcelain Candle Holder" title=" 11.5 in. Hand Painted Blue and White Porcelain Candle Holder " width="75" height="112.95180722892" /><br />11.5 in. Hand Painted Blue and White Porcelain Candle Holder</a><br /><span class="normalprice">$51.95 </span> <span class="productSpecialPrice">$44.16</span><span class="productPriceDiscount"><br />Save: 15% off</span></div></div>


</div></td>

Also, there's a strange character at the beginning of the markup which is throwing validation off. Your contact icon looks like it needs a little positioning to line up with the other icons.

Good job on learning CSS and markup. Keep up the good work!

**grayceworks** · 02-04-2007, 11:57 PM

Quote:

Originally Posted by Sydpix

a.hover links that are larger than .a in css causes issues.

Nice site however.

in other words, don't increase the font size when it hovers, correct? that's what I used to have it doing... increase in size, change color, and get bold... now it just gets bold and changes color. Should I take the bold off too?

I found one of the reasons it may have been displaying funny in IE... I missed a "peekaboo" fix on one of my div id's...

I don't think I used absolute positioning, although I did specify widths for some divs and percents for others... I wanted it to flow depending on the browser size and resolution... I did notice that in IE 6, however, on some pages, the text does not load in the right place, but on refreshing the page, it's all in the right place.. why is that?

Oh, and I did find the missing /div tag... LOL... took me a while... but I added it in...

**grayceworks** · 02-05-2007, 01:15 AM

Quote:

Originally Posted by grayceworks

Oh, and I did find the missing /div tag... LOL... took me a while... but I added it in...

nevermind... adding it in broke the whole site... it must call the closing div from another file somewhere?

**dionak** · 01:29 AM

copy the source locally, validate and fix it remotely. it's much easier.

**grayceworks** · 03:08 AM

I have all the source files on disk, and I ftp them up to the site as I make changes...

Anyhow, I think it's fixed... Anyone wanna double check for me? It validated as valid XHTML 1.0 Transitional at w3.org...

I've eliminated the description that read the same as keywords, and instead put a descriptive sentence...

I fixed the missing div (wasn't in main_page, header, or footer, was in default_index, where there should have been two closing divs, one for that page, and one to close the header, and there was only one... why it was over there? who knows??? lol... )

I lightened the backgrounds of the category buttons

I changed the width of the navigation column so that words shouldn't wrap anymore, even if they get bold on hover... (which the client wants... I'm happy with em just changing colors)

I found and fixed an IE bug in my css...

I turned off the scrolly thingy on the side...

I can't reproduce an error in IE7, and I'm using 1024x768 resolution here, with it maximized... site was designed primarily for that resolution... although it will work at lower resolutions as well... can you maybe post a screenshot of what it's doing? And does it still do it after you reload the page?

What did I miss? I know I must have missed something... LOL

**grayceworks** · 02-05-2007, 11:47 PM

Quote:

Originally Posted by travelagent

ROTFLMAO -- I give up; NOTHING has been changed!!!

Can anybody else get thru her brain-cell???

Ummmm... I responded to everything you mentioned... I AM listening and trying to change things...

I fixed the metatags description so that it is a sentence about the site instead of a list of keywords... I am trying to figure out which keywords in the list of meta-keywords that I should keep and which ones I can get rid of... any ideas on this are appreciated!

I found the div that wasn't closed... it wasn't where I expected it to be, which is why I had trouble finding it at first... it was in an different file entirely...

I made the navigation column bigger so that the words don't wrap, so the navigation won't jerk... And I took the "bold" off of the navigation on hover...

I turned off the scrolling side-box (after much discussion with the site-owner)

I fixed the funny character at the beginning of the page ( it was the page saying it was iso-8859-1, when really it was utf-8.. changing that eliminated the funny character)

I also fixed some css that was prone to "IE bugs" so that IE should see it correctly now... (I hope... I heard that some of the fixes that work in 5 and 6 don't work in 7? )

You said I was coding for only one browser, which is entirely incorrect, as I had already said I was testing it on at least 3 other browsers and browser versions, as well as at different screen resolutions... I cannot possibly account for EVERY possible combination of software/browser/resolution/version out there, not to mention where people have their own viewing settings put in their browsers, BUT I am checking to make sure it looks right in the most common ones... And I am asking for others to point out where it doesn't look right in their browsers... How is that coding for only one browser????

And I revalidated at w3.org, using autodetect settings, and it now says it validates as valid transitional xhtml 1.0 with no errors.

Like I said... I'm new to css styles, so I am working on learning what the best ways to do things are...

AND I have difficulty in reading comprehension, so I have to ask a lot of questions and rephrase what I read to make sure I understand what it is that I'm being told...

There's no need to be rude and condescending to me... I am trying to figure this out...

I think you are just trying to be rude, rather than helpful, as others here have been able to give good advice without jumping down my throat...

I may be a bit slow, but I'm doing the best I can here to follow the advice given... Maybe you don't see the changes I've done so far because you need to clear out your cookies???

And if I may ask, what browser/resolution combination are you looking at it on, so that I can look at the site using the same, and try and see what you're seeing?