Skip navigation

Tim Murtaugh

warning: Creating default object from empty value in /var/www/vhosts/ on line 33.
Original author: 
(author unknown)

Three years ago in these pages, ALA technical editor Ethan Marcotte fired the shot heard ’round the web. ALA designer Mike Pick thought it might be fun to celebrate the third anniversary of “Responsive Web Design” (A List Apart Issue No. 306, May 25, 2010) by secreting an Easter Egg in the original article; our illustrator, Kevin Cornell, rose to the challenge.

To see it in action, visit, grab the edge of the browser window (device permitting), and perform the responsive resize mambo. (ALA’s Tim Murtaugh, who coded the Easter Egg, has provided a handy video demo of what you’ll see.)

Your rating: None

As I started building the HTML templates for ALA v5, I tried to be as thoughtful as I could about the patterns I chose, especially for markup that was going to become part of the content of the magazine. Something I thought important to nail down was a useful and meaningful pattern for marking up blockquotes.

In the previous ALA, we used a long-standing pattern that’s been a convention since early in the the XHTML days:

     <p>It is the unofficial force—the Baker Street irregulars.</p>
     <p>— <cite>Sherlock Holmes, Sign of Four</cite></p>

Since we’re all HTML5 all the time these days, there are a couple problems with this:

  1. We were using the cite tag as a style hook to distinguish the quote from the attribution, but this no longer holds up as the specification for cite now specifies that people are not legitimate subjects for a citation — only “works” can be cited (books, articles, etc).
  2. That having been said, the citation doesn’t belong inside the blockquote anyway; according to the specification, the only content that can live inside a blockquote is the text being quoted.

I’d also like to get rid of the emdash — it’s pure ornamentation, and I’d rather it not be in my content.

Ok, no problem. Here’s what we could do instead:

<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
<p class="quote-citation">Sherlock Holmes, Sign of Four</p>

This is valid HTML5, and the quote-citation class gives me a hook to insert an emdash (or whatever we like) via CSS:

p.quote-citation::before {
     content: "— ";

But: We have a semantic problem. There’s nothing meaningful, other than proximity, to tell us (or machines) that the p tag that follows the blockquote should be considered part of the same content (the class isn’t sufficient, according to the spec, and without the quote, the citation becomes a non-sequitur). So, we went looking for a semantic element to wrap this pattern in, and for a few reasons, we arrived at figure:

<figure class="quote">
     <blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
     <figcaption>Sherlock Holmes, <cite>Sign of Four</figcaption>

Not only does the spec for figure perfectly align with our needs, it even comes with the convenient figcaption element; a perfect container for our citation. I’ve given the figure a class because there are other kinds of figures — images, tables, etc etc. There are other details from the spec that we could have adopted (such as the optional cite attribute for the blockquote), but I wanted to keeps things simple for the folks marking up our articles.

(You can see part of the conversation we had about all this in this gist; it’s often smart — and fun — to take an idea to its fullest extreme before reigning yourself in.)

So, here they are, the official ALA blockquote patterns. A lot of thought for what might be a small detail, but in thinking about these things now we’re doing our best to ensure that our content is future-friendly, and not just our templates.

Your rating: None