15 replies [Last post]
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I find myself actually trying to do the design stuff on one. This is prototyping at best.

The client has said he likes a black background, which I think I made some headway convincing him otherwise. The default does use a black bg in what I hope is a stylish/hip way. The alternate style sheet is white.

I was given a logo and a graphic bound design to begin with. Otherwise content and graphics have been slow in coming. I re-use a single image and a lot of lorem ipsum to flesh things out. The entry page is particularly short of content.

The design strategy was to use the colors in the logo as the eyecatchers along with black to build on the client's business. Some compromise was affected in the interest of readability.

Before hitting the client with specific requests for text and photos, I'd appreciate your input, whether it's for changing little things, or a complete toss. Blatant accessibility barriers should be brought to my attention. (a skip links will be added, or the links will be moved--don't know which yet)

No particular attempt was made to make IE look the equal of modern browsers, so for grins, look in IE first.

http://garyblue.port5.com/webdev/propave/pp-index.html

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Where a coder must embarrass himself by entering the design

I think the red drop shadow actually makes the text harder to read. Also, when the dropdowns come down over the heading, there could do with being some more contrast between the foreground and background elements.
A max-width on your wrapper would probably be good too.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Where a coder must embarrass himself by entering the design

Just a few inconsequential bits.

The left drop shadow on the wrapper is not very discernible at all but can be picked up in both IE and Fx. Perhaps beef it up a bit? But from the css it appears it could be meant to be a surround shadow.

I'm assuming the link named Accessibility and Safety is not about web accessibility but safe access/working. However, I was taken with the sub-link glorifying in the word "handicap". How very USofA. Wink

I don't understand why you gave IE (with the old underscore hack, eh!) a different colour for visited links? They are now a very un-butch shade of mauve/purple. Cool

Sorry but I really do not like the text shadowing.

Quote:
Blatant accessibility barriers should be brought to my attention.

Here's one:
Quote:
No particular attempt was made to make IE look the equal of modern browsers

Oh... OK then.

I'll take first option on that gorgeous chap with the big, long thingy in his hands Shock

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Where a coder must embarrass himself by entering the design

Drop shadow, agreed. Plain white looks much better.

On #mainnav li, see if a 2px border and #444 color works for you.

On max-width, I don't see the point. Can you elaborate on the reasons?

What about the white stylesheet?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Where a coder must embarrass himself by entering the design

Lorraine, you slipped in while I was messing with Tyssen's suggestions.

Lorraine wrote:
Just a few inconsequential bits.

The left drop shadow on the wrapper is not very discernible at all but can be picked up in both IE and Fx. Perhaps beef it up a bit? But from the css it appears it could be meant to be a surround shadow.
Well, since IE breaks if you make #wrapper position: relative without also triggering hasLayout, I went the other way and didn't offset for IE. That gave us the surround shadow. The intended drop was meant to be subtle, but I guess I stared at it too long. I increased the offset to 3px and I hacked for IE, so the drop shadow should be more obvious, and apply to IE too.

Quote:
I'm assuming the link named Accessibility and Safety is not about web accessibility but safe access/working. However, I was taken with the sub-link glorifying in the word "handicap". How very USofA. Wink

I don't understand why you gave IE (with the old underscore hack, eh!) a different colour for visited links? They are now a very un-butch shade of mauve/purple. Cool
Um, well they are called 'handicapped' parking and ramps and toilet stalls.

I used the :after pseudo element to put a check mark on visited links. Since IE can't do that, and since a visited link should be marked, I dropped back to the default color for IE. I am open to suggestion for a color to represent a visited state.

Quote:
Sorry but I really do not like the text shadowing.
Fixed on the default stylesheet, but what about the white stylesheet?

Quote:
Quote:
Blatant accessibility barriers should be brought to my attention.

Here's one:
Quote:
No particular attempt was made to make IE look the equal of modern browsers

Oh... OK then.
I actually built these pages based on IE, then went back and added 'progressive enhancements'. Notice there are no dropdowns for IE. Not a problem since they lead to sub-sections of the top level link. The same with using the :target pseudo class.

As near as I can tell, keyboard navigation is OK, Fangs looks reasonable (but what do I know?), and Lynx looks good. Anything else?

Quote:
I'll take first option on that gorgeous chap with the big, long thingy in his hands Shock
Girl, you've just got nasty of late. I love it. Laughing out loud

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Where a coder must embarrass himself by entering the design

Quote:
well they are called 'handicapped' parking and ramps and toilet stalls

Ah but not in the UK. If you only knew the verbal calisthenics we go through so as not to use the word. We are told it could offend.
Quote:
but what about the white stylesheet?

Can't find it - give us a clue.
Quote:
Notice there are no dropdowns for IE. Not a problem since they lead to sub-sections of the top level link.

I'm sure you're correct, however, on testing in IE all the top level links, with the exception of paving, are null. So how was I to know how the other pages will show/act on the sub-links? Or indeed whether there were any sub-links. I only realised there were sub-links when I fired up Firefox.
Edit: missed one
Quote:
I am open to suggestion for a color to represent a visited state.

Howza about the same colour you feed to Firefox, or at a pinch a mid-gray?
End Edit

Quote:
Girl, you've just got nasty of late. I love it.

I'm sure I do not know that to which you are referring of Tongue

ummm... I'm confused with the theory as always. Do I need a sig. "It takes a designer to produce a good looking site, it takes a coder to tell you why you can't have it." Wink

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Where a coder must embarrass himself by entering the design

Apologies in advance Gary these are all slight negatives.

I'm not keen on the line height you have on the top level anchors (1.75em) it tends to make the text look clumsy where it breaks to a second line.

Neither am I keen on the rounded corners for the dropdowns they don't look sharp/smooth enough.

However I do much prefer the alternate stylesheet(white) to the default, to my mind the default is too blocky and heavy, it's colors too primary but the white style would need a complimentary menu to go with it and perhaps raised higher so that it didn't cover quite so much of the main body.

Re the underscore hack IE7 will ignore it ? and will not read the :after pseudo element.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Where a coder must embarrass himself by entering the design

Lorraine wrote:
Quote:
well they are called 'handicapped' parking and ramps and toilet stalls

Ah but not in the UK. If you only knew the verbal calisthenics we go through so as not to use the word. We are told it could offend.
Ah, the 'political correctness' police in action. You have to fight the [email protected]@rds every step. Don't let them spread their silliness.

Quote:
Quote:
but what about the white stylesheet?

Can't find it - give us a clue.
In Firefox, click View⇒Page Style⇒white. In Opera, View⇒Style⇒white.

Quote:
Quote:
Notice there are no dropdowns for IE. Not a problem since they lead to sub-sections of the top level link.

I'm sure you're correct, however, on testing in IE all the top level links, with the exception of paving, are null. So how was I to know how the other pages will show/act on the sub-links? Or indeed whether there were any sub-links. I only realised there were sub-links when I fired up Firefox.
That's what you call progressive enhancement. Wink The IE user sits there fat, dumb and happy, while the user of a modern browser can go directly to the sub-section of interest.

Quote:
Quote:
I am open to suggestion for a color to represent a visited state.


Howza about the same colour you feed to Firefox, or at a pinch a mid-gray?
There's no color change, only the added check mark, ✓. (for which I may need to substitute the radic, due to font family issues)

I will look closely at mid-gray, though from a usability standpoint, that is taken as de-activated.

Quote:
Quote:
Girl, you've just got nasty of late. I love it.

I'm sure I do not know that to which you are referring of Tongue
I am sure that is much worse than the odd split infinitive. Tongue

Quote:
ummm... I'm confused with the theory as always. Do I need a sig. "It takes a designer to produce a good looking site, it takes a coder to tell you why you can't have it." Wink
True, true.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Where a coder must embarrass himself by entering the design

White stylesheet, Hugo?
Right I see it now. Silly me I thought it was meant to be an alternative stylesheet for accessibility purposes. :oops:

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Where a coder must embarrass himself by entering the design

Back to top of page

Gaz wrote:
Blatant accessibility barriers should be brought to my attention.

Gaz wrote:
The IE user sits there fat, dumb and happy, while the user of a modern browser can go directly to the sub-section of interest.

"The" modern browser does now't for most "ordinary" people including those who need to use assistive technology.
Gaz wrote:
There's no color change,

Sorry ?
a:visited { _color: #f0f; /*for IE only*/}
That's the pretty mauve/purple colour I meant.

BTW Who ya callin' fat, Sunshine Evil

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Where a coder must embarrass himself by entering the design

I meant there is no color change for modern browsers. IE does not grok :after {content:…;}, so another method of indicating visited status is needed for that browser; thus, the magenta.

There is no loss of functionality in IE, only a lack of some bells and whistles. For example, have you held the mouse down on a white colored link?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Where a coder must embarrass himself by entering the design

Quote:
For example, have you held the mouse down on a white colored link?

In IE yes I have just done that, but what is it supposed to do? It didn't err... radic my box, didn't seem to do anything. Then there are some people who can't hold the mouse down 'cos they is "handicapped".

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Where a coder must embarrass himself by entering the design

kk5st wrote:
On max-width, I don't see the point. Can you elaborate on the reasons?

You get a horizontal scrollbar at 4 text size increases in FF.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Where a coder must embarrass himself by entering the design

I've altered the stylesheets to reflect most of the suggestions. Some, I didn't use; others, I abused. Wink

A second round of commentary will be appreciated. I can tell you that for me, it's a lot easier to make someone else's designs work than to come up with the 'look' myself.

[notes as people are posting faster than I can answer]
@Tyssen: I saw that, but at 4++ I didn't consider that to be an issue. It looks worse, and is less usable if the width is limited and you go that large.

@Lorraine: Did you mousedown in Firefox or Opera? IE does not show the check mark (which indicates visited), nor does it respond with the you-are-already-here message. Neither IE nor Opera support the :target pseudo class, but it's not really a base function. These are the bits of lagniappe for those who use a browser that supports them.
[/notes]

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Where a coder must embarrass himself by entering the design

It's not probably foremost in the importance of things but the balance of the white.css is bugging me slightly.
perhaps:

#banner {
 border-bottom:4px ridge #ddd;
}
(I quite like the menu overlapping it)

#footer{
 border-top:2px solid #000;
 background:#eee;
 padding-bottom:1px;
 text-align:center;/* dont like the copyright left aligned */
}

#footer p{
 margin-bottom:.3em; }

Just gives a solid base to the page, not of any great design elegance though.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Where a coder must embarrass himself by entering the design

kk5st wrote:

@Lorraine: Did you mousedown in Firefox or Opera?

As I said
In IE yes I have just done that,

same chap wrote:
IE does not show the check mark (which indicates visited),

I must have muddied the waters by mentioning err... radic in a cynical way - trying to indicate I knew what was happening in Firefox. Sorry to confuse.
and again wrote:
nor does it respond with the you-are-already-here message. Neither IE nor Opera support the :target pseudo class, but it's not really a base function. These are the bits of lagniappe for those who use a browser that supports them.

Whatever Cool