Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Sven Lennartz 24. Juni 2008

Pull Quotes und Zitatkästen

Kein Beitragsbild

von Sven Lennartz

Zuerst ein­mal: bei­de sind Zitate und kön­nen auf die glei­che Weise dar­ge­stellt wer­den. Pull Quotes sind ein Zitat aus dem gera­de dar­ge­stell­ten Text, sie die­nen gestal­te­ri­schen Zwecken. Einige Wörter wer­den her­aus­ge­pullt. Manchmal wer­den ähn­lich wie Überschriften dar­ge­stellt. Während ech­te Zitate aus ande­ren Quellen stam­men und aus inhalt­li­chen Gründen ein­ge­fügt wer­den.

Sie müs­sen auch kei­nes­wegs beson­ders her­vor­ste­chen. Sie kön­nen auch Fließtext sein. Um den geht es uns hier aller­dings nicht. In bei­den Fällen kom­men die sel­ben Techniken zum Einsatz: Grafiken, CSS, manch­mal ein biss­chen Javascript.

Screenshot Pullquote
Pull Quote inner­halb eines Artikels. Die her­aus­ge­stell­te Passage (fett) wird vor­weg­ge­nom­men, sie befin­det sich am Ende des Artikels.

Pull Quotes wer­den ver­wen­det um Textpassagen zu beto­nen. Sie wie­der­ho­len kur­ze weni­ge, aus­sa­ge­kräf­ti­ge Wörter eines län­ge­ren Textes. Damit ste­chen sie optisch her­aus, glie­dern einen Text und machen ihn inter­es­san­ter. Denn Websurfen lesen kei­ne Texte, sie scan­nen. Man muss ihnen etwas geben dass ihre Aufmerksamkeit weckt und ihre Blicke fes­selt. Pull Quotes errei­chen genau das. Sie las­sen sich auf ver­schie­de­ne Weise gestal­ten, zück­hal­tend und durch­aus auf­fäl­lig – sogar mit Grafiken und Bildern. Pull Quotes sind eine tra­di­tio­nel­le 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 gewach­sen ist, wird nicht immer ver­stan­den. Das gilt natür­lich ganz beson­ders, wenn man Dinge schreibt, die man selbst gar nicht geschrie­ben hat. Zitieren ist eine Kunst für sich, die man mit eini­gen weni­gen Regeln aber schnell beherrscht. Dienstleister nut­zen sie gern gern für Textimonials. Hier han­delt es sich ledig­lich um ein ein­fa­ches Zitat. Auch Blogkommentare wer­den gern wie Zitate gestal­tet. Während Pull Quotes inner­halb von HTML nicht vor­kom­men, ist das bei Zitaten anders.

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

“Dies ist ein Zitat.”

Auch kur­si­ve Schrift wäre denk­bar, ist aber am Bildschirm nicht gut zu lesen. Längere Passagen kön­nen als eige­ne Absätze behan­delt wer­den. Sie soll­ten sich aber vom übri­gen Schriftbild unter­schei­den. Verwenden Sie eine klei­ne­re, enge­re Schrift, Anführungszeichen sind dann nicht nötig.

HTML kennt fol­gen­de logi­sche Auszeichnungen für Zitate:

<blo­ck­quo­te>
<cite>
<q>

Screenshot Pullquote

Das Erscheinungsbild der Anführungszeichen kann via CSS beein­flusst wer­den, schließ­lich gibt es ganz ver­schie­de­ne Zeichen für den sel­ben Zweck. Zum Beispiel die­se:

Da es Probleme mit den Zeichensätzen geben kann, kön­nen die­se auch nume­risch (sie­he wei­ter unten) dar­ge­stellt wer­den. Es besteht sogar die Möglichkeit, Zitatzeichen je nach Landessprache dar­zu­stel­len. Ein W3C Beispiel dazu sieht fol­gen­der­ma­ßen aus:

Gallery der Pull Quotes und Zitate
Anführungszeichen, Klammern, Linien, Sprechblasen. Das alles natür­lich in ver­schie­de­nen Farben und Größen. Pull Quotes soll­ten nicht zu oft auf einer Seite vor­kom­men, sie büßen sonst an Wiorkung ein. Ein- bis zwei­mal muss genü­gen.

Screenshot Pullquote

Screenshot Pullquote

Screenshot Pullquote

Screenshot Pullquote

Screenshot Pullquote

Screenshot Pullquote

Screenshot Pullquote

Screenshot Pullquote

Screenshot Pullquote

Screenshot Pullquote

Screenshot Pullquote

Screenshot Pullquote

Screenshot Pullquote

Screenshot Pullquote

Screenshot Pullquote

Tutorials und Artikel

Weitere Links

Sven Lennartz

Sven Lennartz

Ex Webdesigner, Gründer von Dr. Web und Smashing Magazine. Heute ist Sven als Schriftsteller und Blogger unterwegs. Schau was er jetzt macht…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.