Use Pull Quotes To Grab Visitor Interest

Web visitors are notoriously impatient. They'll scan your page for a few seconds and if nothing looks interesting or useful, head off to another site. Catch and hold visitors' interest with pull quotes. Use them to emphasize important statistics, highlight a provocative quotation, or draw attention to a checklist.

Select The Best Format

Magazine articles, newspaper stories, direct mail solicitations, etc. use this technique all the time. It's a great way to generate interest and draw readers into the site's content.

Pull quotes are also surprisingly easy to code. All you're doing is wrapping your text around a single cell table much like you can wrap text around images. Unlike text around images though, you have to do some extra formatting to achieve the desired effect in your pull quote.

  • Differentiate the font. Use a different size and/or style font for your pull quote. Many designers put pull quotes in italics or in bold face type.
  • Make the table stand out. Consider using a background color for emphasis inside the pull quote table. Be careful with color though: make sure it complements the rest of the site and provides good contrast.
  • Use quotation marks. If you're quoting directly from the text, use quotation marks. It's tempting to use curly opening and closing quotation marks ("“" and "”") to give the pull quote the feel of a "real" quote, but they are Internet Explorer-specific. Visitors using either the Netscape or WebTV browser will see the actual code instead of a quotation mark.

Always Use The ALIGN Attribute

Once you have your quotation selected and formatted in HTML, put it inside a single cell table.

The key to text wrapping is to always include the ALIGN attribute inside your opening TABLE tag. Set the value to either left or right to indicate where you want the pull quote placed in relation to the other text. Note: you can also set ALIGN="center" and center the table on the page, but that won't allow text to flow around the table.

<TABLE width="125" height="150" 
           align="right" border="0" cellpadding="4">
    <TD width="100%" bgcolor="#003399">
    <FONT color = "#FFFFFF" size="4">
    <B>"Catch and hold visitors' interest with 
               pull quotes."</B>

Then, place that table inside the rest of your text wherever you want the pull quote. You can use nested tables or merely include it inside a paragraph tag. Experiment some to find the best layout effect.

Below a simple Web page example using the pull quote HTML code above and nested it inside another single cell table. If you look at the source code, you can easily see how the pull quote fits inside the larger table.

Impact Without Extra Download Time

Think of some ways Web designers add visual interest and excitement to their Web pages: images, JavaScript, Flash, JAVA applets, etc. All those are great techniques, but each has one or more drawbacks.

  • Added download time: Images, applets, and Flash increase page download time. Visitors may get tired of waiting and leave.
  • Browser incompatibility: Some browsers aren't completely compatible with JavaScript or the user may have JavaScript turned off.
  • Special software: Users may not have the required plug-ins to view Flash or other special effects.

None of that is a problem with pull quotes. Since pull quotes are plain text, they'll display at the same rate as the rest of your content and all browsers can display them.

Code Carefully To Avoid Errors

Of course, nothing comes without a price. Don't get carried away and load your page down with pull quotes. One or two good, succinct quotes scattered on your page is plenty. You'll dilute their overall effect if you use more.

"Catch and hold visitors' interest with pull quotes."

The design may also cause problems for some visitors. A browser takes longer to interpret and display a complex nested table design. Remember that multiple tables display faster than a single giant table stuffed with content. Some older browsers may also get confused if you forget to close all tags. Keep your pull quotes and tables as simple as possible.

Simple tables are easier for you to code too. Carefully indent your HTML code to clearly show where the tables begin and end. A good structure makes them easier to code and debug!

Rate This Tip:
Not Useful Useful Very Useful   

Copyright by Steve Nearman (The Master's Touch - 2003- all rights
reserved. No part of this web site can be reproduced in any form without written permission.