Posts in the Standards Category

One has to be careful rooting for the University of Michigan when one lives in Ohio, but I think in this case I can get away with it.  Tantek pointed out that they’re moving the College of Engineering and Computed Aided Engineering Network (love that Tohoscope groove!) sites to standards-oriented design by fall 2004, and exhort their users to get with the times.

Yes, the pages to which I just pointed are rife with tables, images with no alt attributes, and all that funkadelic old-school stuff.  We can expect that to continue until they actually do migrate more towards standards-based design.  I sincerely hope they’ll make a good show of it; I look forward to the day I can list both sites in the “Redesign Watch” sidebar here on meyerweb.

In a similarly Michigander way, I’m hoping to also be able to list MegaTokyo soon, as the man behind the comic recently posted that he’s been delving into CSS-driven design.  Not being a particular anime fan—although I liked Spirited Away, own Cowboy Bebop: The Movie, and am still captivated by the inexplicable FLCL—I’ve still been reading MegaTokyo for a good long while now.  I do get a chuckle every time a representative of the Tokyo Police Cataclysm Division makes an appearance.  Wouldn’t that make a great movie, following those guys around as they cope with and clean up after attacks by giant monsters, demon armies, prepubescent superbeings, and so on?  I’d watch it.

• Go Blue! was published on Thursday, March 25th, 2004.
• It was assigned to the Standards category.
• There have been no replies.

Jason Fried, one of those savvy 37signals guys, posted recently to express some disappointment about the tone of SXSW04i.

I’d like to think I introduced new and different ways to approach common UI quandaries with  my presentation, but I left the conference looking for more. And not necessarily more presentations, but more conversation in the hallways. All I could hear was CSS CSS CSS.

…which would indicate, to me, that the job of convincing developers to use standards-oriented design is not yet complete… unless of course the “CSS CSS CSS” heard was people saying, “Jeez, I’m sick of hearing about CSS CSS CSS all the time.  We get it already.  Why can’t we hear more about X, Y, or Z?”  Which I didn’t hear, but then perhaps I wouldn’t.  If CSS-driven design still has a lot of buzz, then people are still interested in figuring it out how to better use it.

After all, table-driven design is a tool, and CSS-driven design is another tool.  All the talk about CSS is an outgrowth of the continuing effort to show why the shiny new tool is better in many ways than the old, familiar tool.  (“New” is a relative term there.)  Once you’ve figured out that it’s time to upgrade, it’s tempting to think that there’s no reason to keep promoting the new tool.  After all, you’re using it and it should be intuitively obvious to anyone that it’s the right choice.  Sadly, that’s not so.  And it should be said that the limitations in CSS layout help prolong the conversation.  There are some layouts that don’t work well, or at all, without using table markup.  There needs to be a good CSS-G (Grid) or CSS-L (Layout) defined and widely supported before we can really get on to ending all the talk about what design tool to use.

Still, I basically agree with what Jason has to say:

Web standards are great, but people’s own standards include getting things done (and that’s still too hard to do online).

UI designers are making the same old fundamental “forgetting about the human being on the other side” mistakes — except this time their code looks better. Humans — not code validators — use interfaces.

There needs to be more talk about people and goals and scenarios and tasks and clear communication and clear function. More talk about what it’s like to be a human clicking and pointing and struggling to make sense of all this “stuff” that web sites think we need to know and interfaces think we need to do.

Yes!  I was sorry that I had to miss Jason’s presentation at SXSW04i, because I’d like to learn more about making UIs work better.  I’m no usability expert, as I’m sure anyone at 37signals or UIE would be happy to confirm.  There definitely should be more talk about improving usability and design of sites.  The people who know how to do that stuff therefore need to propose and organize such panels for the next SXSW, or whatever conference they’ll be attending.  Jason did that for SXSW04i, but we need more people to do the same.

Because as long as SXSW keeps approving CSS panels, people are going to be talking about it.  If the majority of proposed design panels are about CSS, then it stands to reason that the majority of approved panels will be the same.  In some sense, I’d love to see a conference where there were so many other and more interesting panel proposals that there wasn’t room for Yet Another CSS Is Cool Panel.  Heck, I’d like to attend a conference like that, because I could really enjoy attending it instead of spending half my time and a couple of late nights worrying about what I can say on my panel without boring or confusing the audience.  (Once you count the discussions, false starts, fine-tuning, rewrites, and reworkings of the material, I spent something like ten hours preparing for my ten-minute panel segment.)

If you want the design discussion to be more about people, as I agree it should be, then it’s time to start writing articles, posting to blogs, making newsgroup posts, and presenting conference sessions about it.  It will probably take a huge heap of time, way too much energy, and a near-infinite amount of patience to get the ball rolling in the direction you want.  Of course, you won’t get paid for any of it; hell, you’ll be lucky if you’re thanked for any of it.  That’s what I and a great many other people went through to get things moving toward using standards instead of allowing sites to continue being as heavy and labrynthine as a shelf of Umberto Eco novels.  At no point did the obvious advantages of standards-oriented design sell themselves, lazy sots that they are.  It all had to be done by a group of scattered, largely uncoordinated, individually driven volunteers who took up the effort because they thought it was The Right Thing To Do.  Is it any wonder that, on occasion, we were perceived as being zealots?

I will say, standing where we are today, that for me it was all worth it.  If I’d known ahead of time what would be required, I’d never have started; and I’m sure that if I could clearly remember what was required that I’d swear never to do it again.  (I’m told that parenting is much the same.)  I don’t think the effort can be called complete, but we’re past the hardest part.  Major sites are migrating away from the bloated code of yore and reaping the benefit of simplified, semantic markup.  And it’s true that I do get paid by clients to help in that effort, although I’d like to think that the investment pays off many times over in improved page load times, reduced bandwidth consumption, faster and more efficient maintenance, and so on.  That’s true today.  For a little bit more than half a decade, it wasn’t.

To come back to my point: yes, we need to have more of a discussion about making the user’s life easier.  I’ve done and still do my part, in promoting the use of techniques—tools, if you like—that remove technical barriers to that goal (thanks to reduced page weight, et cetera).  That’s the part I know.  I hope that people in other areas of the Web design space will be willing to expend the time and energy needed to explain the parts they know.  I’d love to learn new ways to make my site better, and that can help my clients make their sites better.  I’m all about that.  I’m ready.  Let’s do it!

• Design Direction Dilemma was published on Tuesday, March 23rd, 2004.
• It was assigned to the CSS and Standards categories.
• There have been no replies.

Back in January, I reacted to Peter Nederlof‘s whatever:hover by musing that it would be nice to see behaviors used to extend IE in other useful ways, like adding generated content support and so on.  Dean Edwards, regardless of whether he saw what I had to say, is doing that and more with his in-progress IE7 behavior suite.  Can you say, “will add support for attrribute selectors, multiclass selectors, and adjacent-sibling selectors to IE/Win?”  Oh yeah… I thought so.  And that’s just the beginning.  He has generated content on his list of things that will be supported, and a whole lot more besides.  The behavior is currently alpha, but it’s everything I could possibly have hoped for and more.  I’m going to be keeping a close eye on Dean’s work, and will be putting it to use as it moves out of beta.

In a similar vein, Dean also created an XBL binding to let Gecko-based browsers use Microsoft behaviors.  I think he just might be a genius.  Thankfully, he’s using his powers for good instead of evil.

Hopefully, I can get one of you XSLT gurus to do the same on my behalf.  I have a problem that’s proven beyond my ability to grasp.  Basically, I have a list of events that include start and end dates; here’s the basic markup that drives it.  I can get a list of upcoming events, no problem; I just pass in information about the current date when I run the XSLT and do comparisons.  What I need is a list of recent events, where “recent” is defined as occuring within the past three months, even if those months straddle a New Year.  I also want to get at least the most recent event even if it didn’t happen within the last three months.  And, of course, I want any results sorted in reverse chronological order.  I cannot figure out how to do all that in XSLT.  Any pointers or takers for this one?  I could really use some help.

(Yeah, yeah, doing it with some database or other would be a snap.  I’m trying to do it in XSLT.  Think of it as a creative design constraint.)

On a totally different note, here’s an interesting pair of articles from SF Gate: Gay marriage momentum stuns both backers and foes and Where Is My Gay Apocalypse?  Thanks to Jeff Veen and Simon Willison for the pointers.

• Hack and Slash was published on Saturday, March 6th, 2004.
• It was assigned to the CSS, Culture, Standards, and XSLT categories.
• There have been no replies.

According to a correspondent, the Redesign Watch and Platelets columns don’t actually sit side by side in Linux, but instead the Platelets drop down to start after the end of Redesign Watch.  This is, apparently, consistent across his various Linux browsers, including IE/Win (using crossover).  I’m not sure I can explain this.  The widths of the two divs that contain those modules are set to 9.5em and 5.5em, respectively, and they have neither margins nor padding (nor side borders).  Add them together, and you get 15em, the exact width value of div#extra.  I was going to claim a rounding error, except it’s happening in all his browsers, so now I’m thinking maybe a font thing.  I might suspect that the Platelets float is expanding its width to enclose the content, except explicit-width floats shouldn’t change width even if its content won’t fit.  IE/Win might do that, but I wouldn’t expect it from Firebird/Mozilla, which apparently also has the problem.

As with any experiment, the design here will probably slowly evolve as I run into such things.  As an example, I may adjust the widths of the two modules slightly, perhaps to 9.25em and 5.75em, just to see if it causes more problems or not.  I knew that, in setting widths so closely to each other and to their inherent content widths, I was taking a risk.  I don’t see the risk as any greater than using a table, though: if I did drop those modules into a two-cell table, then the content might push the table to be wider, thus having it stick out of the sidebar entirely.  That would be fairly awful.  So, as usual, it’s all about tradeoffs.  Here, I traded away “always stay next to each other” to get “always stay within the sidebar.”

As silly as this progression of creeping fixes might seem, it’s nothing compared to what Morbus Iff went through in an attempt to make Panther act the way he wanted it to act, and indeed the way Jaguar acted.  I suspect there are similar tales of woe from any major power user of any operating system, or any technology for that matter.  The more you know, the easier it is to get yourself trapped by unexpected changes.

For example, there have been some problems with the CSS validator of late; Mr. Zeldman has all the details.  As a result, there’s been some confusion here and there about the validity of the Box Model Hack.  Let me be clear up front: the hack is valid.  It always was, and always will be unless the CSS grammar undergoes some fairly radical changes.  This is an entirely different question than whether or not you should use it, or any other hack—that’s much less clear.  I’m not saying that the hack is Good or Bad.  I’m saying that it is completely valid according to the CSS grammar.

Historical note: the Box Model Hack was derived from test p.twentyb in section 7.1 of the CSS1 Test Suite.

Here’s the heart of the matter, the part that causes most people to assume that the hack isn’t valid:

voice-family: ""}"";

I know, it looks like a burst of line noise, or maybe a regexp (but I repeat myself).  It’s still quite valid.  It’s an attempt to supply a voice-family value of "}", while quoting that value.  This is analagous to:

font-family: "New Century Schoolbook";

Now suppose we had a font family named Joe "Average" Public, with the quotes being a part of the name.  We’d likely want to quote the name when making it part of a value.  Thus, we’d need to escape the quotation marks that are in the family name itself, like so:

font-family: "Joe "Average" Public";

In order to keep the quotes in the name from breaking the value up, they’ve been escaped using a back-slash.  That’s part of the CSS grammar.  In that light, then, reconsider the name "}".  If it’s to be quoted, then the quotes in the family name have to be escaped.  Thus, highlighted part of the following example is the escaped voice family name:

voice-family: ""}"";

Therefore: a valid hack.  Again, I’m making no claims that using the hack, or indeed any hack, is a good idea or a bad idea.  I just wanted to make clear how this particular hack works, and that it conforms fully to the CSS grammar.

This is at any rate better than the recent FrontPage ad that’s making the rounds of standards-aware folks.  I’ll just point to Dave Shea‘s post, which contains both a link to the ad in question and a useful hint to understanding why it’s so funny.

• It’s Always Something Else was published on Saturday, February 7th, 2004.
• It was assigned to the CSS and Standards categories.
• There have been no replies.

At the Web Design Meetup last week, Warren expressed annoyance that there are a limited number of fraction character entities.  I pointed out that you can use MathML to represent any fraction you like, but of course it requires a browser that supports MathML.  Those are kind of rare.

So absent MathML, it’s easy to get a nice presentation of, say, one quarter (¼, a.k.a. character entity ¼), but how do you get a similarly nice rendering of thirteen thirty-seconds?  As it turns out, you can at least get close with a bit of structural massaging.  (That sounds so much better than “structural hacking,” doesn’t it?)  Here’s what I came up with:

span.frac sup, span.frac sub {font-size: 75%;
  vertical-align: baseline;
  position: relative;}
span.frac sup {top: -0.5em; left: 0.15em;}
span.frac sub {left: -0.15em;}

17 <span class="frac"><sup>13</sup><b>/</b><sub>32</sub></span>

That results in the following, which I recreated using inline styles just to make life easier when I archive this post:

17 ¹³/₃₂

Not too bad, at least in Safari, Mozilla, and IE5/Mac, but not great.  In his own efforts along these lines, Warren uncovered the fraction-slash character entity (⁄), which could help improve the result.  I also notice that my numbers are bigger than the numbers in the original entity.  So I adjusted my styles, with the following result.

span.frac sup, span.frac sub {font-size: 60%;
  font-weight: bold;
  vertical-align: baseline;
  position: relative;}
span.frac sup {top: -0.5em; left: 0.1em;}

17 ¹³⁄₃₂

So let’s compare the one-quarter entity to the styled version.

¼   ¹⁄₄

There are font-family differences, I admit, but they’re pretty close to each other in the browsers I mentioned before.

The problem, really, is the markup involved, but I don’t see how one can really reduce it any further.  MathML’s representation of fractions isn’t noticeably less weighty, really, not even counting possibly required namespacing, which I’m not going to include here:

<mfrac><mi>1</mi><mrow>4</mrow></mfrac>

I suppose that if I wanted to show arbitrary fractions a lot, I could represent them in MathML and then transform the math markup into HTML before delivering it to browsers.  I don’t have a lot of need for such fractions, at least not so far, but it was an interesting exercise.

Now for a little cleanup with regard to previous posts.

• Chuq pointed out that iLife was never totally free, but that Apple was allowing updates to old versions at no cost.  In my case, iLife appeared to be free because it came installed on my OS X laptop, so I never overtly surrendered money for the product.  I suppose the cost is somehow built into the cost of the operating system.  Regardless, I still think that there was a bit of baiting and switching in letting people download major upgrades at no cost and then closing the gate.  I guess what I want is consistency; I didn’t realize I was benefitting from lax license enforcement, if that’s what it was.  I thought Apple was just making decent tools available for free to Mac users in order to draw more people to the Mac.  That would make some business sense, even if it isn’t what they were doing.  After all, I haven’t heard any plans to charge for upgrades to iTunes, and I don’t expect that I will.  Apple may be many things, but grossly stupid isn’t generally one of them.

  At any rate, I’d still be interested in paying for just an iPhoto upgrade, especially since I looked at some programs readers e-mailed me to suggest, and they were all either not what I wanted, or too darned expensive.  I imagine there are people who would pay to download GarageBand as a standalone, for example.

• It turns out that there are a number of demonstrations of using behaviors to get PNG transparency in IE/Win.  Here are a few that people sent me:

  • PNG Behavior Demo from WebFX
  • Sleight from Youngpup
  • Explorer versus PNG (AlphaImageLoader) which offers the most complete explanation of what’s happening, but employs language that might not be work-safe—not a condemnation, just a warning

  I’m sure there must be others.  Google could tell me, but I feel overloaded already.

Carolyn turns six weeks old tomorrow.  I’ll have to find a good picture to post, especially since so many people have asked for them.  She’ll get her own page sooner or later, but I’ve had other and much more pressing things on my plate.  As long as I have it ready by the time she wants to start blogging…

• Fractional Styles was published on Wednesday, January 14th, 2004.
• It was assigned to the CSS, Mac, and Standards categories.
• There have been no replies.

Thanks to those of you who wrote in with the answer to my Dock question.  It turns out that I’d been trying to drag folders into the same Dock region that holds my application entries, and that’s no good.  Folders can be added in the area where the Trash can, minimized windows, and running applications not already in the Dock sit.  It hadn’t even occurred to me to try to add them there, because that’s where active stuff (and the Trash) goes.  Static links to resources go in the other area, as far as I’m concerned.  Just another little shove toward jettisoning the Dock and registering DragThing.

As for iPhoto plug-ins, I did find BetterHTMLExport pretty quickly, and the 2.0 version has exactly what I want—and about ten times that in stuff I won’t ever need.  If I were creating galleries, it would be a godsend.  I’d register it.  But all I really want is a plugin that lets me set the size and image quality of exported JPEGs, and that then exports them with smooth scaling instead of the jagged scaling iPhoto uses.  Frankly, iPhoto should do all this without needing a plug-in, but it doesn’t.  This seems like a simple little widget, one that could be created quickly and released as freeware.  Anyone have any leads on one that exists, or interest in creating such a tool?  Heck, point me at a good beginner’s resource on how to analyze and create iPhoto plug-ins and I could take a swing at it myself.  In my copious spare time, of course.

Panther’s been pretty cool so far—it certainly feels much snappier than Jaguar did—although there are (as always) things that annoy me.  The behavior of drag-selecting in the List view changed, and not for the better.  The reintroduction of labels (and where were they until now?) is nice, but I would have preferred a better presentation of them in OS.  Then again, Exposé thoroughly rocks not just the house, but the neighbor’s houses as well.  The fact that I can shuffle just those windows associated with the current application is just too darned awesome.  Exposé also revealed that Mozilla-based browsers create a small hidden window offscreen, one that you can’t really access but is still there.  It comes zooming in from the upper left when you invoke Exposé, and zips away when you un-expose everything.  I wonder what it’s doing.

In case you didn’t see this pointed out elsewhere, the main page (at least) of the Sprint PCS site is an XHTML+CSS layout now.  One of these days I’m going to have to compile a list.

• Panther Patter was published on Thursday, November 20th, 2003.
• It was assigned to the Mac and Standards categories.
• There have been no replies.

This completely and utterly rocks.  I’m going to set up a Virtual PC drive just to try it out.  But Matt Haughey’s question is worth considering: why didn’t we know about this sooner?

• One System, Many Explorers was published on Thursday, November 6th, 2003.
• It was assigned to the Browsers and Standards categories.
• There have been no replies.

Robert Scoble has said that Ryan Dawson isn’t a Microsoft employee, which I all but said he was in my last post.  Robert also said that Ryan hasn’t seen Longhorn, and thus can only be making guesses about it.

My apologies for the misunderstanding concerning Ryan’s affiliation, and the nature of Longhorn Blogs, which I had taken to be a Microsoft-sponsored site.  It isn’t; it’s a community site where anyone can get a blog and start posting.  Presumably about Longhorn.

As for the rest of my post, where I expressed my concern over what might happen in Longhorn and how that might affect the Web, my thoughts were not based solely on Ryan’s post, but were instead the end product of several months of thought and information from a number of sources.  If anything, Ryan’s post was simply the trigger that got me to fully express them in public.  I hope to one day be able to point back to that post and say, “Wow, was I ever off the mark there.”  The nature of speculation is that it is often proved incorrect, and I can accept that if it happens.  I’d far, far rather be wrong than right in this case.

Regardless, we’ll get our first taste in a few days.  It will be interesting to see what people think.  It’ll be even more interesting to see if Longhorn is limited to Intel architectures or not.

• Whoa, Big Fella! was published on Saturday, October 25th, 2003.
• It was assigned to the Standards category.
• There have been no replies.