Introduction
Quotes are used to
emphasize portion of text. Since
users almost never read but scan we'd like to supply them with some focus
anchors to repair their attention to the foremost 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 touch little bit of JavaScript. Sometimes,
creative dynamic solutions are often applied also.
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 wont to pull a text passage out of the reader’s flow and
provides it a more dominant position within the post or the article.
With numerous people
performing from home, we thought we might bring our Smashing Workshops from our
home offices to yours. Meet online front-end & UX workshops, with practical
takeaways, interactive exercises, recordings and a friendly Q&A.
Just like a pull quote
blockquote (actually block quotations) also are depart from the most text as a
definite paragraph or block. However, they ask some external citation which
isn’t already mentioned within the article. Block quotations are usually placed
within the reader’s flow.
Finally, “normal” quotes
cite the content found in another sources and are included to support the
content instead of dominate over it.
Create
Event
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 then “endquote” after it.
You could even have a link
almost like the “skip navigation” link, which might offer the user the power to
skip the pull-quote and still the most content.
Summing up: for giant
quotes use blockquote, for little quotes use q and for references to a
different 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 some paths a designer can fancy create a
gorgeous and memorable quote. Design solutions vary in colors, forms, and
sizes.
Different techniques
produce different result: However, it's important that it's clear to the
visitors that the quote may be a quote. Otherwise, it becomes easy to stay
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 a standard
article should have at the most 1-2 pull quotes. Otherwise, they lose their
appeal, and therefore the article becomes harder to scan.
However, the text put
within 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 utilized 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 most 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 wont to indicate that the
content may be a quote, and sometimes quotation is centered. The latter
technique, however, is used quite rarely.
2.
Quotes and Indentation
Another standard approach
for design of pull quotes is to use the quote itself as a visible element to
obviously indicate what the text passage is meant to face for.
This technique is far and
away the foremost popular one and there's an honest reason behind it: it
unambiguously communicates the meaning of the text block.
Surprisingly, the quote
visuals are nearly always placed on the left of the quote. You may attempt to
experiment with quote on the proper, or at rock bottom of the passage.
3.
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 most 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.
4.
Pull Quotes
Actually we all know it
from print where quotes-neighbours are alleged 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 will even be found
within the article. In Web the technique is seen rather rarely, but it's a
charm of its own and — if used properly and for the proper 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 know
that in such cases pull quotes break the standard content flow which can make
it harder for the readers to truly follow the argumentation of the article.
In some cases it is more
effective to avoid quotes (e.g. if a posh matter is described) while in other
cases quotes can quicken and simplify the understanding (e.g. the main
statement in the interview).
5.
Creative Solutions
Sometimes designers come
up with creative solutions one actually wouldn’t expect from such a component
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.
6.
Quotations As A Standalone Element
Often quotations are used
and designed not inside a piece of writing, but as a standalone design element
which is given the dominant position within the design.
This is often the case in
testimonials where companies present quotes from their customers and clients to
verify the standard they really promise. In such cases quotations are usually
big, bold and clearly visible.
In testimonials quotes are
sometimes “rotated” meaning that among 5-7 testimonials just one is displayed
directly.
7.
Bonus: Footnotes
In books and scientific
documents citations are often given a footnote regard to the first document. In
the Web, where references are commonly just linked to, this system has never
managed to become popular, however footnotes aren’t difficult to realize with
pure CSS.
Thus, you'll avoid
overloading your article with too many references. Footnotes, hence, can make
it easier for your readers to read your article and provide details “on-demand”
— only when they are needed.
The reference to the
footnote and the footnote itself are interconnected: visitors can click on the
reference and jump to the footnote.
With footnotes you can
offer your visitors some traditional, classic layout feeling without
overwhelming them with long references to citations you provide.
Written
by - Adarsh Rai
0 Comments