Critique this web site design *updated*

[ProviaFan]

Originally posted by: Deslocke

Originally posted by: jliechty
If you're going to use the widely-used traditional table "hack" for your layout, you can easily manage with supporting the 4.x browsers, but don't worry about anything before that, because people using those browsers deserve rude awakenings in the form of extremely ugly pages to indicate that they need to upgrade.

OTOH, if you're developing with XHTML and CSS (which I do, since I'm not a web design pro, and I can take my time with my personal sites), you shouldn't start out trying to support anything before the 5.x browsers; the older ones mangle CSS so much that it's not even funny, and they are a major PITA to get to display CSS-formatted pages properly.

Well, I'm not a web design pro either. I'm only 16 and I don't even know what XHTML is (besides what I just looked up on webopedia). But anyway, what do you mean by "mangle.". I only used CSS on the scroll bar. Older browsers will just show the traditional scroll bar, correct?

XHTML is a stricter specification of HTML; it is the blending of XML and HTML.

Netscape 4 will just not display some CSS (as with your scroll bar), but it will attempt to display other CSS in ways that are not stated in the CSS specifications. Thus, your page ends up looking like crap some items will not be showing, other items will be totally out of place, etc), and you usually need to use the import trick to hide your stylesheet from NS4. In that case, your page appears to NS4 browsers as plain text, unformatted. To see an example of this, check out one of my pages here at http://www.joink.com/homes/users/jliechty/fah/. First load it in IE6 or Moz1.2, then load it in NS4.x; you should be able to see the difference.

 

[jjones]

Nice, clean layout but I'll go along with the others about the difficulty on the eye in using so many text variations. It's not bad to do that but I think the problem is that you are doing it with all of the text on the page. That technique is put to better effect when just using a phrase or two and is subtle and complimentary instead of overwhelming.

 

[Placer14]

As a technical suggestion. You might want to make your logo and such as backgrounds inside tables. IE6 shows a little toolbar that asks if you want to save etc. Most people don't turn this off and setting the image as a background in the table will get rid of this problem. Otherwise, the text being broken is something i do notice. Everything else seems nice.

Also, you can use smaller images for the nav bar at the top and if you can, don't use an image swap on them. A quick javascript that changes a table's backgroun will do this better and you won't have to create new graphics everytime you add a button. nothing a major issue, but it will shave about 2-4 secs for a dialup user browsing the site. Saving them from downloading Macromedia's lengthy Javascript and the large images you used for buttons.

 

[ProviaFan]

Originally posted by: Placer14
As a technical suggestion. You might want to make your logo and such as backgrounds inside tables. IE6 shows a little toolbar that asks if you want to save etc. Most people don't turn this off and setting the image as a background in the table will get rid of this problem. Otherwise, the text being broken is something i do notice. Everything else seems nice.

Also, you can use smaller images for the nav bar at the top and if you can, don't use an image swap on them. A quick javascript that changes a table's backgroun will do this better and you won't have to create new graphics everytime you add a button. nothing a major issue, but it will shave about 2-4 secs for a dialup user browsing the site. Saving them from downloading Macromedia's lengthy Javascript and the large images you used for buttons.

Another solution to the rollovers is to make a small table for your navigation bar, and use text for links. Then use CSS to remove the underlining (text-decoration: none; ), set display: block;, and then use :hover; to change the background-color. This doesn't require any images, and makes your HTML page smaller because much javascript does not need to be downloaded. Here is a sample page using CSS for a tab-style navigation bar and a side navigation bar with rollovers. There are no images on that page; it was done entirely in CSS.

 

[thirtythree]

Originally posted by: Placer14
As a technical suggestion. You might want to make your logo and such as backgrounds inside tables. IE6 shows a little toolbar that asks if you want to save etc. Most people don't turn this off and setting the image as a background in the table will get rid of this problem.

Thanks for the suggestion. I did notice it does that for the large image in the center but does it do it for the others? I can't make all the images part of the background.

Also, you can use smaller images for the nav bar at the top and if you can, don't use an image swap on them. A quick javascript that changes a table's backgroun will do this better and you won't have to create new graphics everytime you add a button. nothing a major issue, but it will shave about 2-4 secs for a dialup user browsing the site. Saving them from downloading Macromedia's lengthy Javascript and the large images you used for buttons.

I wouldn't consider a 150-200 byte file "large." But I might try that out .. I don't know all that much JavaScript though so could you point me to an example or tutorial?

 

[thirtythree]

Originally posted by: jliechty
Another solution to the rollovers is to make a small table for your navigation bar, and use text for links. Then use CSS to remove the underlining (text-decoration: none; ), set display: block;, and then use :hover; to change the background-color. This doesn't require any images, and makes your HTML page smaller because much javascript does not need to be downloaded. Here is a sample page using CSS for a tab-style navigation bar and a side navigation bar with rollovers. There are no images on that page; it was done entirely in CSS.

Thanks, I might give that a shot too.

EDIT: And how do you make the table outlines dashed on that page?

 

[Kev]

Big blank area at the very top doesn't look right. Lots of wasted real estate IMO.

The way the text is organized doesn't flow very well as previously stated. I think this text would go well in a small flash movie with some nice animations. It wouldn't be too hard to learn Flash to make simple animations, like text movements and fadeouts, etc. And you could always have vertical and horizontal lines going back and forth (just kidding, that is way overdone)

 

[Placer14]

Originally posted by: Deslocke

Originally posted by: Placer14
As a technical suggestion. You might want to make your logo and such as backgrounds inside tables. IE6 shows a little toolbar that asks if you want to save etc. Most people don't turn this off and setting the image as a background in the table will get rid of this problem.

Thanks for the suggestion. I did notice it does that for the large image in the center but does it do it for the others? I can't make all the images part of the background.

Also, you can use smaller images for the nav bar at the top and if you can, don't use an image swap on them. A quick javascript that changes a table's backgroun will do this better and you won't have to create new graphics everytime you add a button. nothing a major issue, but it will shave about 2-4 secs for a dialup user browsing the site. Saving them from downloading Macromedia's lengthy Javascript and the large images you used for buttons.

I wouldn't consider a 150-200 byte file "large." But I might try that out .. I don't know all that much JavaScript though so could you point me to an example or tutorial?

I can't find anything for where i am now. now. but I used to use www.javascripts.com otherwise just go to google and search for javascript behaviours.

 

[thirtythree]

Originally posted by: maladroit
Big blank area at the very top doesn't look right. Lots of wasted real estate IMO.

I'm not sure how I could change it without dropping the logo or putting the menu somewhere else. I think the blank space helps keep the site simple, but if others think it is a waste I could figure something out.

The way the text is organized doesn't flow very well as previously stated. I think this text would go well in a small flash movie with some nice animations. It wouldn't be too hard to learn Flash to make simple animations, like text movements and fadeouts, etc. And you could always have vertical and horizontal lines going back and forth (just kidding, that is way overdone)

I do know Flash but I really don't like websites made mostly of Flash. Any other opinions on doing an animation with the text?

 

[DrVos]

Good for you on the decision on not using Flash. I hate how people are so flash-hungry these days, trying to use flash simply because they can.

That said, nice choice of colors and decent layout. Two caveats though:

1) The text is blurry and hard to read (this has been mentioned already)

2) The Visual hierarchy is a bit jumbled. You want to pull the visitors eye from section to section an sensible way. Whats happening right now is that the text in the middle is muddling everything up. The logo, navigation, and graphics on the left seem fine, dont worry too much about that, what you should work on is the text in the middle. There is way too much going on there. The different fonts of different sizes, the use of both bold and size changes as emphasis and the use of different colors is distracting. The type extending beyond that vertical line is especially distrcting. If found it all very hard to read. What you need to work on is a format that will pull the users eye down through the text.

I'd suggest using images sparingly to convey text, use the same type size for body text, and find someway to better align your text.

That' all I'll mention for now, btw GREAT start!

*Edit* REALLY try to avoid moving text, more often than not, it looks unprofessional.

 

[thirtythree]

I fixed the anti-aliasing and tried something new with the text.

 

[thirtythree]

Bump.

 

[ProviaFan]

Originally posted by: Deslocke

Originally posted by: jliechty
Another solution to the rollovers is to make a small table for your navigation bar, and use text for links. Then use CSS to remove the underlining (text-decoration: none; ), set display: block;, and then use :hover; to change the background-color. This doesn't require any images, and makes your HTML page smaller because much javascript does not need to be downloaded. Here is a sample page using CSS for a tab-style navigation bar and a side navigation bar with rollovers. There are no images on that page; it was done entirely in CSS.

Thanks, I might give that a shot too.

EDIT: And how do you make the table outlines dashed on that page?

Those aren't tables; they're <div> blocks with "float: right;" in the CSS for their class. The dashed border is made with "border: dashed 1px #hex_color_value;" (I think the border attribute can be used in CSS on tables, too, but I've not experimented that much with it in that manner).

BTW, your text looks better now.