Es gibt zwei Dinge, die Sie zu fast jeder Website hinzufügen können, um die Leserschaft zu erhöhen: Drop Caps und Heldenschläge. Das ist nichts Neues und sie sind keinesfalls "Geheimnisse". Viele Designer wissen jedoch nicht, dass sie nicht nur aus ästhetischen Gründen verwendet werden. Heute werde ich erklären, warum sie funktionieren - und Ihnen zeigen, wie Sie sie am besten umsetzen können.
Kurz bevor ich eintauche, ein Wort der Warnung. Die Verwendung dieser Elemente wird Leserzahlen erhöhen. Das heißt, mehr Leute werden Ihre Kopie lesen. Wenn Ihre Kopie jedoch schlecht ist, können Sie auch Drop Caps und Heldeaufnahmen verwenden Antwortraten verringern. Sie benötigen also eine starke Kopie, um diese Elemente effektiv nutzen zu können. Andernfalls erhalten Sie tatsächlich weniger Conversions. Sie finden meinen vorherigen Artikel hier bei Design Shack. Dort finden Sie eine Kurzanleitung zum Erkennen und Schreiben von überzeugenden Texten.
Drop Caps
Jeder Designer ist mit schlauen, übergroßen Zeichen vertraut, die den Anfang eines Textblocks hervorheben. Auch als Initialen bezeichnete Tropfenkappen stammen aus der Inselkunst der britischen Inseln aus dem 8. Jahrhundert. Sie scheinen anfangs völlig dekorativ gewesen zu sein und blieben durch die Renaissance und in der modernen Verwendung, weil? Nun, sie sehen hübsch aus.
Wie sich jedoch herausstellt, sind sie mehr als nur eine Augenweide. Sie erhöhen auch die Leserschaft, indem sie ein grundlegendes menschliches Bedürfnis ausnutzen: das Bedürfnis nach Vollständigkeit. Einfach ausgedrückt, können die Leute es nicht ertragen, etwas auf halbem Weg zu lassen. Sie müssen es beenden. Wenn Sie vor dem Schlafengehen ein Buch lesen und denken: "Ich lege es am Ende der Seite ab", haben Sie nie wirklich etwas tun-wenn die Seite immer zur Hälfte eines Satzes endet. Sie müssen umdrehen, um es zu beenden, nicht wahr?
Drop Caps funktionieren auf die gleiche Weise. Weil sie hervorstechen und auf einer Seite in Ihren natürlichen Blickwinkel stoßen, sind sie fast unmöglich nicht lesen. Sie benötigen nur den geringsten Blick, um einen einzigen Brief aufzunehmen. Aber wenn Sie es einmal verstanden haben, müssen Sie zumindest den Rest des Wortes lesen, um die Vollständigkeit zu gewährleisten. Und wenn Sie das Wort einmal gelesen haben, werden Sie durch dasselbe Bedürfnis bis zum Satzende gehen. Mit einer guten Anfangszeile kann dies alles sein, um den Absatz lesen zu können. Und so weiter.
Einige bewährte Methoden für Drop Caps
Halten Sie sie einigermaßen klein
Sie können natürlich eine Mütze machen, die so groß ist, wie Sie möchten. Dies ist jedoch kontraproduktiv. Sobald sie über drei Zeilen hoch sind, lösen sich die Initialen vom Rest des Textes und stehen allein, was ihren Zweck unterminiert. Außerdem können die ersten Absätze recht kurz sein. Wenn Sie also dynamisch eine sehr große Drop-Cap am Anfang jeder Seite mithilfe von CSS anwenden, kann dies mehr vertikalen Speicherplatz beanspruchen als der angehängte Absatz. Was einfach dumm aussieht.
Lassen Sie mich auch an dieser Stelle darauf hinweisen, dass Sie sicherstellen möchten, dass Ihr Maß (Linienbreite) nicht zu groß ist, da Sie sonst immer noch Probleme damit haben. Mehr als 80 Zeichen pro Zeile verringern die Lesbarkeit. Wenn Sie also Mühe haben, Drop-Caps zu verwenden, möchten Sie wahrscheinlich, dass Ihr Maß schön und schlank bleibt, um es lohnenswert zu machen. ich benutze maximale Breite: 75ex; für alle meine inhaltsverpackungen.
Verwenden Sie eine starke Farbe
Es ist auch ratsam, Drop Caps in einer auffälligen Farbe zu setzen, anstatt in dunkelgrau oder schwarz wie der Rest Ihres Textes (ich gehe wiederum davon aus, dass Sie das lesbarste Design verwenden. Umgekehrter Text reduziert die Leserschaft. ) Orange oder Rot sind von Natur aus am besten, da sie die aufreizendsten Farben sind, aber jede Farbe, die Ihr Design zulässt, funktioniert wahrscheinlich besser als einfaches Grau oder Schwarz.
Heldenschüsse
Ein Heldenschuss ist ein Porträtfoto des Autors, das neben dem einleitenden Absatz steht. Sie kann sich links oder rechts vom Absatz abheben oder wie eine Fallkappe inline schweben.
Warum funktioniert es? Zwei Gründe:
- Gesichter erregen unsere Aufmerksamkeit wie verrückt. Von allen Formen und Mustern der Welt sind sie die, die wir am meisten erkennen und reparieren können. Warum denken Sie, dass die Jungfrau Maria so vielen Menschen in ihrem Müsli erscheint?
- Wir vertrauen den Menschen viel mehr, wenn wir das Gefühl haben, sie zu kennen. Wenn wir sehen, wie der Autor eines Stücks aussieht, beginnen wir eine stärkere Beziehung zu ihm aufzubauen. Dies ist nicht nur für die Leserschaft gut, sondern auch für die Konvertierung. Die Verbindung, die wir mit dem Autor spüren, erhöht unser Vertrauen in ihn, was den wahrgenommenen Wert dessen erhöht, was er sagt - und der wahrgenommene Wert ist der Grund dafür, dass Interessenten auf Aufrufe zum Handeln klicken.
Einige Best Practices für Heldenaufnahmen
Erinnern Sie sich an Ihre Bildunterschriften
Immer immer Verwenden Sie eine Bildunterschrift. Bildunterschriften werden um 200% mehr als Textkopien gelesen - Sie möchten also das Beste daraus machen. Es ist ratsam, nicht nur den vollständigen Namen und die Referenzen des Autors anzugeben, sondern auch ein wichtiges Verkaufsargument zu nennen: Fassen Sie einen Hauptvorteil, eine Garantie, eine Prämie oder ähnliches zusammen.
Stimmen Sie die Copy Voice ab
Natürlich macht es nur Sinn, einen Heldenschuss zu verwenden, wenn die Kopie wie von einer einzelnen Person geschrieben wird. Für Freelancer sind Heldenaufnahmen daher hervorragend - die meisten Top-Texter verwenden sie. (Ich verletze diese Regel auf meiner eigenen Website wegen meiner geheimnisvollen Persönlichkeit als Information Highwayman.) Für größere Unternehmen sind sie jedoch oft nicht auf jeder Seite geeignet.
Überfordern Sie nicht Ihren Leser
Denken Sie daran, dass Heldenschüsse ziehen Ja wirklich schwer. Dies bedeutet, dass sie mit anderen Elementen auf der Seite einschließlich Drop-Caps konkurrieren. Wenn Sie sich entscheiden müssen, ob Sie den einen oder den anderen verwenden möchten, ist ein Heldenschuss wahrscheinlich die bessere Option (Split-Test, um sicherzustellen, dass Ihre Laufleistung variieren kann).Wenn Sie nur den Heldenschuss verwenden, positionieren Sie ihn auf der linken Seite, um den natürlichen Augenpfad des Lesers zu unterstützen, anstatt ihn zu brechen.
Verwenden Sie nur ein qualitativ hochwertiges Bild
Es ist besser, überhaupt kein Bild zu verwenden, als ein mieses. Wenn Sie kein gutes Bild haben, verwenden Sie keinen Heldenschuss. Denken Sie daran, dass der Zweck besteht, den Leser zu einem Gefühl der Beziehung mit dem Autor zu ermutigen, um das Vertrauen zu stärken. Ein Foto mit Schnappzahnverzahnung, verkleinert von 640? 480 auf ein Miniaturbild von 50? 38 und dann wieder auf ein 120? 90-Held geschossen - dann als JPEG mit 40% Qualität gespeichert? nicht so gut. Keines der beiden ist im Allgemeinen ein Foto des Autors, der unrasiert, zerzaust, betrunken, stoned oder anderweitig zweifelhaft aussieht. Denken Sie daran, dass der Stil des Fotos dazu beitragen kann, die wahrgenommene Glaubwürdigkeit der abgebildeten Person zu beeinträchtigen oder zu beeinträchtigen.
Dies bedeutet auch, dass Sie vermeiden sollten, ein Bild zu verwenden, das mit Ihrem Design kollidiert. Im folgenden Beispiel werden Sie sehen, dass ich einen stilisierten Heldenschuss verwende, der zu meiner Kappe passt.
Beispiele mit Code
Ich gebe Ihnen unten einige Hinweise, um sowohl eine Mütze als auch einen Heldenschuss zu programmieren. Fühlen Sie sich frei, danach einzusteigen und meine Methoden zu kritisieren. Ich habe festgestellt, dass sie am besten funktionieren, aber es gibt immer mehrere Möglichkeiten, eine Katze zu enthäuten.
Erstellen einer Drop-Cap
Es war an der Zeit, dass Drop Caps zusammen mit Tischzellen gehackt werden mussten. Zum Glück ist das Erstellen dieser Modelle heutzutage viel einfacher und eleganter. Je nachdem, wie Sie Ihre Drop-Cap anwenden möchten, müssen Sie entscheiden, ob Sie eine Klasse, CSS-Selektoren oder beides verwenden möchten.
Wenn Sie glücklich sind, dass auf den ersten Buchstaben jeder Seite eine Drop-Cap angewendet wird, können Sie einfach Selektoren verwenden. Angenommen, der erste Absatz folgt immer einer Kopfzeile der ersten Ebene in Ihrer Markierung. In diesem Fall können Sie die CSS-Auswahl für benachbarte Geschwister in Kombination mit der erster Brief Pseudoklasse:
Es ist nett und einfach und funktioniert in jedem Browser, der es wert ist, erwähnt zu werden (und einige, die es nicht sind). Aber die Chancen sind, dass Ihr Markup nicht immer so grundlegend ist. Was ist beispielsweise, wenn Sie auf einigen Seiten einen Header der ersten und zweiten Ebene verwenden? Auch dies ist mit dem Nachbarsymbol für Geschwister leicht zu lösen:
Oder, wenn Sie HTML5 verwenden und Ihre Überschriften in Gruppen einteilen:
Persönlich möchte ich eine genauere Kontrolle als diese. Ich möchte nicht nur am Anfang jeder Seite eine Drop-Cap haben, sondern manchmal auch manuell (nach einem Abschnittswechsel). In solchen Fällen benutze ich eine Klasse.
Nun habe ich viele Leute gesehen, die das benutzen Spanne Elemente zum Erstellen von Drop Caps - wickeln Sie einfach den Buchstaben in ein mit der richtigen Klasse, und los geht's. Ich habe das immer als eher unelegant empfunden - aber wenn Sie mit Ihrem CMS eine Einschränkung haben, die meine Lösung problematisch macht, dann entscheiden Sie sich dafür. Ich ziehe es vor, eine Klasse an einen Absatz anzuhängen. Hier ist das CSS:
Ich benutze nicht p.drop-cap: Anfangsbuchstabe {} weil ich meine Optionen gerne offen halte. Eines Tages möchte ich vielleicht eine Blockquote setzen. Trotzdem ist das begleitende HTML einfach:
Okay, soviel zum Auslösen der Fallkappe. Aber wie sieht es eigentlich aus? Hier gibt es zwei kleine Einschränkungen.
Wählen Sie eine passende Schrift
Sie müssen sich daran erinnern, dass verschiedene Schriftarten unterschiedliche Hauptstile haben. Im Allgemeinen sollte ein Großbuchstabe ungefähr 1 em hoch sein. Aber einige Schriften haben? Eigenheiten. Manchmal werden Sie feststellen, dass ein „A“ viel mehr Platz beansprucht als beispielsweise ein „H“. Oder ein "J" drückt unter die Basislinie. Alle möglichen kleinen Macken wie diese können das konstante Erreichen einer gut aussehenden Fallkappe extrem schwierig machen. Ich schlage vor, Sie tun das Gegenteil von dem, was ich bei der Erstellung meiner Website getan habe, und finden eine Schriftart mit gleichmäßigen, konstanten Großbuchstaben, die Sie für Ihre Drop-Caps verwenden können. In den folgenden Beispielen werde ich League Gothic für die Drop-Cap und Aller Light für das Display-Gesicht verwenden.
Zeilenhöhe
Gecko-basierte Browser scheinen sich nicht für die Zeilenhöhe zu interessieren, aber WebKit-Browser tun dies. Wenn Sie die Zeilenhöhe falsch einstellen, werden Sie dies in Firefox nicht bemerken, aber die Drop-Cap wird in Chrome und Safari auf die falsche vertikale Position gesetzt.
Woher wissen Sie, welche Zeilenhöhe (und Schriftgröße) verwendet werden soll? Sie erhalten einen guten Startbereich, indem Sie die Anzahl der Absatzzeilen nehmen, die von der Kappe abgedeckt werden sollen, und diese mit der Absatzzeilenhöhe multiplizieren. Im folgenden Beispiel verwende ich eine Zeilenhöhe von 24px, und die Drop-Cap deckt drei Zeilen ab. Daher beginne ich mit einer Schriftgröße von 24-3 = 72px, setze die Zeilenhöhe auf dieselbe und siehe wie es aussieht.
Beachten Sie, dass ich eigentlich nicht die gesamten 72px vertikalen Leerzeichen einnehmen möchte, da die Drop-Cap mehr oder weniger bündig mit der Mittellinie der Absatzschriftart und nicht mit dem oberen Rand der Linie liegen sollte. Die meisten Schriftarten verwenden jedoch für ein Emblem weit weniger vertikalen Speicherplatz als die Schriftgröße zulässt. Bei 72px erhalten wir also möglicherweise nur 65px Glyphenhöhe.
Nun zum eigentlichen CSS. Ich gebe Ihnen dies im einzeiligen Format, während ich es aufbaue, und gebe Ihnen dann den endgültigen Code in einem Format, das am Ende einfacher zu lesen ist. Der Code für den Absatz ist ziemlich einfach:
Und wir werden die Drop-Cap zu einem Block-Level-Element machen und dann links neben dem Absatz platzieren:
Was kommt so heraus:
Es war einmal eine kleine Kappe namens "O". Er war in der Regel ein anständiger Kerl ohne Laune, aber in seinen vergeblichen Momenten hielt er es für liebenswert, sich selbst wie einen Schlepper zu sehen, der seine Leser furchtlos in ein weites Meer von sonst undifferenziertem Text zog. (Sein Designer hatte vergessen, seinen Inhalt mit anderen durchsuchbaren Elementen wie Absätzen, Listen und Zwischenüberschriften zu setzen. Eine sehr traurige Geschichte.)
Nicht schlecht, aber die Glyphe nimmt weniger Platz ein, als sie sollte. Bei einer Schriftgröße von 72px ist das "O" von League Gothic nur 55 Pixel hoch. Und es braucht auch etwas Luft zum Atmen; Es ist im Moment irgendwie gegen die Kopie gestopft.
Möglicherweise haben Sie bemerkt, dass Firefox die Glyphe ärgerlich über der Mittellinie des Absatzes positioniert, während Chrome oder Safari sie korrekt bündig positioniert. Dies liegt daran, dass sie unterschiedliche Vorstellungen davon haben, wo sich der Absatz oben befindet. Wir müssen einen oberen Rand hinzufügen, damit Firefox die Glyphe richtig positioniert. was bedeutet, die Zeilenhöhe für Chrome entsprechend zu reduzieren. Mit ein wenig Experimentieren habe ich Folgendes gefunden, um in dieser Instanz zu funktionieren - aber Sie müssen Ihren eigenen Code entsprechend den verwendeten Schriftarten, Schriftgrößen und Zeilenhöhen anpassen:
So sieht es aus:
Es war einmal eine kleine Kappe namens "O". Er war in der Regel ein anständiger Kerl ohne Laune, aber in seinen vergeblichen Momenten hielt er es für liebenswert, sich selbst wie einen Schlepper zu sehen, der seine Leser furchtlos in ein weites Meer von sonst undifferenziertem Text zog. (Sein Designer hatte vergessen, seinen Inhalt mit anderen durchsuchbaren Elementen wie Absätzen, Listen und Zwischenüberschriften zu setzen. Eine sehr traurige Geschichte.)
Ich empfehle wirklich, auch verschiedene Buchstaben zu testen. „M“ und „A“ weisen oft leichte vertikale Positionierungsprobleme auf, da ihre Kappenhöhe normalerweise größer ist als bei anderen Buchstaben, um die durch ihre Spitzen verursachte optische Täuschung der Kürze auszugleichen. Schauen Sie auch nach, wie "J" aussieht, da es manchmal sogar in Großbuchstaben einen Abstieg gibt. Wenn Ihre Schrift alte Figuren enthält, werfen Sie sie einfach heraus und finden Sie eine mit Zeilennummern. Dafür sind sie da!
Okay, lass uns einen Heldenschuss hinzufügen!
Einen Heldenschuss erstellen
Ich sagte, dass Heldenschüsse und Mützen um Aufmerksamkeit kämpfen können. In diesem Fall werde ich versuchen, dies zu meinem Vorteil zu nutzen. Ich benutze einen stilisierten Heldenschuss, der die Fallmütze ergänzt, und setze ihn fest in den ersten Absatz. Da es uns schwer fällt, Gesichter über alles andere hinauszusehen und genau zu untersuchen, werden die Augen des Lesers auf den zuerst geschossenen Helden gerichtet. Wenn sie die Bildunterschrift lesen, werden sie herausfinden, warum sie die Kopie lesen sollten. und dann geht die Mütze zur Arbeit und führt ihre Augen an die richtige Stelle.
Einen Heldenschuss einwickeln
Es könnte verlockend sein, einen Helden zu erschaffen, indem man einfach einen Helden wirft D Bnonn Tennant, Internet-Texter und Experte für Direktmarketing, wie Sie Ihre Conversion-Raten erhöhen können, indem Sie die Leserschaft Ihrer Kopie erhöhen. Ich persönlich bevorzuge es, den Heldenschuss auf der rechten Seite zu platzieren, mit einer Mütze auf der linken Seite. Das letzte Wort in dieser Hinsicht ist jedoch wie immer das Testen. Verschiedene Arrangements funktionieren für unterschiedliche Zielgruppen und unterschiedliche Designs. Sie können feststellen, dass Sie mit nur einem Heldenschuss auf der linken Seite und ohne Drop-Cap eine bessere Leserschaft erhalten. Oder eine Mütze und kein Held geschossen. Beachten Sie auch, dass ein Held mit anständiger Größe und nützlicher Bildunterschrift mindestens zwei Absätze umfasst, selbst wenn der erste Absatz relativ lang ist. Stellen Sie sicher, dies in Ihrem Entwurf zu berücksichtigen. Das sieht ziemlich gut aus, aber es gibt ein paar Probleme. Erstens ist das Bild etwas zu niedrig positioniert, da im Bild etwas unsichtbarer Raum vorhanden ist. Zweitens scheint die Bildunterschrift etwas vom Heldenschuss entfernt zu sein. Und drittens, da das Bild 100 Pixel hoch ist - was kein Vielfaches der von mir verwendeten 24 Pixel-Linienhöhe ist -, sitzt die Bildunterschrift etwas außerhalb des vertikalen Gitters. Mit ein paar Änderungen fand ich das a 
Rand oben von -15px für .hero-Schussund -11px für .heroshot p, mach die Dinge einfach nett. (Wenn diese Zahlen falsch erscheinen, liegt dies wahrscheinlich daran, dass sie immer etwas näherungsweise sind; es ist nahezu unmöglich, Ihren gesamten Text auf demselben vertikalen Raster anzuordnen). Hör zu:
D Bnonn Tennant, Internet-Texter und Experte für Direktmarketing, wie Sie Ihre Conversion-Raten erhöhen können, indem Sie die Leserschaft Ihrer Kopie erhöhen.
Ich persönlich bevorzuge es, den Heldenschuss auf der rechten Seite zu platzieren, mit einer Mütze auf der linken Seite. Das letzte Wort in dieser Hinsicht ist jedoch wie immer das Testen. Verschiedene Arrangements funktionieren für unterschiedliche Zielgruppen und unterschiedliche Designs. Sie können feststellen, dass Sie mit nur einem Heldenschuss auf der linken Seite und ohne Drop-Cap eine bessere Leserschaft erhalten. Oder eine Mütze und kein Held geschossen.
Beachten Sie auch, dass ein Held mit anständiger Größe und nützlicher Bildunterschrift mindestens zwei Absätze umfasst, selbst wenn der erste Absatz relativ lang ist. Stellen Sie sicher, dies in Ihrem Entwurf zu berücksichtigen.
Das letzte CSS
Hier ist der endgültige CSS-Code, wie versprochen (Sie können ihn gerne direkt kopieren):
Fazit
Und das ist es - wir sind gut, wenn wir mit einer coolen Mütze und einem Heldenschuss gehen. Fühlen Sie sich frei, in den Kommentaren Ihre eigenen Tipps oder Kritiken zu geben oder Fragen zu stellen.