the-deuce.jpg

Snazzy Pullquotes for Your Blog

Intro image for 01 Pullquotes - the first in a series of design tips for where the rubber meets the road.

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!

Take the Next Step!

  1. Share this on Twitter:
  2. Share this on Facebook:
  3. Submit it to StumbleUpon
  4. Bookmark it on Delicious

44 comments… read them below or add one

Huw Leslie September 15, 2006

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!

Reply

Doug Karr September 15, 2006

Nice! I’ve written a post on blockquotes as well.

Reply

Chris P. September 15, 2006

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.

Reply

Dan Butcher September 15, 2006

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

Reply

Nick Wright September 18, 2006

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).

Reply

Chris P. September 18, 2006

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.

Reply

Nick Wright September 19, 2006

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.

Reply

Beppone September 19, 2006

Thank’u very much.. info veeery nice and important for me.. thank’s again..

Reply

Asma September 19, 2006

Great shot on pullquotes …!

Reply

ming September 28, 2006

gread tip, ps your blog looks nice on the new google reader:)

keep up the great work!

Reply

Thierry October 8, 2006

Very nice.

This article shows another way to style pullquotes (with images). I think both methods could be used together.

Reply

raj October 11, 2006

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.

Reply

John Piercy December 26, 2006

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

Reply

Timothy McCorkell January 23, 2007

Great article. I just linked your URL on my website. Thank You for sharing.

Reply

vicharak January 24, 2007

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!

Reply

Lynda Walldez January 24, 2007

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?

Reply

Chris P. January 26, 2007

Vicharak, John Piercy — In the Cutline CSS, pullquotes can only be implemented via classes applied to <blockquote> tags.

Regarding the issue of div tags 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 a div), 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:

  • Purchase a domain name
  • Get reliable Web hosting (I like MidPhase)
  • Install WordPress on your new server
  • Install the Cutline theme
  • Start pulling quotes like it’s your job!

Reply

Giorgio April 20, 2007

Here a plugin that makes pullquoting easy with wordpress. http://www.cafelamarck.it/22/fancy-pullquotes/

Reply

John C Abell April 21, 2007

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

Reply

kendra April 25, 2007

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.

Reply

Karlson May 9, 2007

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.

Reply

Chris P. May 9, 2007

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.

Reply

Karlson May 9, 2007

Thanks Chris- Works Great!

Reply

Don June 7, 2007

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?

Reply

Chris P. June 8, 2007

Don — For whatever reason, your Cutline stylesheet has been modified from the original version. You’re using blockquote classes (pullquote_left and pullquote_right) that are not part of the default framework, and on top of that, borders have been turned off on the primary blockquote definitions 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 blockquote classes away from pullquote_left and pullquote_right, and instead just apply a left or right class to your blockquotes.

Reply

Michael March 20, 2008

I tried to do editing of the style sheet, but it does not show anything.

T T

Reply

JHS June 2, 2008

Can’t get any of these methods to work. Of course, the theme I am using has a series of CSS definitions that begin with .SC and one is .SC p so I assume that has something to do with it.

Reply

Chris Pearson June 4, 2008

JHS — Based on what I saw in your theme, the CSS you’ve used ought to work. Apparently, though, the definitions in your stylesheet are more specific, and therefore, they are the ones being applied. Despite this, you may be able to force the issue by adding the !important attribute to your custom CSS definitions. Give that a shot, and see if it doesn’t solve your problem.

Reply

Ian Herrick July 4, 2008

I have just ocme across this site….. it isa wordpress users Mecca.. I n’t know what to try first!!!! Maybe an idiots guide for beginners..

Reply

Rapid Blogger September 11, 2008

Impressive! You’ve got a great idea there. I always loved pullquotes on books as well. Funny is, I just know now that it is called “pullquotes”. Sure would look good on blogs.

I will try to implement it as well.

Reply

Lawrence October 2, 2008

Great post, Chris. How do you implement these on the Thesis theme? Been fiddling around and getting nowhere fast …

Reply

Chris Pearson October 13, 2008

Lawrence — Pullquotes are included in the Thesis framework (without you having to add anything). To use them, simply add a class of left or right to a blockquote (you’ll need to switch to the HTML editor to insert the class), and then Thesis will do the rest of the styling for you!

Reply

Damien December 2, 2008

Heey Chris, your blog looks amazing and I love the content and style you have got. Keep up the good work. I will also create a blog as soon as I am free (may be in three/four months) and I am wondering what theme you have built your blog on or is it totally self-made? I mean did you create your blog by modifying one of your themes that you share with the public? If so can you share with us what theme it is we can modify for ourselves?

Reply

steelfrog December 12, 2008

A better way to separate your left-floated from right-floated pullquotes would be to create generic “floatleft” and “floatright” classes and use those in conjunction with your other styles.

You would define your blockquote style, minus the float, and then call the floatleft or floatright class after (e.g., class=”pullquote floatleft”)

Reply

Pete February 23, 2009

Thanks! This didn’t work for me until I made a few modifications. Following steelfrog’s suggestion, I named my styles floatleft and floatright. Here’s the final product:

floatleft {
width: 200px;
margin: 10px 15px 5px 0px;
font-size: 1.3em;
color: #555;
font-weight: bold;
text-align: center;
border: 3px double #aaa;
border-width: 3px 0px;
padding: 3px 6px;
float: left;
}

floatright {
width: 200px;
margin: 10px 0px 5px 15px;
font-size: 1.3em;
color: #555;
font-weight: bold;
text-align: center;
border: 3px double #aaa;
border-width: 3px 0px;
padding: 3px 6px;
float: right;
}

Reply

Ice Cool Code February 23, 2009

Hey Chris, thanks for the stylistic reminder. Pullquotes are underused, and while I don’t personally think they add much to the actual ‘learning experience’ of reading an article, they definitely improve the attractiveness of text layout — vital for getting attention! Found you via seobook: keep up the good blogging!

Dave

Reply

Brett August 12, 2009

Hello,

First, thanks for the great “pull quotes.” I really like the look of them and am now implementing them on a site I am working on.

That being said, I am having issues with wordpress and the code validating. For some reason, wordpress likes to start tags, and never close them, and/or, close them at the wrong locations. For example, if I insert

it will do something like this.

Lorem ipsum dolor sit amet

I can only really getting it working properly if I end a paragraph, insert

and then start a new paragraph.

Any ideas?

Thanks again!

Reply

Brett August 12, 2009

Sorry for the mistake above. Maybe I can show it using code tags.

So, for example, if I insert

, it will do something like this:


Lorem ipsum dolor sit amet

I can only really get it working properfly if I end a paragraph, insert

and then start a new paragraph.

There, hopefully that worked.

Reply

Brett August 12, 2009

Wow, I have just managed to make a complete idiot of myself.

Reply

Ramses December 2, 2009

Hey Chris,

it’s an old post, but I finally found it – man, this is my today’s jackpot for sure!

I love Thesis so much ;-)

Reply

Ginger August 18, 2010

Hello Chriss

I’m missing something. I’m using Thesis 1.7…my pullquotes look just like yours except I’m missing the big quote marks. I’ve used firebug to inspect your elements on this page and I cannot see how the heck you get the quote marks to appear.

What am I missing?

Thanks

Reply

Chris Pearson August 18, 2010

Ginger, the pullquotes on this site are customized; Thesis doesn’t include the same customizations by default. For the record, I’ve simply applied a background image to the blockquote element to pull that off.

Reply

Militia November 22, 2011

Pull quotes are perhaps one of the more difficult things for me to do in a stylish manner. But when you go to websites that use them efficiently, they look great. I’ll need to practice this a little to get the right spacing and such to look right.

Reply

Steven J Fromm March 8, 2014

What if your technical skills are not good enough to do these. Is there an easier way or a template that can be used instead of doing all this coding. Not sure I can pull this off.

Reply

Hoot and/or Holler

Previous post:

Next post: