Makover review.

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

I have been working with html / php / flash hybrid sites for a while. I don't proclame to be an innovator in the business. I know just enough to be dangerous.

This site is my second attempt at xhtml. It seems to be quite time consuming for me because of the newness of the scripting language.

I'm looking for design reviews.

http://www.teamweston.com/indexnew.php

Thanks in advance.

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

Did you design this? The color scheme is excellent! The markup looks ok. Only warnings, no errors. The dropnav works well. Is the markup generated by DW?

The news area is wrapping a little strangely though. It wraps back underneath and back a little. It also seems the bullet image isn't exactly lined up vertically.

There are a couple of places it could be cleaned up slightly but overall, great job! It's easy to read, easy to navigate and lays out well. And, it validates! Wonderful...

**Sydpix** · 02-04-2007, 10:38 PM

I used DW to create the layout.

The dropdowns are suckerfish

The two even boxes are http://www.thenoodleincident.com/tutorials/box_lesson/basic2_fluid.html
with a twist.

The overall design was inspired by http://www.cssbeauty.com/gallery/

You might find things I create that look like others, well... maybe so ... it's only because I am heavily inspired and facinated by xhtml designers as of late.

Thank you for your review.

p.s if you could direct me to any further reading on xhtml sites. I would much appreciate it.

**typh0n** · 02-04-2007, 10:48 PM

Nice Design Sydpix, i like that color not to brightness

,good luck for you Sydpix

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

I guess you also read ALA? Great site.

I love CSSBeauty and CSS Zen Garden. Seems like we're attracted to the same sites and the advancement of CSS as of late. Dan Cederholm is a great author with regards to clean markup and web standards (which I'm a huge advocate of).

I have a few other links related to CSS Beauty on my blog. I keep adding as I find them. Feel free to add as well. I love looking at the more savy styles of websites. When I need inspiration, I use that list to peruse designs.

I would definately recommend reading Dan's "Web Standards Solutions". He discusses minimizing markup ('div-itis'), which is a great topic. Have you read Dave Shae and Molly H.'s The Zen of CSS Design book yet? I enjoyed that too.

http://www.simplebits.com/publications/

Do you have a portfolio somewhere?

**Sydpix** · 11:03 PM

Thanks Dionak ! I most certainly will check those out. Yes I do read ALA.

I don't really have a portfolio other than my newbie site
http://www.sydpixel.com
I know it's been done a million times but my plans are to offer interesting css and xhtml on my site as I discover them.

If I may add ...

One of the things I have been working on lately in my design is cross browser and resolution compatibility.

If you minimize the window and drag the size of the template to what may be 800 x 600 resolution, the profile text in the header ends up over top of the Polaroids to the left...

Does anyone have a suggestion that may prevent this from happening in smaller resolutions?

Thaks again.

**dionak** · 02-04-2007, 11:07 PM

If you could set a min-width for the left side, that would work. Of couse, IE doesn't support this without a hack. I'm not sure which one is best, but I have noticed that the expression command in css causes issues in IE6. So, if you use that I would add conditional CSS statements.

**Sydpix** · 02-04-2007, 11:20 PM

Nice site you have there Dionak. bookmarked!

**dionak** · 02-04-2007, 11:42 PM

Thanks.

It's been great chatting with you tonight! Look forward to seeing you around Sydpix!

**Sydpix** · 02-06-2007, 09:41 AM

dionak or any one else have any suggestions for gamma and color settings for graphics cards to make sure my colors are correct?

**aldor** · 02-06-2007, 11:05 AM

Great use of colour and well overall well put to-gether
I found the navigation easy to use and well thought out.
I really liked what you have achieved here.

**dionak** · 02-06-2007, 03:17 PM

You could try a monitor calibrator. Not sure which is best but I've seen photo editors using these to ensure colors are correct.

**LadynRed** · 02-06-2007, 03:35 PM

Ok, I have a few comments to add.

The first thing I noticed is the link colors - that pale brown is just TOO LIGHT, the contrast with the white background is not good. Some people with vision impairments may not even be able to see what those links actually say. Darken them up. Same goes for the paler gray text.

Jump menus are generally not a good idea, and definitely bad where search engines are concerned.

The right side column.. is that meant to be above the red line at the bottom of the header ? Just wondering.. if that's the way you meant it

Code.. you use a LOT of 'target=_parent".. you don't need it. The 'target' attribute is also deprecated in XHTML, and using it to open new windows is definitely frowned upon.

You're using PX for your font sizing. Doing so prevents IE users from scaling the text in their browser to something larger than the small size you have defined. Better to use either em or % for font sizing so you're not handcuffing IE users.

Since you're using DW to do the page, absolutely RESIST the urge to set font styling using the properties bar. You want all your styling to be inside your CSS file and not have 'class = stylexx" scattered throughout your document. On the Commercial Properties page, you have a style block stuck in the middle of a div !

Keeping ALL your styles in the CSS files prevents a whole LOT of maintenance nightmares, and you have a large site there.

Flash animation - you are using the <embed> tag, bad news for IE users (again). They will not even SEE your animation until they do the 2-click dance to 'activate' the active content. At the top of the HTML forum is a sticky that has a list of alternate methods to using the <embed> tag. I personally like SWFObject, but all of them are good alternatives.

Overall you did a nice job, I like the design and its reasonably well organized.

**Sydpix** · 07:19 PM

Thank You friends !

I guess I got a little lazy ... I seem to have that problem from time to time. That is the very thing I hate about dreamweaver, it sometimes drags Word styles when cut pasting. Even when you run a remove Microsoft Word cleanup it doesn't always remove the styles. ( I do know that pasting into notepad first takes care of this

)

I do however have a little js that takes care of the first click syndrome in embedded flash although I'm not sure how it validates.

save this as ieupdate.js file

Code:

 objects = document.getElementsByTagName("object");
for (var i = 0; i < objects.length; i++)
{
    objects[i].outerHTML = objects[i].outerHTML;
}

Add this after flash

Code:

<script type="text/javascript" src="ieupdate.js"></script>

The target parent attribute I did not know until now that that was frowned upon ? I have always just included that because for me personally there nothing more annoying than when I go to a site and click a link and lose the page I was on. Is there a way to accomplish the same thing without creating a no no?

These are all great tips in web design and user functionality. My guess is, these little things I sometimes overlook may be the very thing that might detour a future customer.

I cleaned it up a little for now but, you have pointed out something I need to strongly concentrate on and that is ... don't ignore the little details

Thank you for your detailed replies.

p.s. The links outside of the new design are the old site. none the less... details

**ExCal** · 02-06-2007, 10:16 PM

It's a good looking site, I like the template. The only thing is that the first paragraph blends in, too much and is hard to read.

**jyoz22** · 02-06-2007, 11:41 PM

Very nice design!
I have to agree with ExCal the first paragraph (under WESTON REAL ESTATE) blends too much with the background...

another thing you might want to consider... is the search input box is outside the are for it in Opera browser...

**techbog** · 02-06-2007, 11:44 PM

Hello, I feel the site color scheme is nicely done! The Pictures used are high quality and add to the site rather than take away like most sites that use some pictures do today, however the drop box under "jump to listings" takes away from the overall design and I feel you should find another way to implement it effectively, while still preserving the design.

**LadynRed** · 12:09 AM

Quote:

I have always just included that because for me personally there nothing more annoying than when I go to a site and click a link and lose the page I was on. Is there a way to accomplish the same thing without creating a no no?

Thru many usability studies they have found that people like to use their BACK button and they use it liberally. Opening new windows, or in my case a new tab, for every link drives me NUTS. In general it is better to let the users do what they do - use the BACK button to go to a previous page and don't open any new windows in their faces. New windows tend to confuse many users.

One lesson in web site design-- design it for the USERS -- not for yourself

**Sydpix** · 07:03 AM

I think I need to go over this again...

I use parent links for internal site links. and blank for all links leading away from the site.

Generally speaking, most sites I go to, if a person puts a banner add or a link to an affiliate or partner I have found most go to a blank page.

Through usability studies they're saying you should encourage people to click external links from your site to not open in a new window?

What confuses me in this study is this, when I click a banner to view a sponsor link, I may click several links on that site taking me deep into the sponsored add that would require several back button clicks to get back to the site I didn't necessarily want to leave. With a parent link, I click once to close the window and the original site I originated from is still there.

What is more user friendly? 13 back button clicks or, 1 to close the window...

I'm not sure I understand this study.

Jyoz , thanks for pointing that out. I think I resolved the problem.

I also changed the text color at the top to white ummm... not sure what to do there.