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.
All this needs is a touch of
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.