Why do pull quotes exist on the web?

There you are reading an article when suddenly it’s interrupted by a big piece of text that’s repeating something you just read in the previous paragraph. Or it’s interrupted by a big piece of text that’s spoiling a sentence that you are about to read in subsequent paragraphs.

There you are reading an article when suddenly it’s interrupted by a big piece of text that’s repeating something you just read in the previous paragraph.

To be honest, I find pull quotes pretty annoying in printed magazines too, but I can at least see the justification for them there: if you’re flipping through a magazine, they act as eye-catching inducements to stop and read (in much the same way that good photography does or illustration does). But once you’re actually reading an article, they’re incredibly frustrating.

You either end up learning to blot them out completely, or you end up reading the same sentence twice.

You either end up learning to blot them out completely, or you end up reading the same sentence twice. Blotting them out is easier said than done on a small-screen device. At least on a large screen, pull quotes can be shunted off to the side, but on handheld devices, pull quotes really make no sense at all.

Are pull quotes online an example of a skeuomorph? “An object or feature which imitates the design of a similar artefact made from another material.”

I think they might simply be an example of unexamined assumptions. The default assumption is that pull quotes on the web are fine, because everyone else is doing pull quotes on the web. But has anybody ever stopped to ask why? It was this same spiral of unexamined assumptions that led to the web drowning in a sea of splash pages in the early 2000s.

I think they might simply be an example of unexamined assumptions.

I’m genuinely curious to hear the design justification for pull quotes on the web (particularly on mobile), because as a reader, I can give plenty of reasons for their removal.

Have you published a response to this? :

Responses

Chris Aldrich

I’m certainly not defending the practice. I don’t like repeated pull quotes either, and prefer to use highlight quotes that supplement the text without repeating myself (and I use a CSS class called pullquote to do so.) I suspect that in an era where TL;DR is the norm (has anyone thought about naming this “Generation TLDR”?) they’re mostly used to get 1% of the audience to read something more than the headline and see the featured photo before retweeting or posting to Facebook. Unfortunately, we’re apparently part of the 0.001% that bothers to read through an entire post anymore, so we’re the only ones to notice the UX problem. Maybe being able to embed a pull quote in a title would help fix the issue?! I think that for many, the advent of responsive design has done great things, but things like this fall through the cracks in the process. It would be nice if mobile displays would automatically redact CSS classes that are used in this manner as part of their workflow. I find the logic about as smart as including bulky javascript widgets for sharing articles to Facebook, Twitter, et al on mobile when almost all users will use the built-in mobile sharing ability instead. Maybe the new AMP spec can help publishers to automatically remove these repetitive type of pull quotes for the next generation?

stegrainer.com

Earlier today I was reading Jeremy Keith’s latest post, Why do pull quotes exist on the web?, and I found myself nodding along. I enjoy the visual distinction that pull quotes offer from a design viewpoint, but their main purpose in print (to entice you to read an article while flipping pages) is less impactful on the web. I’m already reading the article when I see most pull quotes, so the repetition leads me to skip over them.

Then I thought about my own blog and about how I’ve used quotes there from time to time. And I discovered that I’m accidentally quite happy with my implementation because I rarely pull quotes from my own article. Instead, I’ve tried to intentionally pull quotes from other articles that illuminate what I’m talking about and build upon it. I then use that quote to link back to its source in a purposefully web-like fashion.

While discussing this on Twitter with a few others, a new name for these types of quotes came to me: Push Quotes.

So what is a Push Quote?

To me, it’s a few separate elements:

  • A quote from a separate source (book, website, video, etc.)
  • That is related to the premise of the current article
  • With a credited source (preferably the author, or the publication name if no author is given)
  • And a link to the original source if one is still available

The web is built on threads of conversation, sharing, and iteration. I like that the idea of push quotes could help further strengthen and interweave those threads, all while making articles more visually appealing. So while I agree with Jeremy that gratuitous pull quotes are “an example of unexamined assumptions,” I think I’ll keep using my push quotes as much as I can.

The pull quote is dead, long live the push quote!

# Tuesday, August 23rd, 2016 at 5:00pm

Michael Bishop

I think the question should be less why do pull quotes exist, but why are sites lazy in their implementation. There are already solutions to only show the quote once, both with just HTML/CSS and javascript. I’m sure other solutions could be found.

Mujib

“Why do pull quotes exist on the web?” — adactio.com/journal/11102 They are unnecessary and annoying. Death to pull quotes.

# Posted by Mujib on Thursday, August 25th, 2016 at 4:39am