From a usability standpoint, anything you can do to help your readers scan your content more effectively is a positive.
But if you can add an element that not only helps your readers but also adds an elegant, professional touch to your overall content presentation…then by god, I think you’ve hit the jackpot!
Today, we’re going to hit that jackpot together by adding a very simple, very stylish, and very useful element to our blogs — the ever-present pullquote.
The Goods
Note: While not particularly helpful in the context of this tutorial, pullquote styles have been removed from this site.
Pullquotes are quite possibly the single most effective element that can be added to text to improve its scannability. After all, the publishing pros in the magazine industry have used them for years, both as a design element and as a courtesy to readers. There’s proof in that pudding, too, as Jakob Nielsen has explained the dramatic impact that improved scannability can have on the overall perception and usefulness of your Web site.
Pragmatism aside, however, pullquotes are just really frickin cool, and it’s time you stepped up your game to accommodate them.
In order to help out as many of you as possible, I’m going to suggest two different methods of creating pullquotes for your blog. Odds are good that you’ll be amazed how easy it is to get them up and running, and I’m sure you’ll be pulling quotes left and right in no time.
Using Blockquotes to Create Pullquotes
This method is arguably the most correct in terms of semantics, because when you scan the XHTML markup, pullquotes will be denoted by blockquote tags.
To begin, you’ll need to open up your blog’s stylesheet and locate the blockquote style reference. A good way to do this is to use a “Find” function from within your text editor of choice.
Now, before we make any changes, let’s reach some common ground here and decide what we want our pullquotes to look like. For the purposes of this example, we want our pullquotes to be:
- flexible – we want the ability to align them to the left or right side of our text
- bigger than the other text – the font size will need to be larger
- clearly removed from the rest of the text – the pullquotes should only take up about 30-40% of the overall content width, and we will need to use margins to set the quote apart from the regular text
Alright, with our goal in mind, we can begin coding the styles for our pullquotes. I recommend using the following CSS declarations as a starting point for your pullquotes:
blockquote.left {
width: 200px;
margin: 5px 15px 5px 0;
padding: 5px 0;
border: 3px double #aaa;
border-width: 3px 0;
font-size: 1.4em;
text-align: center;
float: left;
}
blockquote.right {
width: 200px;
margin: 5px 0 5px 15px;
padding: 5px 0;
border: 3px double #aaa;
border-width: 3px 0;
font-size: 1.4em;
text-align: center;
float: right;
}
Because we’ve chosen to use blockquote tags to denote our pullquotes, we still need to account for existing blockquote styling to ensure that everything appears as we would like.
Carefully examine your blockquote styles. Please note that if styles are declared in the blockquote reference but not in the blockquote.left or blockquote.right references, then these styles will carry over to your pullquotes.
This is not a desirable result, so you will need to add some special CSS declarations to account for these “cascading” styles. Each individual case will likely be a little bit different, so the best I can do here is provide you with an example that you can use as a guide.
Let’s say that my regular blockquote declaration looks like this:
blockquote {
margin: 0 30px 15px 30px;
padding: 0 0 0 10px;
font-size: 1.1em;
font-family: Georgia, "Times New Roman", Times, serif;
border-left: 2px solid #ddd;
color: #888;
}
Assuming I did not modify the pullquote code from that introduced above, my pullquote would come out looking like this:
Whoa. Maybe I should have accounted for cascading styles.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam egestas, mauris id dignissim dignissim, leo augue rutrum lacus, id condimentum nisl elit ut nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi.
Not quite what we expected, is it? Here’s what’s wrong:
- the left border
- the excess left padding
- font in italics
These styles have infiltrated our pullquotes because they have “cascaded” down from the original blockquote declaration. To avoid this undesirable result, you will need to address each cascading style in the pullquote declarations. So, to clear up the issues illustrated above, we would make the following changes:
blockquote.left { width: 200px; margin: 5px 15px 5px 0; font-size: 1.4em; text-align: center; border: none !important; padding: 0 !important; float: left; }
blockquote.right { width: 200px; margin: 5px 0 5px 15px; font-size: 1.4em; text-align: center; border: none !important; padding: 0 !important; float: right; }
For the curious among you, the inclusion of the !important denominator tells the browser to ignore all other possible cascading styles and only render the one marked as !important. If you run into any additional styling weirdness with your pullquotes, you can simply add !important to all your pullquote styles in an attempt to override anything that might be affecting the rendered quote.
Anyway, with those changes in place, we now end up with a result that looks like this:
Awesome. These pullquotes are working properly.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam egestas, mauris id dignissim dignissim, leo augue rutrum lacus, id condimentum nisl elit ut nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi.
Using divs (or spans) to Create Pullquotes
Although far easier to implement than the blockquote method, using divs to create your pullquotes carries only a minimal semantic meaning through your XHTML. It does validate, though, so if you want to keep it simple, try this method!
Simply add these declarations to your stylesheet:
.pullquote_left { width: 200px; margin: 5px 15px 5px 0; font-size: 1.4em; text-align: center; float: left; }
.pullquote_right { width: 200px; margin: 5px 0 5px 15px; font-size: 1.4em; text-align: center; float: right; }
Now, wherever you want to include your pullquote, you would do the following within your blog post editor:
<div class=”pullquote_right”>This is my killer pullquote text</div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam egestas, mauris id dignissim dignissim, leo augue rutrum lacus, id condimentum nisl elit ut nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi.
Once you publish your post, you’ll end up with something that looks like this:
This is my killer pullquote text!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam egestas, mauris id dignissim dignissim, leo augue rutrum lacus, id condimentum nisl elit ut nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi.
Got it? Now start pulling those quotes!