Pull the pull-quotes on mobile

Today I was reading a very long read on my mobile and I kept on getting my flow broken by pull-quotes that had no right to be there.

What’s a pull-quote? Well, here’s a useful definition and description from Magazine Designing:

(A) Pull-quote is a display element which is used to attract the reader and to break up long blocks of text. The effect of pull-quotes depend on their attractiveness, both visual and textual. […]As a visual element they have to be instantly recognizable and different from the rest of the text on the page. The size, color and texture of the pull-quotes has to be different from the surrounding text. Depending on the style and look of your publication, pull-quotes can have a calm, traditional design or you can create some extravagant looking pull-quotes

Now that was not a pull-quote; that was a block-quote. The pull-quote is a page element we have, with its roots in design for print; the pull-quote is a design feature used to break up grids, catch the reader’s attention, or add to the visual interest of a page. The pull-quote is extracted from the text and repeated out of place whereas the block-quote, as above, appears in the run of text: from a semantic point of view pull-quotes do not belong to the text at all. They make sense in a magazine layout, and sometimes they make sense on a web page — they don’t make sense on a mobile screen.

Here’s the thing, a long read on a large computer screen might benefit from a pull-quote, especially when the reader first lands on the page, and especially if the pull-quote is above the fold in their view: this is the pull-quote deployed for attention, to confirm to the reader that this will be a story they want to spend some time with. As the reader starts the story we might even want a few more pull-quotes because as their eye tracks ahead into the piece they might begin to feel some exhaustion: the well chosen pull-quote breaks the monotonous rhythm and provides further confirmation that they’re reading something interesting.

So what’s the problem with a pull-quote on a mobile screen? Well, if the article page is designed to be responsive to my device’s viewport then I’ll end up with a one column layout. There might be a lovingly crafted persistent header with the logo and a burger menu, and beneath that a continuous single column of text: the article. The pull-quote doesn’t work in this single column. Firstly it cannot sufficiently break the rhythm of the layout to add visual interest: it will end up taking up the full width of the viewport so what is it actually in tension with? Secondly it will break the reader’s flow: in a one column layout the pull-quote will actually force an interruption; a well used pull-quote will not do that, they can be avoided. This becomes more problematic, I think, if reflowing the page for mobile actually puts the pull-quote right above the text which it is extracted from as this causes the same phrase to be repeated within the written flow of the article.

If you’re struggling to picture the problem then here are two screenshots of the article I read this morning, one shows the page on my desktop and one on my mobile.

All this needs is a touch of

display: none;

on the pull-quote’s CSS selector, as part of the media-query for smaller viewports.

Just turn the bloody things off (for mobile) — to not do this is to blindly remediate a print design feature without thinking about what it’s for, without thinking about the reader.

By Jon Hickman

Hi, I'm Jon. I teach and research digital culture, social media and new media practice at Birmingham City University. Find out more about me with this lovely CV: http://uk.linkedin.com/in/jonhickman Find out about my work at the Birmingham Centre for Media & Cultural Research: http://interactivecultures.org