New Layout, and need some help with Validation and Safari

jen4950

[H]F Junkie
Joined
Apr 25, 2001
Messages
11,387
I'm working on a new layout for my company's website- figured I'd throw it to the wolves for a critique. You can click most of the links to see the old layout and color scheme.

I know how you guys are, so here is what I am working on -> :D

I'm going to have a status bar with navigation, "e-mail this page" and "printer friendly" in the black bar. Working on that tommorrow. The bright blue div frame you see is just to help me with layout- it will be gone as soon as I start to deploy it across the site- that represents an 800px window. I'm going to add a gap to the bottom nav section to get it off the bottom and make the text size all the same as the 1997-2008, that was a glitch.

http://vacorp.com/common/demo.asp

The big difference between this new site and the old one is it's all ASP, so I am putting this whole template into include files, so maintenance will be a cinch- the only thing to put in the specific files will be the content, everything else will be handled by simple CSS, ASP and included files. And I am really trying to fine tune the CSS file to make it easily deployable.

Some questions that I could use some help with in regards to validation:

Bookmark Script

I've used a bookmark script for a bunch of years that was pretty clunky. It gave me all sorts of errors when I tried to validate the code under Strict XHTML

Original Script:
Code:
<script type="text/javascript" language="JavaScript">
	var txt = "Bookmark This Site"
	var url = "http://www.vacorp.com";
	var who = "Vehicle Acceptance Corporation"
	ar ver = navigator.appName
	var num = parseInt(navigator.appVersion)
	if ((ver == "Microsoft Internet Explorer")&&(num >= 4)) {
	document.write('<a class="Navigation_Current" href="javascript:window.external.AddFavorite(url,who);" ');
	document.write('onMouseOver=" window.status=')
	document.write("txt; return true ")
	document.write('"onMouseOut=" window.status=')
	document.write("' '; return true ")
	document.write('">'+ txt + '<' + '/a>')
	}else{
	txt += " (Ctrl+D)"
	document.write(txt)
						} 
						
</script>

I found a much cleaner version that works great in all browsers, but still doesn't validate:

Code:
<script type="text/javascript">
					
	function bookmark(headline,address){
	if (window.sidebar) 
		window.sidebar.addPanel(headline, address, "");
	else if(window.opera && window.print){ 
		var elem = document.createElement('a');
		elem.setAttribute('href',address);
		elem.setAttribute('title',headline);
		elem.setAttribute('rel','sidebar');
		elem.click();
	} 
	else if(document.all)
		window.external.AddFavorite(address, headline);
	}
</script>

Call it with this:
Code:
<a href="javascript:bookmark('Vehicle Acceptance Corporation', 'http://www.VACorp.com')">Bookmark This Site</a>


I'm going with the new one if I can figure out how to get it to validate.. OR- if anyone has a better solution, that would be fantastic..

The next issue is:

Width in TD tags

Is that not allowed in XHTML Strict?

Line 74, Column 42: there is no attribute "width".
<td width="100">&nbsp;</td>

JScript and overall performance in Safari

My JScript is not working in Safari for the sliding left links. Not a big deal, the links and CSS still work- but still scratching my head. Also, it is taking a really long time to load. And my IMG in the SPAN (Make your Payment link) is stretching over the whole window versus the SPAN region in Safari. Any ideas?

Besides all of that, I think I am getting pretty close to working out the major bugs. It works on all different Text sizes and Zooms for the most part, and seems pretty clean. If you have any suggestions or reccomendations, please speak up.

Best Regards-
 
first off, if you want your javascript to validate you can do one of two things
- move it to an external file
- wrap all the JS code inside CDATA tags

e.g.
Code:
<script type="text/javascript">
<![CDATA[
// content of your Javascript goes here
]]>
</script>
also try firing the javascript using an event handler (like onclick) instead of <a href="javascript:...."

As for the design itself:

- black & blue (or is it a really dark blue/blue?) color scheme is just not doing it for me
- the "shift" effect on the nav buttons gets tiresome rather quickly
- those text boxes that pop up when you hover over a nav button is more distracting than useful
- text in the content area could probably be a bit smaller, and add some line-height to make it breathe a bit.
- the subheading text in the nav area (For customers, For businesses..etc..) is way too small and may look cleaner if they were styled like the nav buttons but with a different background color.
 
... Will work on that stuff..

As for the design itself:
- black & blue (or is it a really dark blue/blue?) color scheme is just not doing it for me

That's what everyone likes- and it matches our trade show booth. It fades from Blue to black.

- the "shift" effect on the nav buttons gets tiresome rather quickly

Is it distracting more than what we had before? ( going from black to yellow..)

those text boxes that pop up when you hover over a nav button is more distracting than useful

We have a pretty non-technical clientbase. Having a popup come up expaining what is going on has proven to be a neccessary evil.

- text in the content area could probably be a bit smaller, and add some line-height to make it breathe a bit.

Good Point.

- the subheading text in the nav area (For customers, For businesses..etc..) is way too small and may look cleaner if they were styled like the nav buttons but with a different background color.

Agreed. Will change.

[/QUOTE]
 
figured I'd throw it to the wolves for a critique

Bad idea :)

While theres a lot of things I'd change about the site, most of it is very much a personal choice of the client. The client is the boss, so if they want some of those things, than so be it, basically.

With that said, There are a few things I would consider imperative to 'fix'.

1. All black design
2. Animated navigation
3. Navigation popup.

1. While it may work with your companies marketing materials, it can be done better. Especially when it comes to content display. I would try to find a way to have a white background for the content - and not simply by making a straight cut out white box. In fact, I would add in a few graphical elements to the layout in general. Nothing like huge images or anything like that, but just some rounded corners / gradients, that sort of thing.

2. As has already been said, the shift affect gets old quick, and seemed to slow my machine down here at work. I would remove it, and go with a simple rollover affect. You don't have to be AS dramatic as the previous site, with the yellow rollover. Just a color that compliments the current color scheme and is still noticeable.

3. That navigation popup has got to be replaced! Not removed, I understand the need of it. But make it look better. Perhaps make it look similar to the caps-lock message you get when trying to log into a windows box. And having it directly to the right of the navigation item it pertains too. It's too disjointed and confusing for me when it's not next to the navigation item it's talking about. ALSO, maybe add in a small delay, so maybe after 1-3 seconds of staying in place. That way if I don't need to see it, I don't have too. But if I'm a little bit confused I can wait for the popup and learn more.

I will try to provide examples during my lunch break, or maybe later this weekend.

Hope that helps!
 
Width in TD tags...Is that not allowed in XHTML Strict?
Unfortunately so. It's a little impractical to use CSS for styling table columns (because they need to be defined by ids or classes if you intend to use varying columns widths in a table), but it's necessary to validate with XHTML 1.0/1.1.

For instances when the style sheet is unavailable/turned off, you can use non-semantic non-breaking spaces (&nbsp; ) if you absolutely need to to give columns a little breathing room, or just switch to HTML 4.01 Transitional.
 
Thanks for the info- I just got rid of the bad table cell- it was a relic of the old layout where I was trying to keep the text out of the band. I also corrected alot of the text fomatting per above, and put the bookmark javascript in a seperate file. I think that solves all of my validation issues.

I really sped up the animation, hopefully that corrects the irritation that people were referring to. The owners want a bit of animation, it makes it feel a little more interactive. And the Blue/Black with white text is staying- that is their favorite part of the new site.

Let me know if my recent changes improved the experience. Thanks!
 
I really sped up the animation, hopefully that corrects the irritation that people were referring to. The owners want a bit of animation, it makes it feel a little more interactive. And the Blue/Black with white text is staying- that is their favorite part of the new site.

sigh! There are few things more depressing than having to deal with a client who has absolutely no design sense. I just went through something similar this week; I showed them a mock-up that was clean and well balanced, I used dark text on a white background to make the site readable, redid the logo so it didn't look like some POS clipart someone downloaded, added a nice tabbed navigation menu, and sprinkled splashes of color throughout.. They hated it. Now that i could deal with, but what I couldn't understand is what they did like, which was the colors of their old design (purple background with lime green text, in 18pt Comic Sans no less), and they wanted the "blinking" text back. It looked like a MySpace page, which I can only assume was their original sorce of inspiration.
I simply had to decline that job, I just couldn't bring myself to do it.
 
sigh! There are few things more depressing than having to deal with a client who has absolutely no design sense. I just went through something similar this week; I showed them a mock-up that was clean and well balanced, I used dark text on a white background to make the site readable, redid the logo so it didn't look like some POS clipart someone downloaded, added a nice tabbed navigation menu, and sprinkled splashes of color throughout.. They hated it. Now that i could deal with, but what I couldn't understand is what they did like, which was the colors of their old design (purple background with lime green text, in 18pt Comic Sans no less), and they wanted the "blinking" text back. It looked like a MySpace page, which I can only assume was their original sorce of inspiration.
I simply had to decline that job, I just couldn't bring myself to do it.


Well, hopefully ours isn't THAT bad! :D

I spoke with my contact at an advertising agency for a second opinion and she trally liked it, it fits our style and other promotional material and it's clean. Her opinion was it doesn't really matter what it looks like as long as it is all consistent across the board and is clean- consistency is much more important that all of the minutae.

Another consideration is we are really transforming the company, going down a different direction; and the old site is getting pretty stale. We want something that is noticably different.

This was kinda funny- I looked at how the site has progressed over the years:

http://web.archive.org/web/20010127035900/http://vehicleacceptance.com/
http://web.archive.org/web/20011127092903/http://vehicleacceptance.com/
http://web.archive.org/web/20020326195215/http://vehicleacceptance.com/
http://web.archive.org/web/20030806020552/http://vehicleacceptance.com/
http://web.archive.org/web/20031212125315/http://vehicleacceptance.com/

It certainly has looked much more hideous in the past.. :eek:
 
I tried viewing the webpage you are working on but nothing came up. Is it not online right now?
 
this is what i see (with firefox)
http://zero.selfip.net/uploader/fil...ce Corporation - VACorp.com_1212969740660.png

granted i override fonts so some things may be affected by that

i think the gray text on the top (print/email/etc.) is to dark

you should use printer css (media="print") instead of a printer friendly version. this saves you work.

sometimes the menu items don't return to the 'home' position. i'm not really sure what's causing it and it's intermittent. it just bugs me

if there's enough content, the menu column's floating will make the right column not be a column anymore (see the paragraph after H2 level heading). generally you can set the right column's margin-left to at least the width of the left column

you may want to use clear: both in the style for the footer to make sure it always stays below the menu (assuming that's what you intend)

also, for me there is a lot of stuff to the right of the page, which causes a horizontal scrollbar. granted there isn't any text that i need to scroll to see (which would be very bad) it should cause a scrollbar at all.

additionally if i bring the font size down slightly this happens
http://zero.selfip.net/uploader/fil...ce Corporation - VACorp.com_1212970992300.png
 
this is what i see (with firefox)
http://zero.selfip.net/uploader/fil...ce Corporation - VACorp.com_1212969740660.png

granted i override fonts so some things may be affected by that

i think the gray text on the top (print/email/etc.) is to dark

you should use printer css (media="print") instead of a printer friendly version. this saves you work.

sometimes the menu items don't return to the 'home' position. i'm not really sure what's causing it and it's intermittent. it just bugs me

if there's enough content, the menu column's floating will make the right column not be a column anymore (see the paragraph after H2 level heading). generally you can set the right column's margin-left to at least the width of the left column

you may want to use clear: both in the style for the footer to make sure it always stays below the menu (assuming that's what you intend)

also, for me there is a lot of stuff to the right of the page, which causes a horizontal scrollbar. granted there isn't any text that i need to scroll to see (which would be very bad) it should cause a scrollbar at all.

additionally if i bring the font size down slightly this happens
http://zero.selfip.net/uploader/fil...ce Corporation - VACorp.com_1212970992300.png

What version of Firefox are you using?
 
2.0.0.14. i suppose it might be too much to expect every website to look perfect with increased font sizes (i have a pretty high minimum font size in addition to zooming the text) but i do expect sites to at least be readable. your design does accomplish that much, even if it doesn't look perfect. there are so many sites that specify line-height and other things in pixels which can make the page completely unreadable.
 
2.0.0.14. i suppose it might be too much to expect every website to look perfect with increased font sizes (i have a pretty high minimum font size in addition to zooming the text) but i do expect sites to at least be readable. your design does accomplish that much, even if it doesn't look perfect. there are so many sites that specify line-height and other things in pixels which can make the page completely unreadable.

Yeah- I did everything in ems- maybe I missed a couple that DW might have slipped in there.. will check it out..
 
.... this completely grinds my gears, for example
http://zero.selfip.net/uploader/files/1/images/AccuWeather.com_1213044823389.png

i can't click the nav categories at the top since they're covered by text
http://zero.selfip.net/uploader/files/1/images/Best Buy_1213045025614.png

Well- maybe you should use normal size text and zoom! :cool::eek::D jk-

I completely understand your frustration and agree- that's why I'm trying hard to get it to work with all of those settings that the user can throw at it.

Thanks for your comments- I can't believe Best Buy of all sites looks that crappy.
 
2.0.0.14. i suppose it might be too much to expect every website to look perfect with increased font sizes (i have a pretty high minimum font size in addition to zooming the text) but i do expect sites to at least be readable. your design does accomplish that much, even if it doesn't look perfect. there are so many sites that specify line-height and other things in pixels which can make the page completely unreadable.

hey, thanks for the heads-up. It just never occurred to me that a line height in pixels would cause problems with zooming. I guess it's never too late to fix bad habits though. I will endeavor to keep that in mind for all my websites from now on.:)
 
in your print stylesheet you ought to make some items display: none. it's rather worthless to have a menu on a piece of paper, for example.
 
in your print stylesheet you ought to make some items display: none. it's rather worthless to have a menu on a piece of paper, for example.

I agree with you to a point. I also see the navigation that is printed as a way to see where you were, and sometimes I wish the page actually printed the navigation.. The navigation button will have red text and will have a yellow or grey background when printed for the active one only.

For the pure content without any navigation, I will have a PDF button that will have the side and bottom navigation set to display: none.. I'm working on that tommorrow (automating it that is..)

If you'll notice, I've got the screen and print versions using two different versions of the header images, using the display: none property.

Good point- thanks for the comment.
 
Back
Top