Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer

Weblog Entry

Review Day

September 04, 2003

Sitepoint Forums contest winners announced, under-the-hood changes recently made around here.

A Design Review

Sitepoint Forums ran a CSS design contest recently, inspired by the Zen Garden. The entries are in, and some are great.

I don’t know what the official contest policy is on the original designers re-using these, but Patrick H. Lauke’s example design Gothic found its way into the Zen Garden as Gothica so I’m inclined to think it’ll be alright.

That being said, Ray Henry with his fabulous reh3 and even more fabulous Deadend Prophecy had better get in touch with me after the results are in. That is, if, for some very very strange reason he doesn’t sweep the contest. You may remember Ray’s existing Zen Garden design Backyard. Beautiful work, all three. §

A Technical Review

With any luck, you haven’t noticed: I’ve been doing a lot of tweaking under the hood around here, and I think it’s about time to mention a few things.

I’m now employing Pixy’s absolutely brilliant CSS rollovers on the right. Where before there was a slight blink as the image loaded upon first mouseover, now there’s a completely seamless transition.

5.0 browsers should handle this site a little better. IE5/Win was never much of a problem, but there are still a few tiny little quirks yet. IE5/Mac was a complete disaster, and thanks to some help from Alicia Lane (and a gentle nudge to actually do something about it), I’ve sanitized the majority of the blast radius. There are still problems, but at the very least it’s somewhat usable now.

Search is (finally) coming. I have to do some major work on the templates, but I’ve got the functionality started. Now to figure out where to put it.

Cynthia Says thinks my front page passes all the major checkpoints for AAA. Bobby doesn’t. I know there are still outstanding issues regardless, and a good read-through of WCAG is going to help me fix them, but I’m moving in the right direction.

It should be noted that the errors reported by Bobby are questionable:

  • Do not use the same link phrase more than once when the links point to different URLs. As Ken Walker has recently discovered and Jukka Korpela analyzed in further detail, it should be possible to provide a title for each link and satisfy this requirement. That doesn’t work.
  • Separate adjacent links with more than whitespace. Cynthia says I’m doing this. Bobby says I’m not. The rejected markup is my headers, which look like so: <h3 id="p000244"><a href="http://etc/000244.asp" title="perma-link for [this article]">Plugins & <object> - Illegal?</a></h3> If I’m doing something wrong here, I’m all ears. But I don’t think it’s me.
  • Make sure event handlers do not require use of a mouse. Well this is just plain silly. There’s not an iota of script on my front page.

Cynthia gets them right. However, since those of us who spend the time doing it right like to make mention of it, Cynthia’s inability to directly link validation results for any given site continues to be a problem. There’s a very important point that should be made in here about not trusting software anyway since the guidelines need a human eye for complete validation, but I’m getting verbose as it is.

After publishing a piece on bulletproof XHTML, I obviously had to start thinking about the issue myself. You might be pleased to note that most pages on this site, including the comments pages are validating. The current plan is to ‘flip the switch’ and trigger XML rendering mode in a few weeks, after I’ve had time to convert old content and make sure I’ve got my error-correcting working properly. There will be a follow-up piece on how I went about it at that time.

Up until now I was marking up all my <acronym>s by hand. Thanks to Brad Choate’s plugins and Mark Pilgrim’s macros, I don’t need to anymore. Interesting note about the use of abbreviations on a page: WCAG suggests providing a title for an <acronym>/<abbr> when it first occurs in the document. It doesn’t say you can’t do the same for other occurances, but it suggests you don’t need to.

No problem, that’s the exact behaviour of the plugin. But it begs the question — even though I’m not applying titles to repetitions, do I need to markup the rest of the occurances with the proper tags? My gut feeling is that I do, but the plugin doesn’t allow that. So I’m at an impasse here: More work for me, vs. proper semantics. Hmmm.

And yes, I know the difference between <acronym> and <abbr>, and no I won’t use the latter until IE supports it. End of question.

If you’ve made it through all that, my final point is that this site still looks the same as it did last week. Ever get the feeling that sometimes you have to wear too many hats? §

Reader Comments

Bob says:
September 04, 02h

I personally think that if you can achieve a good balance between Cynthia and Bobby, you’re doing very well, but what do I know? :-)

Ethan says:
September 04, 02h

Dave — many congratulations on the recent improvements. I know how time-consuming they can be, so very nicely done.

MikeyC says:
September 04, 02h

Dave: “And yes, I know the difference between <acronym> and <abbr>, and no I wonít use the latter until IE supports it.”

You could always use: <abbr title=”Cascading Style Sheets”><span title=”Cascading Style Sheets”>CSS</span></abbr>

Yes, it is true that we are introducing semantically meaningless mark-up, however, IMHO, semantically meaningless mark-up is preferable to using semantically incorrect mark-up.

In a real-world sense it doesn’t really make a difference that you are marking up abbreviations incorrectly (in 2003) but assuming that one of your goals is to “future-proof” this site, who can really say how the “browsers of tomorrow” will interpret the tag. Abbreviations should be spelled-out while acronymns read-out, right?

Note: I am just playing “devil’s advocate” (hypocrite) here, as I also use the ACRONYM tag for everything on my site ;)

September 04, 08h

I find constant use of the acronym and abbr tags annoying. Use them for the first occurrence of each term and then move on. Most of your readers already know what they mean, so the extra underlined text just muddies up your paragraphs. Those who don’t know what they mean can read the title the first time, and then they know.

Think of it too just like in a newspaper article or movie review:
“Bruce Wayne (Michael Keaton) is a billionaire playboy by day and Batman by night[…]” - you don’t keep reminding your readers that Michael Keaton plays the part, you just do it it once.
The Food and Drug Administration (FDA) had this to say[…]” - the first time you use the term you provide the acronym, and then you just use the acronym from then on.

September 04, 08h

re: MikeyC’s suggestion

Due to Anne’s nudging, I implemented a similar change to MT Macros:

My MT Macros source code is available on our Templates page, if you want to check it out.

re: “Separate adjacent links with more than whitespace.”

Believe it or not, I think that Bobby’s making a stink over the <a> tag list item that comes immediately before your linked header. I had this come up, ironically, in the Section 508 entry. Bobby interprets whitespace as anything (carriage returns, spaces, combinations thereof, etc.) between two <a> tags, even if one is in an unordered list and the other is in a header. Kinda silly. My workaround for this issue was to put a small dot (·) around my “posted” links to seperate them from the blog content.

September 04, 08h

“Thanks to Brad Choateís plugins and Mark Pilgrimís macros,…”

Ugh! That’s an ugly hack. Why not use the Acronym Plugin

I’d use it myself, but for the fact that I *have* decided to distinguish between <abbr> and <acronym> and have not gotten around to hacking support for that into the code.

MikeyC says:
September 04, 09h

One more possible solution:

Styling <abbr> in IE

It relies on JavaScript so obviously those IE users with scripting disabled will not see the effect.

Pretty neat though…

September 04, 11h

The distinction between abbr and acronym _is_ important. Although some people think not, it is. Acronym’s are “always” words so you could style them:


And abbr is most of the time just a “normal” abbreviation:


And you should make distinction and don’t code to a browser. We don’t code for Jaws, why would we code for IE?

haze says:
September 04, 12h

shhh… my hats shield me from the aliens’ mind-control rays and wards off bad web developers.

Michael says:
September 05, 04h

Character Entities (spaces introduced, as I don’t know how they’ll show up).

I don’t know what Safari doesn’t like about your changes, Dave, but it now shows your last two section icons as:

& sect;

rather than displaying the character. I guess it would prefer & #167;

I had thought entity “names” were only a problem for it in XML parsing mode but apparently not. However, it handles the section-sign entities in the comments section OK. Nevertheless, in Ethan’s comment I get:

& mdash;

rather than an em-dash (& #8212;)

Let me add: this is not a complaint about your wonderful site of any sort. I just thought it was interesting.

Dave says:
September 05, 05h

The CSS rollovers are excellent, thanks for bringing them to my attention :)

MikeyC says:
September 05, 05h

Anne: “Acronymís are always words so you could style them…And you should make distinction and donít code to a browser”

True. As well, these “browsers of tomorrow” may have unique ‘default’ behaviours when encountering unstyled ACRONYMS and ABBR tags, so it definitely makes sense to use them correctly, as CSS may be turned off/unavailable in the device.

Dave S. says:
September 05, 07h

Jacques - despite some frequent Googling on the subject, I wasn’t aware of that plugin. Dammit all anyway.

Anne - “And you should make distinction and donít code to a browser.” Yes, you’re right, we shouldn’t. But here’s where real-world and theory diverge. IE5/6 is still run by ~90% of the population last time I checked; we throw box model hacks in our CSS, and so we also use acronym. Theory is nice only so far as it doesn’t break expected behaviour for the *majority* of your audience.

Michael - not Safari: bad macros. I have no idea why, but it keeps flipping back and forth between rendering those §s properly, and not. Theoretically I’ve solved this problem, but for whatever reason these pages keep reverting.

September 05, 10h

All of your readers will know the abbreviations. You know you only put it there for markup reasons, not for accessibility or anything like that.
So if you put them there, make sure you do it right. IMO you can better use abbr than acronym.
Besides that there are certain JavaScript ‘hacks/workaround’ or you could pust put in a useless span (just like CSSZenGarden ;)).

Ethan says:
September 05, 11h

Anne–Dave’s reasoning strikes me as more than sound, and I’m not just saying that ‘cause that’s how I code on sidesh0w. Obviously, the distinction between what we *should* be coding and what we’re forced to support is one we need to be mindful of.

Otherwise, you and I would be serving our sites as application/xhtml+xml to all user agents, rather than making exceptions for Internet Explorer. ;)

Dave S. says:
September 05, 11h

Anne, you’re assuming too much. From an e-mail I received this morning, for example:

“I’ve been looking around your sites for a wee while now… I’d been avoiding css, under the impression that it was browser dependent and would cause problems with text-only browsers and visually impaired users. I see I dont need to worry anymore.”

Not to single out this person specifically, but e-mails like this tell me I have people reading my site of all levels of skill and knowledge. Making blanket statements about what some will or won’t understand is a dangerous precedent.

I’m not opposed to hacks, but Javascript seems the wrong way to go about it to me. Perhaps I’ll consider a span approach. Perhaps not. Maybe I’ll just drop the <abbr>/<acronym> approach altogether and go with naked spans!

Point being, there’s no obsequious way to do it in 2003, thanks to IE. Can we move on?

September 05, 11h

You miss the point that IE users won’t see the tooltip either ;).

I should have known that, people are learning CSS, ‘cause of you :).

The JavaScript hack can be described as ugly, but it serves you IE users, doesn’t it?

James says:
September 05, 12h

Surely having unstylable abbr tags in IE is not a problem huge enough to use the incorrect acronym tag instead?

So your XHTML’s and your CSS’s don’t have the dotted underline! If users of IE care so much about such a minor detail, why are they using it in the first place.

I don’t think pandering to a browser’s needs should take the place of correct coding in a case where such a minor effect is seen. The BMH solves a possibly major layout issue. Unstyled abbr’s are a minuscule affair in comparison.

Maybe I’m missing a point here but this seems to me like a no brainer.

marc says:
September 07, 08h

Just so ya know Dave, im running XP pro with IE 6 and i still get a blink on your new mouseovers… is this an isolated case or have other people found this as well ?

Dave S. says:
September 07, 10h

Marc - to quote another: ‘when in doubt, reload.’ You’ve got cached stylesheets, no doubt.

Shaun says:
September 09, 03h

Re: Comments 19 & 20.

Actually, if you have changed your cache settings to “every time” or “always” (excuse the fuzziness, I’m on a Mac so this is second hand info) as developers are wont to do then you’ll still have the blink. The default setting of “automatically”doesn’t suffer from this visual stutter though.

September 09, 06h

Re: Comment 13.


With a little tinkering, I have fixed the acronym plugin for MT to produce correct acronym/abbr markup (title supplied with first instance; subsequent instances are marked up, but without title).
And (with the usual crufty Javascript hacks) it works in IE.

I’ll write it up and post the code in a couple of days.

April 02, 06h

A bit late comment, but ahwell… :) Here’s a nice javascript-less solution to make ABBR work in IE!