Block Quotes and Pull Quotes: Examples and Good Practices

Advertisement

Quotes are used to emphasize excerpts of text. Since users almost never read but scan we need to provide them with some focus anchors to fix their attention to the most important parts of our articles. Furthermore, quotes are always used for testimonials and sometimes for blog comments. They can be styled using graphics, CSS and a little bit of JavaScript. Sometimes, creative dynamic solutions can be applied as well.

This post presents creative examples and best practices for design of pull quotes. We’ve tried to identify some common solutions and interesting approaches you may want to use or develop further in your projects.

You may also want to take a look at the posts

Aren’t all these quotes the same?

No. First of all: quote ≠ block quote ≠ pull quote. Pull quotes are short excerpts from the presented text. They are used to pull a text passage out of the reader’s flow and give it a more dominant position in the post or the article.

Screenshot Pullquote5
Pull quote included into an article. The pulled out passage is mentioned few blocks further.

Just like a pull quote blockquote (actually block quotations) are also set off from the main text as a distinct paragraph or block. However, they refer to some external citation which isn’t already mentioned in the article. Block quotations are usually placed within the reader’s flow.

Finally, “normal” quotes cite the content found in some other sources and are included to support the content rather than dominate over it.

Blockquote vs. Q vs. Cite

According to HTML specifications, there are three elements which are supposed to semantically mark up quotations, namely <blockquote>, <q> and <cite>. Although all intended to markup quotes, they should be used in different contexts. So when should you use what? HTML Dog6 provides a nice and compact overview of these elements:

<blockquote>

blockquote is a large quotation. The content of a blockquote
element must include block-level elements such as headings, lists, paragraphs
or div’s. This element can also have an optional attribute cite
that specifies the location (in the form of a URI) where the quote has come from. Example:

<blockquote cite="http://www.htmldog.com/reference/htmltags/blockquote/">

   <p>A large quotation. The content of a blockquote element must include block-level elements such as headings, lists, paragraphs or div's.</p>
   <p>cite can be used to specify the location (in the form of a URI) where the quote has come from.</p>

</blockquote>

<q>

q is a small quotation. The content of this element is an in-line quote. Modern browsers know how to interpret <q> which is why you can style quotations using this HTML-elements via CSS. Example:

<p>Bob said <q>sexy pyjamas</q> but Chris said <q>a kimono</q></p>

Although <q> is almost never used, it has some useful properties. For instance, you can specify the appearance of quotes within the <q>-element via CSS. That’s reasonable as different languages use different quotation marks for the same purpose. For instance, these ones:

Q {}
Q { quotes: '»' '«'   }
Q { quotes: '„' '“' }

Modern browsers support this way of styling. Of course, Internet Explorer (even in its 8th version) doesn’t support it although it knows <q> pretty well. In particular, since some problems with encoding of quotes can appear sometimes it’s useful to provide numeric values (see below).

According to standards you can even specify the appearance of quotation marks depending on the browser’s language of the user. This is how a W3C-example looks like:

:lang(fr) > Q { quotes: '« ' ' »' }
:lang(de) > Q { quotes: '»'   '«' '2039' '203A' }

As pretty as they may be, pull quotes have inherent problems in the way they are placed in the middle of HTML content. To a visual, CSS enabled browser all might seem hunky-dory, but to those browsers that are not CSS-abled and fall back on the plain HTML or to screen readers for visually impaired users, the pull quotes will appear slap bang in the middle of the main content. A quote suddenly appearing between two paragraphs is clearly out of place and will confusingly break the flow.

If you are using pull-quotes, it is wise to provide a little extra information for users who would stumble on this problem. In the XHTML you can provide a message, hidden from view with CSS that reads something like "Start of pull-quote" before the quote and then "end quote" after it. You could even have a link similar to the "skip navigation" link, which would offer the user the ability to skip the pull-quote and continue to the main content.

<cite>

cite defines an in-line citation or reference to another source. Example:

<p>And <cite>Bob</cite> said <q>No, I think it's a banana</q>.</p>

Summing up: for large quotes use blockquote, for small quotes use q and for references to another sources cite should be used. In practice, usually only blockquote and q are used.

Gallery of Pull Quotes and Citations

Quotes, braces, lines, dialogue boxes, balloons — there are a number of paths a designer can take to create a beautiful and memorable quote. Design solutions vary in colors, forms and sizes. Different techniques produce different result: however, it is important that it is clear to the visitors that the quote is actually a quote, otherwise it becomes easy to keep track on the content.

Keep in mind: pull quotes shouldn’t be used too often, they shouldn’t be too large and they shouldn’t be included for the wrong purposes. In most cases an ordinary article should have at most 1-2 pull quotes, otherwise they lose their appeal and the article becomes harder to scan.

Screenshot Pullquote7

Take a look at the example above. 99designs8 uses a block quotation to emphasize what the site is about. However, the text put in the quotes actually isn’t a quotation. We do not know why quotation mark is used in this case. We do know, though, that they shouldn’t be used in this context.

1. Simple indentation

In most cases simple indentation is enough. In this case the structure of the content makes clear that the intended content is taken out from the main content flow. However, using this approach you need to make sure you have a very intuitive typographic and visual hierarchy and the indentation won’t be misunderstood. Often italics are used to indicate that the content is a quote and sometimes quotation is centered. The latter technique, however, is used quite rarely.

Screenshot Pullquote9

Screenshot Pullquote10

Screenshot Pullquote11

2. Quotes and indentation

Another standard approach for design of pull quotes is to use the quote itself as a visual element to clearly indicate what the text passage is supposed to stand for. This technique is by far the most popular one and there is a good reason behind it: it unambiguously communicates the meaning of the text block. Surprisingly, the quote visuals are almost always placed on the left of the quote. You may try to experiment with quote on the right, or at the bottom of the passage.

Screenshot Pullquote12

Screenshot Pullquote13

Screenshot Pullquote14

Screenshot Pullquote15

Screenshot Pullquote16

Screenshot Pullquote17

Screenshot Pullquote18

Screenshot Pullquote19

Screenshot Pullquote20

Screenshot Pullquote21

Screenshot Pullquote22

3. Lines and indentation

Standard, most usual and recommended way of designing blockquotes.

Screenshot Pullquote23

Screenshot Pullquote24

Screenshot Pullquote25

Screenshot Pullquote26

Screenshot Pullquote27

Screenshot Pullquote28

4. Quotations highlighted with a color

Frequently designers use indentation together with a variation of color which is applied to the quote. Usually if the layout is dark quotes are presented in colors which are darker than the main content. And if the layout is light the quote is presented in lighter colors. If quotes need to be strongly emphasized vibrant colors are used. For modest highlighting usually slight variations of main colors suffices to indicate the difference between the main content and cited text.

Screenshot Pullquote29
Natalie Jost displays a random quote from the Bible on her blog

Screenshot Pullquote30

Screenshot Pullquote31

Screenshot Pullquote32

5. Pull Quotes

Actually we know it from print where quotes-neighbours are supposed to emphasize some important message or interview excerpts. Pull quotes are placed not within, but next to the content. Such quotes are usually short and don’t provide any additional information as they can also be found in the article. In Web the technique is seen rather rarely, but it has a charm of its own and — if used properly and for the right purposes — may strongly support the content. To clearly separate the “neighbours” from the main content designers often use lines or a large amount of whitespace.

It is important to understand that in such cases pull quotes break the usual content flow which may make it harder for the readers to actually follow the argumentation of the article. In some cases it is more effective to avoid quotes (e.g. if a complex matter is described) while in other cases quotes can quicken and simplify the understanding (e.g. the main statement in the interview).

Quotes-neighbours are usually placed on the right side of the content in order to not break the reader’s flow and remain passive.

Screenshot Pullquote33

Screenshot Pullquote34

Screenshot Pullquote35

Screenshot Pullquote36

6. Creative solutions

Sometimes designers come up with creative solutions one actually wouldn’t expect from such an element as a quote. Here are some of them. Hopefully, they’ll help you to come up with further interesting ideas for the design of pull quotes.

Screenshot Pullquote37

Screenshot Pullquote38

Screenshot Pullquote39

Screenshot Pullquote40

Screenshot Pullquote41

Screenshot Pullquote42

Screenshot Pullquote

Screenshot Pullquote43

Screenshot Pullquote44

Screenshot Pullquote45

7. Quotations as a standalone element

Often quotations are used and designed not inside an article, but as a standalone design element which is given the dominant position in the design. This is often the case in testimonials where companies present quotes from their customers and clients to confirm the quality they actually promise. In such cases quotations are usually big, bold and clearly visible.

In testimonials quotes are sometimes “rotated” meaning that among 5-7 testimonials only one is displayed at once.

Screenshot Pullquote46

Screenshot Pullquote47

Screenshot Pullquote48

Screenshot Pullquote49

Screenshot Pullquote50

Screenshot Pullquote51

8. Bonus: Footnotes

In books and scientific documents citations are often provided with a footnote reference to the original document. In the Web, where references are commonly just linked to, this technique has never managed to become popular, however footnotes aren’t difficult to achieve with pure CSS.

For instance, if you’d like to cite an excerpt from a book, instead of providing the corresponding title and page number you can simply refer to a footnote below the article. Thus you can avoid overloading your article with too many references. Footnotes, hence, can make it easier for your readers to actually read your article and provide details “on-demand” — only when they are needed.

Sometimes footnotes are also used by authors to provide some remarks to the article (similar to books). However, it is not always reasonable to use footnotes for links. Web is a dynamic medium and links are extremely powerful – you don’t have to send your visitors to the footer of the page first to be able to follow a given link.

Screenshot52

Take a look at the following example. Naz Hamid53 uses both a blockquote (label 2 in the image above) and a footnote in his articles. The reference to the footnote and the footnote itself are interconnected: visitors can click on the reference and jump to the footnote. And in the footnote the “return”-icon allows the user to jump from the footnote to the place in the article where it is referred to. The author uses the footnotes to provide a personal remark on what has been mentioned in the article (labels 1 and 2).

With footnotes you can offer your visitors some traditional, classic layout feeling without overwhelming them with long references to citations you provide.

Tutorials

Further references

  • Elements of Design: Pull Quotes82
    Christian Watson showcases 20 examples of attractive, unusual and beautiful pull quotes.
  • WordPress Plugin: JavaScript Pull-Quotes83
    A plugin that allows you to easily insert pull-quotes into your posts and pages. It uses client-side JavaScript.
  • Grid-Based Design: Six Creative Column Techniques at Smashing Magazine84
    Look at the “Escaping Boundaries” section (fourth from the top). Pull-quotes are an example of a design element that presents an opportunity to break out of your established visual flow. The older version of Andy Rutledge’s Design View used interesting pull-quotes that broke the visual flow of the column. Doing this places greater emphasis on the pull-quotes than if they were kept within the content of the column.

Footnotes

  1. 1 http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
  2. 2 http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/
  3. 3 http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/
  4. 4 http://www.smashingmagazine.com/2007/11/07/tag-clouds-gallery-examples-and-good-practices/
  5. 5 http://www.andyrutledge.com/volume-doesnt-matter.php
  6. 6 http://htmldog.com/reference/htmltags/
  7. 7 http://99designs.com/
  8. 8 http://99designs.com/
  9. 9 http://blog.webreakstuff.com/
  10. 10 http://www.praxisbuch-web20.de/kritiken.php
  11. 11 http://www.mattystudios.com/
  12. 12 http://digitaldaily.allthingsd.com/category/quotes/
  13. 13 http://www.alistapart.com/articles/writingainterfacestyleguide
  14. 14 http://www.davidville.com/
  15. 15 http://www.artypapers.com/
  16. 16 http://shauninman.com/archive/2008/05/30/check_out_css_cacheer
  17. 17 http://www.456bereastreet.com/archive/200805/temporary_absence/
  18. 18 http://www.elitistsnob.com/
  19. 19 http://www.viget.com/advance/
  20. 20 http://mezzoblue.com/
  21. 21 http://www.wishingline.com/notebook/
  22. 22 http://www.45royale.com/
  23. 23 http://coda.co.za/blog/
  24. 24 http://www.onemanblogs.co.uk/
  25. 25 http://www.standardsforlife.com/teaching-the-kidling-with-kitchen-tiles/#content
  26. 26 http://shiflett.org/blog/2008/may/who-created-php
  27. 27 http://shiflett.org/blog/2008/may/who-created-php
  28. 28 http://ilovetypography.com/
  29. 29 http://www.standardsforlife.com/teaching-the-kidling-with-kitchen-tiles/#content
  30. 30 http://jeffcroft.com/
  31. 31 http://www.31three.com/
  32. 32 http://www.mattystudios.com/
  33. 33 http://www.digital-web.com/articles/why_do_web_startups_die/
  34. 34 http://www.garrettdimon.com/
  35. 35 http://freelanceswitch.com/finding/4-steps-to-create-a-great-pitch-and-sell-your-writing/#more-1007
  36. 36 http://www.ianjamescox.com/index.php/site/blog/
  37. 37 http://www.grooveshark.com/
  38. 38 http://www.webtimeinc.com/
  39. 39 http://www.mississippiremixed.com/
  40. 40 http://www.springloops.com/
  41. 41 http://www.tff4.com/archives/2008/05/set-a-guinness-world-record.php
  42. 42 http://mvhmedia.com/
  43. 43 http://news.cnet.com/2030-1070-1001643.html?tag=nl
  44. 44 http://www.eguest.co.uk/
  45. 45 http://www.speaklight.com/
  46. 46 http://www.digital-web.com/
  47. 47 http://www.happycog.com/
  48. 48 http://www.tonygeer.com/
  49. 49 http://www.listpilot.com/
  50. 50 http://www.trale.com/
  51. 51 http://www.45royale.com/
  52. 52 http://nzrn.com/2008/06/03/the-other-chronicle
  53. 53 http://nzrn.com/2008/06/03/the-other-chronicle
  54. 54 http://www.10e20.com/blog/2008/04/11/using-pull-quotes-lift-outs-how-to-grab-your-readers-attention/
  55. 55 http://www.10e20.com/blog/2008/04/11/using-pull-quotes-lift-outs-how-to-grab-your-readers-attention/
  56. 56 http://blogsolid.com/ideas/2007/simple-css-blockquotes-and-pullquotes/
  57. 57 http://24ways.org/2005/swooshy-curly-quotes-without-images
  58. 58 http://24ways.org/2005/swooshy-curly-quotes-without-images
  59. 59 http://www.456bereastreet.com/archive/200609/automatic_pullquotes_with_javascript_and_css/
  60. 60 http://blue-anvil.com/archives/easy-jquery-pull-quotes
  61. 61 http://blue-anvil.com/archives/easy-jquery-pull-quotes
  62. 62 http://www.designmeme.com/articles/csspullquotes/
  63. 63 http://www.designmeme.com/articles/csspullquotes/
  64. 64 http://webservices.blog.gustavus.edu/2007/03/21/automatic-pull-quotes-with-behaviour-and-css/
  65. 65 http://www.fonts.com/AboutFonts/Articles/fyti/PullQuotes.htm
  66. 66 http://www.fonts.com/AboutFonts/Articles/fyti/PullQuotes.htm
  67. 67 http://css-tricks.com/better-pull-quotes/
  68. 68 http://www.sitepoint.com/examples/pullquotes/
  69. 69 http://www.sitepoint.com/examples/pullquotes/
  70. 70 http://www.pearsonified.com/2006/09/snazzy_pullquotes_for_your_blo.php
  71. 71 http://www.htmldog.com/articles/pullquotes/
  72. 72 http://www.htmldog.com/articles/pullquotes/
  73. 73 http://desktoppub.about.com/cs/pagelayout/ht/pull_quotes.htm
  74. 74 http://www.maxdesign.com.au/presentation/pullquote/#section01
  75. 75 http://green-beast.com/blog/?p=189
  76. 76 http://green-beast.com/blog/?p=189
  77. 77 http://www.brandspankingnew.net/archive/2006/01/footnotes-with-css-and-javascript.html
  78. 78 http://www.brandspankingnew.net/specials/footnote_4.html
  79. 79 http://www.brandspankingnew.net/archive/2005/07/format_footnote.html
  80. 80 http://andreas.web-graphics.com/footnotes/index.html
  81. 81 http://andreas.web-graphics.com/footnotes/index.html
  82. 82 http://www.smileycat.com/design_elements/pull_quotes/
  83. 83 http://striderweb.com/nerdaphernalia/features/wp-javascript-pull-quotes/
  84. 84 http://www.smashingmagazine.com/2008/03/26/grid-based-design-six-creative-column-techniques/

↑ Back to topShare on Twitter

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

Advertising
  1. 1

    Nice post!

    2
  2. 2

    Now, finally! Smashing Magazine is back with its cool posts! SMASHING!..

    6
  3. 3

    great examples! thanks for sharing

    1
  4. 4

    A great article. I love the way you pay attention to details. I’m no designer, but want to change my website, and it’s so useful to see some good examples!

    Thank you for all the work!

    0
  5. 5

    Awesome article! You left nothing uncovered about quotes ;-)

    0
  6. 6

    Great post! Thank you.

    0
  7. 7

    Awesome examples. I’ve got a lot idea from this post. thanks

    0
  8. 8

    the gold mine !

    0
  9. 9

    Clemson Donnatucci

    June 12, 2008 7:46 am

    Nice collection of examples. I always forget how effective and eye catching pull quotes can be.

    Thanks.

    0
  10. 10

    Great article, the best in a long time!
    I think quotes are not only useful and great to grab the reader’s attention, they look really nice too. Adds sort of a literary and cultural look to a text.

    0
  11. 11

    cool article!

    0
  12. 12

    Yeah Block Quotes inspirations !

    0
  13. 13

    Oh man, where was this post yesterday. I spent way to long putting together a pull quote in html.

    As always, great resource.

    1
  14. 14

    Thanks Net Crusader. Fahm should be banned.

    0
  15. 15

    Wow!
    Really thorough article!
    Thanks for all of the references!

    0
  16. 16

    I just installed a pullquote plugin for WordPress on my blog.

    It’s not ugly and actually works pretty well–you just drop a span with a class of “pullquote” on whatever you wanted pulled and it uses javascript to generate the pull quote. That way, screen readers, etc, don’t get the extra/superflous text.

    0
  17. 17

    nice post! very very cool!

    0
  18. 18

    Far out. :) Good job, I got inspired.

    0
  19. 19

    Informative article! When writing blogs I never know what kind of block quotes to use. I will definitely bookmark this as a reference. Thanks!

    0
  20. 20

    Thanks. Nice post! I’m also inspired.

    0
  21. 21

    Smashing Magazine bringing it back! What a comprehensive post…keep this sort of work up and keep the generic photo posts out!

    1
  22. 22

    I’m of the opinion that you should turn automatic quote marks off for browsers that understand :before and :after and generated content, e.g.:

    blockquote:before, blockquote:after,
    q:before, q:after { content: “” }
    blockquote, q { quotes: “” “” }

    and add the quote marks in as part of the content. As Eric Meyer said recently at An Event Apart:

    …when someone comes to my site using a mobile device that doesn’t support CSS, and all the quotation marks are gone, how is that going to impact reading comprehension?

    0
  23. 23

    As always a brilliant and useful post! Thanks Smashing mag.

    3
  24. 24

    Good article, but linking to a site like 99designs causes me to rethink what you guys are doing here. Spec work hurts everyone, and when you have fifty people submitting a design and the winner gets $50 waters everything down. Maybe some people don’t know any better, but the whole make something for sweatshop wages, if you’re chosen.

    Sorry for the rant, I do enjoy most of your posts.

    0
  25. 25

    Fucking amazing list, as usual! Keep up the good work (except for that silly, rip-off, soul-sucking 99designs.com website… which is shite, for the reasons Jason pointed out). Cheers!

    PS John (as well as Eric Meyer) makes a good argument as far as accessibility goes. Point taken.

    0
  26. 26

    Simply great !! The varities you present always amazes me :-D

    0
  27. 27

    Great post, Love it~!

    0
  28. 28

    best website ever!

    0
  29. 29

    Yeeehhhhh Smashing me hardDD againNNah!!!

    0
  30. 30

    this is just awesome tutorial!

    0
  31. 31

    This are the post that I visit Smashing Magazine for!

    0
  32. 32

    the one from digitaldaily.allthingsd.com actually isn’t a blockquote but a styled paragraph.

    0
  33. 33

    ananda rizki ramdani

    June 13, 2008 1:12 am

    nice.. this is what i waiting for!!

    0
  34. 34

    Great post with lots of examples… good shot for a designer. thanx from spain

    0
  35. 35

    Great post!
    finally someone cleared to me the difference between cite, q, quote, pull-quote and others.

    Thanks guys!

    0
  36. 36

    Thanks for another great article from a top site.

    0
  37. 37

    IT Certification Training

    June 15, 2008 9:48 pm

    Great list as usual. Some very interesting approaches to pull quotes, and some new food for thought! I learned a few things as well, like the tag.

    Keep up the great work!!

    0
  38. 38

    Very helpful.

    0
  39. 39

    Nice post…love this website!

    0
  40. 40

    Nice idea. Tank you.

    Ralph

    0
  41. 41

    Most English style guides prohibit the use of quotation marks around block quotations; the indentation is enough to set them off the surrounding text. Styling HTML blockquotes with huge double quotation marks is a widespread but unfortunate affectation, like overusing ampersands.

    0
  42. 42

    Nice post, I like it. :)

    0
  43. 43

    Will not tell my name

    August 28, 2008 7:18 am

    very usefull!

    0
  44. 44

    Thanks for posting that , it was very useful and entertaining!I hope you make more!Bye!

    0
  45. 45

    Really, are you kidding? An advertisement for a spec work site?!

    Thought you guys were better than that.

    0
  46. 46

    Siouxie Boshoff

    April 22, 2009 6:19 am

    This is so useful. I come back here every now and then when I need a little extra inspiration and it has helped a lot. Thanks so much.

    0
  47. 47

    nice one. but i need the actual code for pull quotes

    0
  48. 48

    i need Pull quotes coding

    0
  49. 49

    Web Design Quote

    May 6, 2009 1:49 am

    I need a useful tips about quote and increasing traffic on the site.

    0
  50. 50

    Kramerica Today

    May 22, 2009 10:22 am

    Very good article. After reading this article I think I’m going to use pull quotes regularly in my column. Especially liked the tutorial links at the end, very helpful to continue.

    Kramerica Today is going quoting!

    0
  51. 51

    Man Mohan Singh

    July 17, 2009 3:20 am

    Nice Collection For Inspiration…

    Great Article..

    0
  52. 52

    Great article!

    Another fabulous pullquote plugin for WordPress is the “Simple Pull Quote” plugin – http://wordpress.org/extend/plugins/simple-pull-quote/

    Cheers!

    0
  53. 53

    Thanks! Great information. Clear. Helpful.

    0
  54. 54

    We use coolest pullquotes on our site

    0
  55. 55

    the quotation mark at 99design is simply eye candy and not used for any kind of pull quote functionality.

    they tried to mean that lots of buyers are saying what they put inside the quote marks. maybe they wanted to mean the press.
    Priyankar

    0
  56. 56

    Really great post!! I love all the examples and contexts in which they can be useful. Thank you!!

    0
  57. 57

    Another excellent article that I have taken inspiration from; implementing a block quote solution for our corporate website. Keep ‘em coming Smashing Magazine!

    0
  58. 58

    I like this post… helpfully… thanks…

    0
  59. 59

    Hey, thanks for these! Sometimes you just need a few examples to realize to that you have more options, than just using in-line quotes.

    0
  60. 60

    Glad I found your post. I am a working on my WP site and need some explanations on my blog layouts. Thanks.

    0
  61. 61

    this was a great example of a blog post that stayed on topic and really left me knowing everything I wanted to know plus more, I learned more than just about quotes here. It was inspiring!

    0
  62. 62

    Great post, I have learned so much. Thank you !

    0

↑ Back to top