Posts from July 2004

Self-described ‘Web hobbyist’ François Briatte recently conducted a survey of ten sites, comparing them on 25 different points, and has published the results.  I suggested that those responsible for the sites that were reviewed might write up their perspectives on the rankings and their dissidence levels, as Dave Shea and Jon Hicks have already done.  I tied for John Gruber for third, which amuses me.

I’ve seen some criticism of this survey scattered about, with two points made:

1. The survey is too small, only examining ten sites.
2. The survey is too limited in terms of the kinds of sites studied (all ten are basically Web design blogs, to one degree or another).

True, François picked ten sites instead of several hundred, all ten being sites that François reads regularly, and looked at them in detail.  Well, at least he went to the effort of doing it and publishing the results for free.  Don’t like the number of sites, or the sites surveyed, or the questions that were asked?  Fine.  Do your own survey and publish the results.  We’re waiting.  I’d actually like to see more such surveys, especially those done with the impressive degree of thoroughness and thought that François displayed.

Here are my thoughts about meyerweb’s rankings and the criteria in general; I’ll stick to commenting on those points where I differed from the crowd, or else where I think there’s something particularly interesting to note.

Are links underlined / are hovered links underlined / do visited links differentiate? (yes on all three)

As it turns out, my site is acting as a mirror for François’ browser preferences: I don’t assert link styles at all.  What I’d be interested to know is how many of the surveyed sites follow the same path.  My guess is few, or none.  Even Jakob‘s style sheet asserts link styles.

Is the layout fixed in width? (no)

Mine is not, and that leaves me in a strong minority.  I prefer a layout that flexes with the browser window, and I suspect I always will.  This does mean that the layout can start overlapping itself at very narrow window widths, but then a fixed-width design forces a scrollbar at narrow widths.  Which is better?  I’ve made my choice, of course, as have all the others surveyed.  I’ve yet to decide one way or the other is truly better, although of course many people have very strong opinions.

Is there a search box? (no)

I should probably add one, but for some reason it just never seems like a critical priority.  There is a search function on the archive pages for “Thoughts From Eric”, but that comes built into WordPress.  It may be that my reluctance stems from the fact that I’d probably end up using a Google search box, which seems like cheating.  I should probably get over myself and just do it.

Are “steal these” buttons used? (yes)

Dave Shea’s reaction was: “Ugh. Please, no.”  I think they’re useful, both for RSS feeds and for the “XFN Friendly” badge.  I’d also like to think they’re well integrated into my design (such as it is), although obviously that’s a matter of taste.

Does the navigation bar use image rollovers? (no)

Nope, it’s all text.  I may one day get fancier about the design (don’t hold your breath) and if so, I’ll probably have some kind of image rollover for the navigation.  At the least, I’d use a Sliding Doors-type decoration, which could count as an image rollover effect.

Is there a print stylesheet? (yes)

I have to admit to some surprise that the majority of the sites didn’t use one.  Mine is pretty low-key, doing basic things like preventing the sidebar from being printed.  I wish more sites did that kind of thing.  A link-filled sidebar is as useless on the page as it is useful on the Web.

Is the page UTF-8 encoded? (no)

I’m still kickin’ it ISO-8859-1 style.  This is in part because when I tried to enable UTF-8 encoding a while back, all my characters got thoroughly mangled.  I spent some time trying to fix it, and then dropped back to 8859, which I knew would work.  If I ever figure out how to do UTF-8 correctly, I’ll probably switch over.

Is the DOCTYPE Strict / is the page XHTML / is there an XML prolog? (no on all three)

I use HTML 4.01 Transitional, so clearly there wouldn’t be an XML prolog.  Even if I used XHTML, there wouldn’t be one, since its presence triggers quirks mode in IE6/Win—thus the 100% agreement among the surveyed sites on its absence.

So why HTML instead of XHTML?  Because there continue to be no major advantages to valid XHTML over valid HTML, which is what I strive to attain.  In some sense, there are disadvantages, albeit of a minor variety—I find trailing slashes on empty elements and the lack of attribute minimization to be annoying.  If I’d learned XHTML first, I’m sure I wouldn’t care about them, and would wonder why HTML was deficient in those areas.  Since I taught myself HTML when the cutting edge was HTML 2.0, I have some fairly deeply ingrained habits that cause me to lean toward HTML.  I also have a decade’s worth of documents that I don’t really feel like trying to convert to XHTML just so I can claim big markup geek bragging points.  Sure, there are tools that will do it for me.  Then I’d have to go back and check to make sure the tools didn’t mangle anything.

I’ve gotten the occasional critical e-mail about this over the past couple of years, chastising me for not being a role model in this area.  I like to think that I am.  I’m trying to show, by example, that there’s nothing wrong with using HTML 4.01 as long as you’re using it correctly.  If your HTML is valid, you’ll have no more trouble converting it to a ‘pure’ XML format than you will if XHTML is your starting point.  So I stay with HTML, and probably will for some time to come.

One other point: the education of my quotes is entirely due to WordPress, and in pages that aren’t part of WP I don’t have educated quotes.  C’est la mort.

I’ve already written François to congratulate him on his work, which I think is a good look at the underpinnings of the sites surveyed and sheds some light on points that don’t get discussed very often—or when they are, it’s in needlessly polarizing ways (witness the various flame wars over fixed width vs. liquid width, HTML vs. XHTML, and so on).  It’s refreshing to see someone collect some facts, do a little analysis, and freely share the results.

• Creative Dissidence was published on Wednesday, July 28th, 2004.
• It was assigned to the CSS and Standards categories.
• There have been sixteen replies.

Just a few hours ago, I received a FedEx package containing a brand spankin’ new copy of the CSS Pocket Reference, 2nd Edition.  This new edition includes all of the CSS2 and CSS2.1 properties and values, information and algorithms covering the box model, table layout, font selection, and more.  It’s almost 130 pages, and that’s without a single page of it taken up by support charts.  The first edition has taken some flak for being obsolete; this new edition should address those concerns.  (Unless of course you want a CSS3 pocket reference, in which case this book won’t help you, and anyway, you’ll need much bigger pockets.)

And it’s still just $9.95!  What a bargain.  You should buy two.  That way you can have one for your pocket, where it will be handily available at all times, and the other for your bookshelf, where it will stay crisp and neat.

For a while I’d had a vague plan that, when this book’s arrival was announced, I would take that opportunity to say that I was taking a break from book writing for a while.  So much for that plan; I just today agreed to start another project.  Looks as though Molly was right about me.  I wonder how long it will be until there’s a cure…

• Pocket Style, Take Two was published on Monday, July 26th, 2004.
• It was assigned to the Books and CSS categories.
• There have been three replies.

Thomas Jogin recently posted an interesting entry that asks about HTML headings.  He starts out this way:

For some time now, something has been bothering me about the common way of marking up a document structure. First of all, it doesn’t seem like there is a consensus on wether or not to use multiple H1 tags, or any at all.

I agree: there isn’t a consensus on that point.  There is also a lack of consensus on his second question:

Secondly, since H1-H6 are supposed to denote the structure of a document, do they really have a place in the side column as section headlines?

In fact, there’s very little consensus on heading use in general, except that you should use them instead of font size="+3" and that sort of thing.  Headings make for more visibility in Google than does presentational markup, after all.

In considering Thomas’ question, Andy Budd goes to the specification, which is always a good place to start.  As he points out, HTML 4.01, section 7.5.5 states:

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

So as far as a semantic definition of the heading elements goes, all we have is that heading levels indicate degrees of importance.  Nothing about what order they have to be in, or whether you can skip levels, or anything else besides the creation of a spectrum of importance, as it were.  Because that’s all we have, there is plenty of room for people to fill in their own interpretation of what’s best.  I approach headings as merely indicating a level of importance, and don’t bind myself to a decreasing numeric order.  That’s my take on it; others feel differently.  Let’s take a look at two cases where my approach led to very different results.

The first case is Netscape DevEdge.  Here’s the markup skeleton for the first part of the home page as I set it up (the actual markup as of your reading this may be different):

<h1>
 <a href="/" target="_top"><span>Netscape</span> DevEdge</a>
</h1>

<form action="/search/app/" id="srch" method="get">
<h4><label for="search-input">Search</label></h4>
(...inputs...)
</form>

<h2>Netscape 7.1 is now available</h2>
(...paragraph text...)
<h2>The DevEdge RSS-News Ticker Toolbar</h2>  
(...paragraph text...)
<h3>Recent News</h3>
(...list of links...)

Here, the order is h1-h4-h2-h2-h3.  I guarantee you that some readers are feeling a deep outrage right now, because we got more than one piece of feedback berating us for putting the headings ‘out of order’.  The h4 was clearly out of place, we were told, and needed to be fixed.

The placement of the search markup in the document was dictated by our preferred document linearization, however.  In an unstyled view (a really old browser, say, or a cellphone text browser) we wanted the masthead to be immediately followed by the search feature, and that to be followed by the main content.  The main content was in turn followed by the sidebars, which was followed by the navigation and configuration links, and finally the footer.  So we weren’t about to move the search markup just to make its heading level fit into a descending-number hierarchy.

We could have elevated the heading to an h2, but that struck me as being a poor choice.  Is the “Search” title really as important than the top headlines on the site?  I certainly didn’t think so.  My only other option was to change the h4 to some non-heading element and style it that same as I had the h4  That’s certainly easy to do, since with CSS you can make any non-replaced element look like any other element, but that would mean the search area had no heading at all.  That also struck me as a poor choice.

So I took the route I did.  I suppose I could have, as Richard Rutter suggests, put in some extra headings to increase the structure and then “switched off” their display with CSS.  That would mean inserting an extra h2 and h3 between the masthead and the search.  What would they say?  Personally, I’m not thrilled with that idea either, at least for the DevEdge case.

The second case I’d like to consider is meyerweb.com itself.  Here’s the basic structure of the home page, at least as of this writing:

<div id="sitemast">
<h1><a href="/"><span>meyerweb</span>.com</a></h1>
</div>
<div id="thoughts">
<h3 id="thtitle"><span>Thoughts From Eric</span></h3>
<div class="entry">
<h4 class="title"><a href="..." title="...">entry title</a></h4>
<h5 class="meta"><b>entry date</b></h5>
</div>
<div class="entry">
<h4 class="title"><a href="..." title="...">entry title</a></h4>
<h5 class="meta"><b>entry date</b></h5>
</div>
</div>

Here, I skipped the h2, but other than that everything’s in a descending-order hierarchy.  In this case, such an approach was a fairly natural fit to the information being presented.  I don’t have an h2 on the home page because it’s reserved for page titles, such as the “Eric A. Meyer” at the top of my personal page.  The page title of the home page would be “Home Page” or “Main Page” or something equally silly, so I left it off.  (And yes, there are b elements in my markup, and I’m doing that on purpose.  I’ll talk about it some other time.)

Meanwhile, in the sidebar, the section headings (such as “Distractions”) are enclosed in h4 elements.  That makes them as important as entry headings, and I’m okay with that.  I might have chosen h5 instead, but probably not h3.  The one exception is “Blog Watch”, which is an h5 element.  I don’t have any rigorous logical explanation for this; it’s all based on gut feelings.

In the end, I don’t think there will ever be a heading consensus.  XHTML 2.0 attempts to bridge the gap by adding the generic h (heading) element, which helps create a descending-order hierarchy when combined with nested section elements.  What bothers me is that the Working Group hasn’t decided whether or not h1 through h6 should be deprecated; to do so would in effect attempt to force a consensus in favor of a descending-order hierarchy.  That would mean that headings were no longer as much about importance as they were about having a document that’s structured like a specification, or maybe an e-book.

In the here and now, though, we’re left to ponder these questions and arrive at our own conclusions.  Each answer will depend on the temperament of the ponderer, and the project upon which the pondering is predicated.

• Pick A Heading was published on Wednesday, July 21st, 2004.
• It was assigned to the Standards category.
• There have been sixty-five replies.

A few people have written me over the past week to point out that I could have saved myself a lot of time when I transferred files over to my new Mac laptop.  Standards and accessibility warrior DeWayne Purdy was one of the first, and wrote:

…there’s a better way than ethernet to transfer  files between two Macs, using Target Disk Mode. Connect the two Macs  together with a firewire cable, with one Mac on and the second one off.  Then turn the second Mac on and hold down on the T key. A firewire  symbol will come up on the screen of the second Mac, and the HD name  will show up on the first Mac, just like it’s an external hard drive.  The files can then be transferred at firewire speeds, much faster than  via ethernet.  (These are condensed instructions, I’d look up the full  instructions before doing it… there’s a few little, but important,  details, like making sure you drag the icon of the second Mac to the  trash before disconnecting or shutting it down).

So I looked up the full instructions, and here they are.  They’re not much longer than DeWayne’s summary, actually.

• FireWire Transfer was published on Wednesday, July 21st, 2004.
• It was assigned to the Mac category.
• There has been one reply.

It seems I was a little unclear in my recent post about floats, and compounded the problem with the post title.  A number of responses said, basically, “maybe they’re bad for layout but what else is available?”  I didn’t mean to suggest that nobody should use floats for layout, or that using them in that manner is somehow wrong; my apologies if I did so.  There aren’t too many alternatives; in fact, there are precisely three general standards-based layout options.

1. Floats
2. Positioning
3. Tables

Each of these options has its benefits and drawbacks.  All I was trying to say is that Andrei was dead on in his feeling that layout floats feel like something that have been bent to a purpose for which they weren’t intended.  That’s true.  Floats are simple, and were meant to do a very limited thing.  Push them hard enough into other roles, and they become a touch balky.  If nothing else, their source-order dependencies make them less flexible than one might like, and variances in browser handling of floats (many of those variances having to do with how one should deal with floats in their intended role) just makes the situation more frustrating.

One could argue that all three options are non-layout technologies that have been bent to layout purposes, but positioning at least was intended to be a layout mechanism from its inception.  It suffers from enough glaring flaws and browser bugs that it can’t be considered any better an option than the others, though.

In a move that may help matters, Shaun Inman (he of the Inman Flash Replacement technique) has just published the article Clearing Absolutes Again, which  further develops his attempts to give positioned elements a clear-like capability.  This is a very welcome development.  The IPC (Inman Position Clearing) technique may not be perfect— I haven’t had time to dig into it, so I don’t know— but it’s a fifty-foot neon arrow pointing in the direction things need to go.  Since we can’t expect this sort of capability to be added to CSS in the near future, let alone have enough browsers support it in the next few years, scripting our own fixes is the only reasonable solution I can see.  For another great big neon arrow of this kind, see Dean Edwards’ IE7.

And yes, I said “tables” back there.  If you can avoid using tables for layout, then by all means do, but it isn’t always possible.  In such cases, as long as the tables use as little markup as possible, and the markup validates, then I don’t see the problem.  Never have, really.  My whole objection to tables-for-layout has been, and continues to be, that most table-based designs use way too much markup.  Often you see markup-to-content ratios in the vicinity of 3:1.  That’s just icky.  I much prefer to see the inverse of that ratio, or at least something below 1:1.  CSS helps immensely in getting there.

Update: see Shaun’s new new post on the topic, “Absolute Clearance“, for another step in the evolution of his technique.  Ever forward!

• Floating Points was published on Wednesday, July 21st, 2004.
• It was assigned to the CSS category.
• There have been eight replies.

It’s been half a dozen years since Kat and I exchanged wedding vows on a hot Long Island summer afternoon, vowing before a small gathering of family and friends our intention to provide mutual support, understanding, and daily laughter.  We were married by a justice of the peace, the colleague of Kat’s across-the-street neighbor Lester.  She had long planned to have her neighbor, also a justice of the peace, officiate at her wedding.  Unfortunately, he died before we’d even met, but he was there in spirit.  It was Lester’s old judicial robes the justice wore when he presided over our marriage.

At times, our vow to bring laughter to each other has been sorely tested, but we always come back to it.  It’s one of the best promises we’ve ever made.

• Iron and Candy was published on Monday, July 19th, 2004.
• It was assigned to the Personal category.
• There have been no replies.

At last week’s Web Design Meetup, a couple of people showed me their current projects.  As is my wont, I glanced over the visual design and then started digging into the document markup.  In the course of the resulting conversation, I pointed out some ways to tighten up the markup.  I’ll repeat them here for those who are curious.  All of them relate to using classes and IDs efficiently.

The first recommendation I had was to use classes and IDs in conjunction.  Not everyone is aware that an element can carry both a class and an ID.  Well, they can.  So it’s no problem to have markup like this:

<div id="utilities" class="menu">

That way, you can style all menus consistently via the menu class, while having the utilities ID there for any ‘Utilities’-specific styling you need to do.  This has always been possible, and it’s supported by multiple browsers.  You don’t see it often, I admit, but then it’s not often needed.

The second recommendation was to use space-separated words in your class values.  This is thoroughly legitimate, and can make things a lot more compact.  So you might have something like:

<td class="subtotal negative">(-$422.72)</td>

You can then have one rule that styles all subtotals, and another than styles any negative number.  For example:

.subtotal {font-weight: bold;}
.negative {color: red;}

By using these kinds of class values, you can avoid having to construct one class for subtotal, and another for subtotal-negative.  If you’re doing that sort of thing, I can tell you right now that your CSS is larger and more complicated than it needs to be.  Multiple-word class names also free you from having to do things like throw in extra spans or other elements just to add more information, like so:

<td class="subtotal"><span class="negative">(-$422.72)</span></td>

That kind of structure is almost never needed, except in extremely rare cases where you must have an inline element on which you hang some presentational styles that can’t be applied to the table cell.  I can’t even think of a concrete example right now, but I’m sure there is one.  In which case, I’d say do this instead:

<td class="subtotal negative"><span>(-$422.72)</span></td>

But, as I say, the odds of your having to do that are very very low.

All this leads to a third recommendation that came to mind as I looked over the markup.  Remember to use document structure to your advantage, and not to class everything in sight.  I can’t tell you how many times I’ve seen this kind of markup:

<div class="navlinks">
<a href="blah01" class="navlink">Blah01</a> |
<a href="blah02" class="navlink">Blah02</a> |
<a href="blah03" class="navlink">Blah03</a> |
<a href="blah04" class="navlink">Blah04</a> |
<a href="blah05" class="navlink">Blah05</a>
</div>

Out of the six classes that appear in that markup fragment, five are completely useless and simply bloat the page weight.  Here’s a much more efficient way to structure the markup:

<div class="navlinks">
<a href="blah01">Blah01</a> |
<a href="blah02">Blah02</a> |
<a href="blah03">Blah03</a> |
<a href="blah04">Blah04</a> |
<a href="blah05">Blah05</a>
</div>

Now all you do to style the links is write a rule that uses the selector div.navlinks a instead of one that uses a.navlink.  In addition to making the HTML weight smaller, it also makes the document cleaner and a whole lot easier to read.  Your users don’t really care about that, of course, but I bet you will, if you ever have to go in and adjust either the markup or the content.

So there you go.  Hopefully it was of some help to you.

• Competent Classing was published on Sunday, July 18th, 2004.
• It was assigned to the CSS category.
• There have been forty-five replies.

Long-time readers may recall my ranting about iLife 4 being a for-money upgrade, which in the end was as much about my lack of understanding as it was about Apple’s (perceived) silence on the subject.  As it turns out, I never got around to buying iLife 4, so I was happy to have it bundled with my new PowerBook.  That’s right, folks, I spent over $2,000 on a laptop, but I saved $49 in the process!  Ph34r my l33t sh0pp1ng sk1llz!

So I imported my entire iPhoto library into iPhoto 4, which only took about 45 minutes.  In the process, I discovered that I actually have 4,080 photos so far.  There was some weirdness, in that iPhoto 4 claimed to have discovered 234 “lost” images.  Under half were duplicates, and the rest were completely blank files with the same names as photos I already had.  So I threw them all away, and landed at 4,080 pictures.  Once I figured out the keyword interface, which is by no means intuitive (or even very usable), I set about adding metadata to some of my images.  The first order of business, of course, was to tag all pictures of Carolyn and organize them into a smart album.  Guess how many pictures I’ve take of her so far?  We’ll have the answer in a moment, but first, here’s a recent one of her sitting up on her own, which she started doing a couple of weeks ago.

Everything I’ve heard about the improved speed in iPhoto 4 proves to be correct, and possibly understated.  This thing screams.  It still generates bloated directories, though, given the number of XML files and image copies it’s capable of producing.  This is largely so that it can support a “Revert to Original” feature, so any time you take out red-eye or lighten up an image, you end up with both the original and the modified image on your hard drive.  The same happens if you do no more than rotate an image.

That’s where iPhoto Diet comes in so very handy.  It’s a small application that can get rid of all unnecessary duplicates in your iPhoto library, and it can also delete the originals of all rotated images.  It can also wipe out all the originals, replacing them with the modified versions.  I ran it on my library before I migrated to the new machine and reclaimed over half a gig of drive space.  And that was only getting rid of unnecessary and rotated duplicates, not all originals.  I did a lot of red-eye reductions, and those are still around.  I also have yet to run the “strip thumbnails” option, which could easily reclaim a few dozen megabytes.

I haven’t really played with the rest of the iLife suite since I don’t have a video camera or a garage band.  I may eventually burn some images to a DVD for relatives to play on their TVs.  If I can figure out how to use Garage Band, I might try creating some background tracks for use in radio production work.  It’s nice to know the options are there.

And the answer to today’s trivia question is: as of this writing, the smart album titled “The Compleat Carolyn” contains 1,832 pictures.  At this rate, we’ll have about three thousand pictures of her by her first birthday.

• iLike iLife 4 was published on Sunday, July 18th, 2004.
• It was assigned to the Carolyn and Mac categories.
• There have been no replies.