Genii Weblog

How does your blockquote look?

Thu 26 Oct 2006, 11:29 AM

by Ben Langhinrichs
I must admit, I have blockquote envy, and one of these days (soon), I'll have to get around to dealing with it.  When I post a quote, it looks like this:
This is a boring, but fairly default, blockquote which is indented, has a single vertical line and italics, but not much else to distinguish it.

If I go over to Rob Weir's excellent blog, I see that he has a blockquote that looks much better:
Now here is a quote with quote marks (and indentation and smaller text and a different color).  Sheesh, no wonder I feel inadequate.  This is a great look, although it seems better suited to a literary kind of quote.

If I wander over to Philip Storry's site, I see that he has something just a bit different, but not so extreme:
This would give a bit more sense of separation with slightly different color and thicker bar, but without the image.

Over at Bob Sutor's site, there is this style:
This sets off nicely against Bob's colored background, but may not look so great here.

So, what should I use?  The nice thing is, by just setting the style parameter, I could add all of these, so I could easily add my own:
But, I would have to avoid getting weird and garish.

What kind of block quotes would you like to see here (or on your own site?

Copyright 2006 Genii Software Ltd.

What has been said:

509.1. Philip Storry
(10/30/2006 08:54 AM)

Whilst I'm flattered that you use my blog as an example, I have to give credit where it's due - I think that's the default style that comes with DominoBlog, so Steve Castledine deserves the credit!

Actually, the design itself is ported, from a design by Michael Heilemann. I'm not sure who ported the design to DominoBlog, but there could be three people I'd riding on the coattails of here... *grins*

For what it's worth, I do prefer that style, though. It's clear and concise. One of the dangers with the fancy "graphic quote mark behind the paragraph" style that you demonstrate is that it can be easy to confuse other blocks for quotes.

This can happen especially if you follow your quote with a code block or a pre block, for example. Unless they also have a suitable graphic, it can get confusing.

Oh, and the style is affected by CSS, as you've not doubt noticed. So is the Graphic In The Background technique, but I prefer the border size method as it tends to degrade more gracefully - and requires fewer elements on the page, so it also laods faster over slower connections.

Anyway, good luck finding a suitable style. I hope I've given you some food for thought. ;-)