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
The publishing pros in the magazine industry have used them for years.
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!
29 Comments ↓
Great post! I might well put these on my blog. One concern though, is how this works with RSS. I originally read this with Google Reader, and the pullquotes were just centred pieces of text. I can imagine that these would have been confusing if I had not known the post was about pullquotes!
Is there a way to turn off pullquotes in the RSS feed, by using a different stylesheet?
If it wasn’t for that, I’d put them on my blog right now!
Nice! I’ve written a post on blockquotes as well.
Huw,
Excellent point, as that’s something that I hadn’t taken the time to consider. I wish I had a quick answer that solved the problem, but I’m afraid I’m going to have to do a little research to get to the bottom of this.
Great explanation. I, too, would like to know a way to hide them in my feeds. With this article, the pull quotes make sense because you lead into each one. A quick google search turned up this article on styling rss feeds:
http://www.oreillynet.com/pub/a/network/2005/07/01/rss.html
Great post!
I have a lot of work to do on the design of my blog (eventually I’ll move to Wordpress instead of free Blogger)…and this post will help me as I figure out a better way to present pullquotes.
Nick Wright
P.S. - I might have to write about the ‘Cards Football team on my blog…winning without their two studs (I don’t know if you’re a U of L fan or not…I just know you live in Louisville).
Nick,
How about I have season tickets behind the closed end zone at the impenetrable Papa John’s Cardinal Stadium.
Yes, I was there as my Cards kicked the dog snot out of a bunch of jive turkeys from Miami.
And as for our two studs? We’re so deep at every position that it hardly matters. Losing Bush was a total bummer, but I know that we’re deep enough that we can still handle our schedule.
If Brohm is back by the WVU game, then I predict we’ll run the table. Hell, I think we’ll beat WVU even without Brohm, as long as the defense plays like it has the last two games.
I think the Cardinals are among the 6 or 7 truly elite programs right now in college football - right there with OSU, USC, Florida, Michigan, WVU, and Auburn. Laugh if you like, but the 31-7 ass whooping they put on the ‘Canes is a pretty good indicator of the truth.
Oh, I’m definitely not laughing. I’ve seen firsthand what your ‘Cards have done to my UC Bearcats (granted UC’s football team would get blanked by Trinity High School).
I hope you guys run the table and represent the Big East. I’ve been to one game down at Papa John’s Cardinal Stadium…and it was a great environment (went to the game that they dedicated a statue to Johnny U).
I can’t stand WVU. Good luck to your boys this year.
Thank’u very much.. info veeery nice and important for me.. thank’s again..
Great shot on pullquotes …!
gread tip, ps your blog looks nice on the new google reader:)
keep up the great work!
Very nice.
This article shows another way to style pullquotes (with images). I think both methods could be used together.
I wrote up something on my “light coding” codeprofessor site about pullquotes a while back but just used div blocks. Should have thought to use blockquotes. Your method is more elegant.
Hey Chris ,,,
Im using Cutline 1.03 and tried to implement Pullquotes , with this method
Using divs (or spans) to Create Pullquotes
Didnt have any success ,,,
JP
Great article. I just linked your URL on my website. Thank You for sharing.
Exactly same problem as John Piercy. Div tags appear as text in the post. Tried to copy div code in style.css of Cutline 1.03 both in entry section and outside. No success. Please help!
I’ve tried using some of these methods in my posts for Blogger with no success. Not sure what I’m doing wrong though, if anything at all. Is there an easier way to form pullquotes in your blog entries using regular HTML?
Vicharak, John Piercy — In the Cutline CSS, pullquotes can only be implemented via classes applied to
<blockquote>tags.Regarding the issue of
divtags appearing inside the text, I suspect that you’re using the Rich Visual Text Editor instead of the regular old text editor to compose your posts. When inserting code (such as adiv), you need to be sure to switch to the basic editor before you add the appropriate text.Lynda — You won’t be able to implement these methods with Blogger because the standard Blogger stylesheets don’t provide pullquote capabilities. If you want total control of your site from start to finish, then you need to take the following steps:
[...] Pullquotes are especially effective to catch the attention of readers - and creating them requires very minor tweaks to your CSS style sheet(s). I haven’t implemented pullquotes in this blog (most of my time in Novelr is actually spent wrestling with the sidebar, grr), but trust me on this one. In blogger, for example, i did it with a blog called BUGS (example: here) and it took a total of 15 minutes to get everything the way i liked it. Wordpress junkies can go here for a brief tutorial on implementing pullquotes in WP blooks. [...]
[...] Snazzy Pullquotes>> [...]
Here a plugin that makes pullquoting easy with wordpress. http://www.cafelamarck.it/22/fancy-pullquotes/
This is a nifty hack and I’ve implemented a version of it on http://www.planetabell.com. But any thought on how to have it render properly on an RSS feed? As it stands, pullquotes using the method appear as disembodied text
hi Chris, I love your blog and thanks for all the great tricks. My friend Kim (discollection.ca)has a wordpress blog made with your design. I just realised that when I was checking out your blogs about it. Very cool.
[...] The stylesheet includes definitions for manual insertion of text or image asides, as well as left or right floating pullquotes. [...]
Hi Chris-
I am trying to work out the pullquotes. I installed Cutline 1.1 on a test site. Are pull quotes already installed with Cutline 1.1? and if so how do i implement them? Thanks, It is a great Theme.
Karlson — When I released Cutline, I crafted a post detailing some of the more basic styling elements that you can use with the theme. You’ll find the pullquotes explained in the Blockquotes section.
Thanks Chris- Works Great!
I have Cutline on two blogs. I’ve tried both the pullquote and blockquote “x” technique and have never got those two lines above and below my quotes!
My quotes will shift left or right, so I know part of the code is working. Any suggestions?
Don — For whatever reason, your Cutline stylesheet has been modified from the original version. You’re using
blockquoteclasses (pullquote_leftandpullquote_right) that are not part of the default framework, and on top of that, borders have been turned off on the primaryblockquotedefinitions within the CSS.I recommend downloading and installing Cutline 1.1 and moving ahead from there, or else you can upgrade to the new Copyblogger Theme.
One thing you’ll have to do, though, is change your use of
blockquoteclasses away frompullquote_leftandpullquote_right, and instead just apply aleftorrightclass to your blockquotes.I tried to do editing of the style sheet, but it does not show anything.
T T
Hoot and/or Holler ↓