CSS is a web designer's mana.
I like to call it makeup
for your markup. As it is with all good things, it can be thoroughly abused.
We –hopefully– all know the result of most
WYSIWYG packages: "headers"
using <div>s and CSS instead of
<h* /> markup headings, <font />
tags simply replaced by <span style="font properties here" />
even when there is adequate markup available, and so on,
ad nauseam.
Well, bollocks to that! I'll bet you I can make Jakob Nielsen cry when he sees this.
"8. Non-Standard Link Colors" from Top Ten Mistakes in Web Design.
"Links to pages that have not been seen by the user are blue; links to previously seen pages are purple or red. Don't mess with these colors since the ability to understand what links have been followed is one of the few navigational aides that is standard in most web browsers. Consistency is key to teaching users what the link colors mean."
Here's to you, Jakob.
This is not a link
<span class="fakeLink">This is not a link</span>
.fakeLink
{
color: blue;
background-color: white;
text-decoration: underline;
cursor: pointer;
}
"3. Non-Standard Use of GUI Widgets" from Top-10 New Mistakes of Web Design.
"Currently, the worst consistency violations on the Web are found in the use of GUI widgets such as radio buttons and checkboxes."
Well, these look pretty standard to me...
<span class="fakeText">This is not a text input</span>
<span class="fakeList">This is not a dropdown list <span class="fakeButton arrow"> </span></span>
<span class="fakeCheck"><span class="box"> </span><span class="label"> Check</span></span>
<span class="fakeButton">This is not a button</span>
.fakeText
{
border: 2px inset ThreeDFace;
font: menu;
cursor: text;
}
.fakeList
{
border: 2px inset ThreeDFace;
font: menu;
cursor: default;
}
.fakeList .arrow
{
background: url("arrow.gif) ButtonFace no-repeat center;
font-family: monospace;
font-size: 10px;
}
.fakeCheck
{
cursor: default;
}
.fakeCheck .box
{
float: left;
width: 1.25ex;
height: 1.25ex;
margin: 3px 3px 3px 4px;
border: 2px inset ThreeDFace;
line-height: 1.25ex;
}
.fakeCheck .label
{
float: left;
}
"10. Anything That Looks Like Advertising" from Top-10 New Mistakes of Web Design.
"Selective attention is very powerful, and Web users have learned to stop paying attention to any ads that get in the way of their goal-driven navigation. That's why click-through rates are being cut in half every year and why Web advertisements don't work."
Then I suppose those unthankful little bastards won't be able to reach my Ultra Cool Mega Site. Incidentally, while looking for the standard banner size, I found an article about effective banner advertising. Go read it, it's a hoot!
(-: Jan!'s Ultra Cool Mega Site :-)
Click here to find out free information!!!
You don't want to see this, believe me.
I always highlight text by selecting it so it stands out while reading a page. It also helps to keep track of where I am when scrolling. Too bad Mozilla doesn't make the highlight color contrast with the background. If I have a yellow background and set my highlight color to yellow, I won't know if text is highlighted or not.
Well I'm quite sure I didn't select this text!
I always highlight text by selecting it so it stands out while reading a page. It also helps to keep track of where I am when scrolling. Too bad Mozilla doesn't make the highlight color contrast with the background. If I have a yellow background and set my highlight color to yellow, I won't know if text is highlighted or not.
You know, stuff. It bugs me.
<span class="fakeSelection">I always highlight text [ . . . ] or not.</span>
.fakeSelection /* IE seems to default to the other way round */
{
color: HighlightText;
background-color: Highlight;
}
[class].fakeSelection /* restore the "good" colors for Mozilla and Opera */
{
color: Highlight;
background-color: HighlightText;
}
