Pull-quotes on Web pages

Written by Adrian Holovaty on October 31, 2002

Following up on the outstanding discussion about page titles on news articles, here's another topic suggested to me by Ben: Pull-quotes on Web news stories.

Should we even bother? Do people actually look at those things?

Research findings are somewhat contradictory.

It's common knowledge that users scan Web pages instead of reading them word by word. That implies pull-quotes are a good thing, because they draw a scanning eye's attention.

In contrast, other research -- most notably the Stanford-Poynter EyeTracking Online News study -- shows that users' eyes fixate on text instead of graphics. That implies pull-quotes, which are more graphical elements than textual content, are ignored.

With that in mind, I'll conveniently side-step the issue of whether pull-quotes are effective online. (Personally, I think they're a waste of space and bandwidth; but I see how some people might think they're useful.) Instead, what I'd like to point out is their inaccessibility. Web pull-quotes generally are designed with no consideration given to non-graphical browsers.

For an example, see the recent BBC News article "Virtual hands reach across the ocean," which has a pull-quote toward the end of the story:

Screenshot of BBC News pull-quote

It looks pretty in the graphical browsers most people are used to using. But call up the page in the text-only Lynx browser, and here's what you'll see:

Net delays

In the ground-breaking experiment the participants are sharing a view of a virtual room containing a large black box. Their task - to work together to lift the black box despite being separated by the Atlantic.

It enhances the sense of being together even though the physical distances involved are vast

Professor Mel Slater

One of the big problems the experimenters had to overcome was the delay caused by sending data over the net.

See how the quote innocently makes its way into the article? A user reading this article in Lynx -- or via other text-only browser or screen reader -- probably won't be able to tell that this is an outside quote. It looks like it's part of the story, not an interruption in story flow.

Now, before I go further, I should point out the BBC does make accessible, text-only versions of all its pages. (Here's a text-only version of the above article, which does not include the pull-quote.) I chose the above example because it precisely shows why there is a need for the alternate versions the BBC is kind enough to provide.

That said, if your publication doesn't have the resources to create an alternate site, how could we make the above pull-quote more accessible?

My suggestion is to use a "skip" link, as explained in Day 11 of the Dive Into Accessibility series. It's as simple as providing an inner-page link before the quote and pointing that link to the content just after the quote ends. Like so:

<p>This is the first sentence in the story.</p>
<a href="#skipquote">Continue reading story</a>
<table align="right">
<!-- code for pull-quote goes here -->
<p><a name="skipquote">This</a> is the second sentence in the story.</p>


Posted by Carl on October 31, 2002, at 7:57 p.m.:

Personally, I like pull quotes. It adds style and breaks up the text a bit. Used wisely, they add a lot to the look-feel of a block of text.

Having said that, you are right to say they can be an accessibility problem.

Question for you guys: Since pull quotes are normally taken right from the text of the article, to emphasise it, can't we just remove them altogether? Why put the burden on the reader/listener to deal with, or skip, a pullquote?

I suggest we use class "pullquote" with visibility/hidden css rules, switching depending on which browser they use.

Or is browser-testing for this just too much of a hassle? It seems more direct than simply marking it "ignore this" with a skiplink. After all, many sites already need to use browser testing coding to get around various bugs and other browser issues anyway.

Posted by Nathan on October 31, 2002, at 8:32 p.m.:

The goals of pull quotes in print are to emphasize something interesting while breaking up a big block of small gray type. I think pull quotes are silly on the Web because in my opinion the best way to emphasize something is to emphasize it inline, as I just did. See how your eyes focus on the words I've chosen to emphasize, especially if you're skimming? Bold text and links create more "entry points" into the text, but don't divorce the emphasis from its logical position in the story.

Do I see news sites bolding or coloring text to emphasize it inline, to make it easier to skim? Not really, because the formatted text then becomes the most important words in the article. Source A to reporter: "How could you bold Source B's quote but not give equal emphasis to my rebuttal?"

Posted by Ben on October 31, 2002, at 10:14 p.m.:

So much to say, where do I begin...

One of the reasons I brought up the topic is that everything I had ever heard about pullquotes was hearsay or an unqualified or subjective statement. Oh, so pullquotes make the page more visually appealing? Pages of all text are "boring" or tough to read? I want to see proof. There are statistical facts about column width and readability out there, so I would agree to adhere to those... I'm hoping to find some evidence of all these mantras about pullquotes.

One issue that I bring up is the purpose and initial discovery of the pullquote in print vs. the web. One point of a pullquote in print is to catch a reader's eye who is flipping through a magazine or skimming a page. From the research that I have seen, that behavior isn't/can't be the same on the web. Pullquotes are normally in the middle of an article. If you are on an article page and deciding whether or not you want to read the article, how is a pullquote that you can't see (because it's one or two scrolls down the page) helping you? The research I've seen suggests the decision for reading a story is made much earlier than the article - it is made at a home page or in search results. The research I've seen also says that the act of a user scrolling down an article usually denotes the person is already interested in (or is) reading the story, so there would be no need to try to draw them in.

And that coincides with the arguments for "breaking up an old boring block of text." If you are a scroll or two into an article, that usually means the user is reading the article. I can't ever remember a time that I've been reading an article on the web, stopped halfway through, yawned, and thought to myself 'Ho hum, this block of text is really drab.' If I ever have, it's because the writing is bad, not the presentation. Pullquotes break my reading momentum, not help it. There's nothing like making me lose my focus to read a qoute from the I article that I just read two sentences ago.

Posted by Micah on October 31, 2002, at 11:44 p.m.:

The argument that pull-quotes are unnecessary doesn't hold water, IMHO. Decades of printing experience says that they do have a place in documents. There are certain elements that are aesthetically pleasing and functional visually, but perhaps not aurally. Why, just the other day I was reading an article in the Tufts Foreign Affairs journal and flipped quickly through the magazine, scanning the pull-quotes for a catchy fragment that might be part of an intersting article.

If pull-quotes are a visual beautifier, then should the conclusion be that they are more appropriately served as images? or perhaps background images? On my site, I tend to put images that serve a function directly into the XHTML, and images that are for presentation are served as background images in empty divs.

Probably the best solution (but beyond the scope of current CSS/markup) would be to position the quotes at the beginning of the article as teasers, and be able to place them throughout the article using a presentational language like CSS. But like I said, this is beyond the abilities of CSS as far as I know.

Posted by Gina on October 31, 2002, at 11:50 p.m.:

Back in my print-design days, we used pullquotes to entice and inform the "skip-and-jump" reader.

A better online technique, IMHO, is to use subheads interspersed throughout long stories so the scrolling reader can get a sense of the parts of the story, read what he/she wants and move on. This also breaks up a long, gray scroll with several entry points.

Posted by Ben on October 31, 2002, at 11:57 p.m.:

Decades of printing experience says that they do have a place in print documents. Who says it's the same for the web? The way Micah is reading a magazine isn't the way it's done on the web.

I have seen pullquotes used (well? correctly?) on the web, being put on an index or home page. (Wired? GMSV?) <stong>That is where the interest is drawn, and where the user is deciding what to read.

Posted by Jay Small on November 1, 2002, at 12:02 a.m.:

The browse/scan behavior several of you described makes sense in the context of a multipage, multisection print document, or even in the context of a Web home or index page.

But by the time someone has made way through Web site indexes or queries to a single article (the overwhelmingly common method of getting to detailed information), she is past browse/scan and has already made a decision at least to begin reading the article. When she's that close to completing a task in her intended workflow, why distract her with a pull quote?

Inline emphasis, I agree, is the way to draw attention to key components of a long block of text on a Web article page. That emphasis could be in the form of subheads (which, properly written and placed, also serve as low-level categorization elements in the information hierarchy) or simply key phrases rendered as bold, italic or highlights.

Posted by Julie on November 1, 2002, at 4:27 a.m.:

"...has already made a decision at least to begin reading the article....why distract her with a pull quote?" Couldn't agree more, Jay Small.

I think the only time/place for a pull quote on an individual article page is at the top IN THE RARE CASES when a great quote sells the story better than its head and lead. If you feel the need to break up large blocks of text, use an actual picture -- one that adds something/helps reader to better visualize the story.

Posted by Carl on November 1, 2002, at 5:45 p.m.:

Ignore the programming for a moment. Ignore usability studies. That all has it's place. But pull quotes are about look-feel, not statistical analysis of readability.

I refuse to believe that the net is merely a text-dump for my mind. It is that, but it's far more. Visually appealing layout might not be as quantifiable as text readability, but it is important nonetheless.

Pull quotes, done well, add value. The value is in the aestetics, the nice look, the feeling that you are doing more than read one more block of text after another.

If you don't personally enjoy the look, that's fine. I don't appreciate a lot of modern art works in the museum either, but that doesn't mean that other people cannot enjoy them. Which is exactly my point - web layout is about art as much as text.

That's why this website isn't just a text dump. It's visually appealing, subtle, minimalist in design with a color scheme. Pull quotes wouldn't work here - but in some sites, they can be a great effect for the overall picture.

This site probably draws heavily from the teckie/programmer side of things. Just don't forget - for every person who knows what "css" stands for, there is a million that just like a good-looking page.

Posted by Anil Dash on November 1, 2002, at 8:45 p.m.:

I've started using pull quotes regularly on the articles I publish on my personal magazine, and I find that the concepts mentioned in the quotes are as prominently discussed as topics that are featured in the opening of a story, so I think that pulls still have value in drawing reader attention, even in the web medium.

They might not be totally appropriate for the web, but it's a convention that readers are familiar with, so why forsake that bit of experience that they already have?

Posted by Steve Yelvington on November 1, 2002, at 9:15 p.m.:

I don't buy the basic argument that pullquotes are graphical (the reference to the Eye-Trak study). I think they're textual, and functionally very similar to the "skybox" and other print elements that the original "Eyes on the News" study found to be so compellingly effective in terms of communicating information to users.

Posted by Ben on November 1, 2002, at 10:35 p.m.:

If the value of pullquotes are in the aesthetics, what is the value or priority of aesthetics in reading a news article? My opinion is it's pretty low: Information is first, supplemental information (photos and graphics that help explain/visualize the story) second, contextual information (depth, related resources and links, etc.) third. To me, pullquotes don't fit into any of those categories, because that information is already in the article.

And I would say pullquotes are about statistical analysis of readability, if they're stopping my reading pattern/momentum. And if I am reading, why do I have to have the feeling that I'm doing something more than that?

Like I said, I've never stopped in the midst of reading to either admire (or admonish) a page's layout - because I'm busy reading... unless something gets in my way and stops me.

- A designer

Posted by Dunstan on March 8, 2003, at 2:24 p.m.:

I don't think I've ever stopped reading an article halfway through to read a pull quote. I usually skim them first to see if anything interests me, the read the story.

In fact my usual habit when seeing an interesting pull quote is to scan the body text until I find the bit it relates to and read that... then if that was good I read the whole article.

Posted by Reader on June 14, 2004, at 4:36 a.m.:

Since the concept of a pullquote is to draw attention to itself, the "out of context" juxtaposition performs nearly the same function that we accept visually. And by utilizing display:none, a special span can contain an explanatory expression at the beginning of the pullquote, similar to this:

[p][span style="display:none"] Attention: [/span] Pull Quote Text Here.[/p]

Options: Attention, PullQuote, NB, etc.

Furthermore, it could also contain a "skip-to" link to a more detailed portion of the document or topic.

Just a thought.

Posted by Nick Coad on August 26, 2005, at 6:12 p.m.:

I agree with Dunstan and especially Carl. Ben, you're undoubtedly thinking from YOUR point of view only. There are millions of people out there surfing the net who - despite spending their time finding a document - will be turned away by a plain document that is simply block after block of text. In larger documents especially a pull quote will help the reader skim the page. The simple fact is: readers don't read articles word for word at first glance. Most visitors will scan the document and then, if it seems worth it, they will read the entire document. By providing pullquotes you make the process of skim-reading much easier. The real trick is picking the best bits to quote. I'm a skim-reader, obviously, as most of us are. I love pullquotes because they make skim-reading so easy. I can just read each pullquote and get the general gist of the article in seconds. Then, if I'm interested, I'll read the whole article.

For those saying that you don't NEED pullquotes because the reader is obviously not in need of encouragement after finding your article, you're missing the point. Surfing the net can be a very random process. If you have a well designed site, the chances of someone stumbling into an article they haven't spent hours looking for is very high. In these cases the visitor will have very little idea of the usefulness of your article. Make things easy for them.

Posted by Adam Messinger on March 15, 2006, at 1:43 a.m.:

I think the best way to solve the problem of pull-quote accessibility is to combine Micah's notion of using them as teasers with Gina's idea of breaking up a page with subheads.

New Rule: Pull-quotes on the web are fine, so long as you only use them at the beginning of the article or immediately after sub-headings. You can use CSS to float them left or right and wrap text around them, but to text-only browsers and users of screen readers, they will appear as teaser quotes at the beginning of an article or sub-section.

Comments have been turned off for this page.