Intranet site - corporate template

Working on a corportate intranet site trying to be as symantec as possible with 508 and XHTML compliance.

However, my strong suit has never been design. Let me know what you think of this...

http://www.aphion.com/usps/etravel/index.html

Personally, I think the top nav and the rest of the site clash, but people here seem to like it.

Any suggestions for improvement?


Oh and one other thing, how can I get bookmarks to validate?


<a name="top"></a>


Thanks

Problems

Use <a id="top"></a> instead of <a name="top"></a>
The navigation is in the middle and hidden behind the table
Only by looking at the code did I know there was a top navigation bar, hidden my the Welcome bar
The first few paragraphs of the Welcome Message are all on the right, on the left there is a massive white section.
Text in the logo isn't clear
http://www.aphion.com/usps/etravel/images/50Modern/fancy.gif


Nice Bits

Colours


Results from Apple Safari

Thanks, I noticed the same overlapping problem in Mozilla. I couldn't figure out how to fix it.

Any ideas? I've tried the z-index property, but that only works on positioned elements (according to w3schools.com).

Also, can you post a screen shot of the "on the left there is a massive white section." I haven't seen this in testing. Actually, just a screen shot in general could be very helpful from Safari.

Thanks

Isn't there some CSS value which will lock an element against a side, as for the screenshot, see the attachment (sorry about the size, had to get within the 50KB file size limit).

Wow. :eek:

That is significantly different than what I see in IE6, and Moz 1.6.

Guess it's back to the ol drawing board.

I could help you make it compatible for free, but I could only start doing anything next week...

The yellow color of the bar below the title seems to bother me a bit; yellow adjacent to blue seems a little off.. I'm not much of a designer but I'd consider using a different color.

The yellow bar at the top left is not nice. The menu at the left has a background that I think doesn't fit with the rest.
Maybe having a chrome look to it would be nice?

Ok, Here's take 2. I radically changed the color scheme and layout. Is this any better? Any thoughts?

Thanks again for all your help.

Link:
http://aphion.com/usps/etravel/indexAlt.html

MUCH better.
Few things I would change:
- use sans-serif font
- add more padding to navigation items
- increase line spacing for content.

Just the things Vladdy said, and it looks as if it was meant to look how it does.

OMG what an improvement! :thumbsup:

I can't beleive how well you're handling brown :)
lol
looking very nice.
When I see it, I feel like flying to a desert and going on camel rides..
but that's just me

Few more thing:

Do not jump the navigation text on hover (there was time when I thought it was cool myself) - it is rather distracting. Change text color, background, add border, anything but jumping text... :thumbsup:

Remove the navigation underline - it makes it too crowded (it is pretty obvious in this day and age that those are links)

I would find another place for breadcrumbs (Current Location). Where it is now, it simply repeats the header above it....

Use font units for nav blocks width and height so that text does not spill over when font size increases....

For the breadcrumbs, maybe just after the header above it..
So you have the current location, and it's path (according to the site, not the url)..
get it?

I like it verymuch, It is easy to follow and the colors match and the contrast is good too, well, the only thing is the top navigation... Didnt notice there was one till i pulled up IE :D

lol

but the design is very nice

Thanks for the replies.


I can't beleive how well you're handling brown

I really like the brown look, however I have been "advised" that I may want to stick with our corporate colors (red, white, blue) since brown is usually associated with UPS. :(

So, with that said, I tried to change the scheme to be blue based...

http://aphion.com/usps/etravel/indexAlt3.html

Personally, I get really cold looking at this. I tried to warm up the tone with a light beige background in the main content area, but that doesn't seem to fit.

Any suggestions? Maybe remove some blues and replace them with grey (gray???) tones?

MUCH better.
Few things I would change:
- use sans-serif font
- add more padding to navigation items
- increase line spacing for content.

Good call, I think these changes really did make an improvement. However, I still like the georgia font for content text. I suppose I could add one of those "style setting" dealies to let the user decide.


Remove the navigation underline - it makes it too crowded (it is pretty obvious in this day and age that those are links)

In the private sector, I'd agree, however people here tend to look specifically for blue underlined text as links. I took off the underlining on the left as that is a very traditional place for links so I'm just going to hope for the best, however I left the underlining on the top. For some reason, I've found that people don't associate the top of the page as navigation (at least here they don't).

heat it up you say?
maybe the content boxes (welcome message, here's another section) could have the same bg colour as the left navigation.
Then maybe add red borders (instead of orange for example, like at the bottom of the left navigation).
Maybe use something else than white for titles (welcome message, here's another section, quick links, documentation, etc.)

As for the links at the top, if you don't want the underline, maybe seperating them would make em more linky..
example:
Headquarters ~ Area ~ District ~ Station/Branch ~ Others
or
[Headquarters] [Area] [District] [Station/Branch] [Others]
or
Headquarters : Area : District : Station/Branch : Others
and then have the text change color on hover (maybe red again?)

oh, and for heating up, maybe you could use a redish fadish texture as background..
So that way, your red borders and links wouldn't be so far fetched ;)

Ok, I've come up with my 4th and last template. I really like this one as it (in my view) has a nice professional look to it, and uses our corporate colors.

Let me know what you think of this:

http://www.aphion.com/usps/etravel/indexAlt4.html

On a side note, all the underlying HTML is nearly identical in every version. This excersize has really enlighted my understanding of the power of CSS!

Thanks for the comments.

I like it.
The only thing I think I should say about is there is a mix of "boxes" and "non-box" styles...
the menu to the left is made of boxes, whereas the content isn't (doesn't look like it is since the border is too pale).
I think you should choose one style or the other or make it clear youre having two styles (take out the borders on the content maybe?

I don't know if I'm being clear or if what I say is good, but what I mean is:
left has a boxy feel, right has a half-boxy feel.

Alot has changes since my last visit, huh...

I really do not like the FIRST page, then I also do not like the index and alt 4, my favorits are 2 and 3, where i prefere the colors of 3...

And I do not like it that the links are underlined when you hover them, the change in background color is enought, I think


but it really turned out great :D