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">
<TR>
<TD width="100%" bgcolor="#003399">
<FONT color = "#FFFFFF" size="4">
<B>"Catch and hold visitors' interest with
pull quotes."</B>
</FONT>
</TD>
</TR>
</TABLE>
|
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!
|
