Beautifully Accessible Blockquotes

Why Start with the Blockquote?

I launch Accessible Web Beauty Tips with the unassuming blockquote because (1) it’s wonderfully easy for stakeholders to use in all major CMS’s and (2) it’s simple for developers to make them super attractive.

It’s even easy for developers to circle back and polish their collective look long after a redesign launches. I’ve never seen blockquote touch-ups ricochet around a site creating havoc. They’re at the other end of the spectrum than, say, menus — where one new pixel and, poof, the whole site is a disaster area.

Put all those together, and it’s a painless entree into glamorizing your site. Not only that, a good quote just adds a certain something.

Real novelty of vocabulary is impossible; in the matter of language we lead a parasitical existence, and are always quoting. Quotations, conscious or unconscious, vary in kind according as the mind is active to work upon them and make them its own.

Walter Raleigh

What Is a Blockquote?

Before diving into its styling, it seems prudent to pause and clarify what a blockquote is and what it is not. According to the W3C, the “blockquote element represents a section that is quoted from another source.” Simple enough. However, if you think about it, this means a pull quote is not a blockquote. It’s a mistake I see all over the place, but it’s a bit off topic, so I’ll save pull quote styling for another post.

An aside for those (like me) who get a kick out of knowing and defying print-centric publishing rules…. The venerable Bluebook’s Rule 5.1 states that a “block quotation” is “any direct quote of 50 words or more” and it “should be indented on the left and right without quotation marks”.

While I don’t use blockquotes for pull quotes, I am so not the Bluebook. I use them for three things:

  1. longer quotes;
  2. short quotes I want to emphasize;
  3. testimonials.

As to quote marks within a blockquote, sometimes I use them and sometimes I don’t. It just depends — usually on how long the quote is. If you choose to include quote marks when there are multiple paragraphs, you get into that squirrelly technicality of having to use one at the start but not the end of each paragraph. Eeeww….

Blockquote HTML

For the HTML itself, my code is simple. I start with <blockquote> and end with </blockquote> — adding at most a class attribute and a cite element. As best I can tell that’s how the vast majority of Web coders use this element — just the bare essentials — and that’s a good match for this series, which is all about easy.

That said, I feel compelled to note that there are fancy blockquote things you can do with the cite attribute (not to be confused with the more useful cite element) and the figcaption element. Moreover, there is the largely forgotten q element. However, each of these adds a level of complexity that, to my knowledge, is only needed only for scholarly publications.

Speaking of cites, however, I do think it’s important to make a serious effort to find the true source of any quote you use and then, if possible, link to it. If you do this consistently, I promise you’ll learn some amazing things. (My latest example — the substance behind G.K. Chesterton saying, “If a thing’s worth doing, it’s worth doing badly.”) Also, thanks to this amazing Web, finding a source usually only takes a few minutes.

Blockquote CSS

But back to the real subject, i.e. making your blockquotes attractive…. Here’s the typical default display for this element:

blockquote { display: block; margin: 1em 40px;}

What an unstyled blockquote looks like in my browser.
What an unstyled blockquote looks like in my browser.
You can see how it renders in your current browser.

It’s serviceable, but not exactly beautiful. Also, in this native form it’s hard to distinguish from an indent used to show a parent/child relationship.

To make it obviously a quote is easy. You can be sure what’s being cited is abundantly clear in the preceding text or you can (contrary to the aforementioned Bluebook) add quote marks. You can even add them in the CSS.

No matter how simple or basic a blockquote is, to be attractive it needs a little panache. If you don’t do anything else with yours, pay attention to these three factors:

  1. Great white space. White space is important for everything in design — but it’s particularly important with blockquotes. You want to offset it from the main text with at least a sizable indent. But there’s a good chance you want to feature it (especially if it’s a testimonial) and that translates into breathing room and significant padding. Also, you may want to expand the line-height.
  2. A font that works well with the primary font for content. Generally it’s best not to vary the font-face, but you may want to make it a bit larger. You can use italics too, though on some screens smaller italic fonts can pixilate to a point that they aren’t readable, so be careful with italics.
  3. A color scheme based on your site’s colors. Use your neutrals as its base and, if you want, an accent color or two. Unless you really know what you’re doing, it’s safest to minimize the use of strong colors. If the site’s color scheme is all over the place, not to worry. Just stick with the grayscale or, if it doesn’t use any grays (bless its heart), a pale shade of its neutral for the background and a dark shade for its foreground.

For extra credit (and to have some fun), the next step is to create blockquote CSS that’s harmonious with the style of your site. This is something I’ll get into in more detail later in the series. But for those who are ready, think in terms of the personality or flavor or mood of your site. For example, is it:

  • Slick and professional? If so, you’ll probably want square corners, a biggish font with serifs, and maybe even a dropcap.
  • Authoritative, solid, conservative? If so (testimonials aside), you’ll probably want a blockquote that doesn’t stand out much since you, not an outside source, are the authority. For authoritative testimonials, big and bold are perfect.
  • Bright and fun? That’s what I hope this site is. So some blockquotes I go crazy on, but my default is simple with tons of white space and a small dash of whimsy — in my case a big background quote mark.

A Showcase for the Beautifully Accessible Web

As you perhaps have noticed from the links above, I’m starting to build out a Blockquote Showcase. It’s early enough in this endeavor that I only have seven blockquotes thus far. But my hope is you, gentle reader, will point me to others I might add to the collection. If you know of handsome blockquotes you think are a good match, please do find me on Twitter or contact me. I would be thrilled.

I’ll keep building the blockquote showcase as I move on to the next element. Most likely that will be the button — but no promises. Until then, have fun making your sites beautifully accessible.

2 Responses