Pull Quotes und Zitatkästen

von Sven Lennartz

Zuerst einmal: beide sind Zitate und können auf die gleiche Weise dargestellt werden. Pull Quotes sind ein Zitat aus dem gerade dargestellten Text, sie dienen gestalterischen Zwecken. Einige Wörter werden herausgepullt. Manchmal werden ähnlich wie Überschriften dargestellt. Während echte Zitate aus anderen Quellen stammen und aus inhaltlichen Gründen eingefügt werden.

Sie müssen auch keineswegs besonders hervorstechen. Sie können auch Fließtext sein. Um den geht es uns hier allerdings nicht. In beiden Fällen kommen die selben Techniken zum Einsatz: Grafiken, CSS, manchmal ein bisschen Javascript.

Pull Quote innerhalb eines Artikels. Die herausgestellte Passage (fett) wird vorweggenommen, sie befindet sich am Ende des Artikels.

Pull Quotes werden verwendet um Textpassagen zu betonen. Sie wiederholen kurze wenige, aussagekräftige Wörter eines längeren Textes. Damit stechen sie optisch heraus, gliedern einen Text und machen ihn interessanter. Denn Websurfen lesen keine Texte, sie scannen. Man muss ihnen etwas geben dass ihre Aufmerksamkeit weckt und ihre Blicke fesselt. Pull Quotes erreichen genau das. Sie lassen sich auf verschiedene Weise gestalten, zückhaltend und durchaus auffällig – sogar mit Grafiken und Bildern. Pull Quotes sind eine traditionelle Technik aus dem Zeitungs- und Zeitschriften Gewerbe. Diese Tradition lebt im Web fort. Allerdings nicht in den Online Ausgaben der großen Tageszeitungen, die sich mit der Präsentation von Texten meist wenig Mühe geben.

Wer schreibt, wie ihm der Schnabel gewachsen ist, wird nicht immer verstanden. Das gilt natürlich ganz besonders, wenn man Dinge schreibt, die man selbst gar nicht geschrieben hat. Zitieren ist eine Kunst für sich, die man mit einigen wenigen Regeln aber schnell beherrscht. Dienstleister nutzen sie gern gern für Textimonials. Hier handelt es sich lediglich um ein einfaches Zitat. Auch Blogkommentare werden gern wie Zitate gestaltet. Während Pull Quotes innerhalb von HTML nicht vorkommen, ist das bei Zitaten anders.

Anfang und Ende eines Zitates gehören in Anführungsstriche:

“Dies ist ein Zitat.”

Auch kursive Schrift wäre denkbar, ist aber am Bildschirm nicht gut zu lesen. Längere Passagen können als eigene Absätze behandelt werden. Sie sollten sich aber vom übrigen Schriftbild unterscheiden. Verwenden Sie eine kleinere, engere Schrift, Anführungszeichen sind dann nicht nötig.

HTML kennt folgende logische Auszeichnungen für Zitate:

<blockquote>
<cite>
<q>

Das Erscheinungsbild der Anführungszeichen kann via CSS beeinflusst werden, schließlich gibt es ganz verschiedene Zeichen für den selben Zweck. Zum Beispiel diese:

Da es Probleme mit den Zeichensätzen geben kann, können diese auch numerisch (siehe weiter unten) dargestellt werden. Es besteht sogar die Möglichkeit, Zitatzeichen je nach Landessprache darzustellen. Ein W3C Beispiel dazu sieht folgendermaßen aus:

Gallery der Pull Quotes und Zitate
Anführungszeichen, Klammern, Linien, Sprechblasen. Das alles natürlich in verschiedenen Farben und Größen. Pull Quotes sollten nicht zu oft auf einer Seite vorkommen, sie büßen sonst an Wiorkung ein. Ein- bis zweimal muss genügen.

Tutorials und Artikel

• Using Pull Quotes & Lift Outs: How to Grab Your Reader’s Attention

  

• Simple CSS Blockquotes and Pullquotes
• Swooshy Curly Quotes Without Images

  

• Automatic pullquotes with JavaScript and CSS
• Easy jQuery Pull Quotes

  

• CSS Pull Quotes

  

• Automatic Pull-quotes with Behaviour and CSS
• Pull Quotes, Article at fonts.com

  

• Using Pull Quotes To Attract Readers
• Better Pull Quotes: Don’t Repeat Markup
• Pullquotes That Really Pull

  

• Snazzy Pullquotes for Your Blog
• HTML Dog: Pull Quotes

  

• How To Use Pull-quotes
• Rounded corners pull-quote using CSS (Presentation)
• Making a WordPress Pull Quote

  

Weitere Links

• Elements of Design: Pull Quotes
  20 weitere Beispiele
• WordPress Plugin: JavaScript Pull-Quotes
  Eine Erweiterung
• Fancy Pull-quotes
  Noch ein WP-Plugin

Weitere Beiträge:

• 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
• Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
• Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
• Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
• Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
• 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
• Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.