Someone tweeted about how responsive designs should include different sized images for different devices the other day. For some reason this made me think about Blockquotes this morning.

“done well they grab attention, highlight key phrases and drive the narrative of the article”

Blockquotes make a ton of sense in print - done well they grab attention, highlight key phrases and drive the narrative of the article. But on a small screen they’re terrible. I don’t need my attention grabbing on a phone, you’ve already got my undivided attention. They break up the narrative, since I have to scroll past them to read to continue reading the article at best and at worst they distract me, jumping from one section to another if placed carelessly. While they still highlight key phrases I might not be ready for that phrase - e.g. you might be skipping me through the story further than I’ve read, spoiling a reveal.

Fortunately hiding a <blockquote> in responsive css is really easy. Hopefully people will do that more.