-
Grundlagen
-
Technik
-
Marketing
-
Rechtliches
-
HTML Grundkenntnisse
-
CSS Grundkenntnisse
-
PHP Grundkenntnisse
-
JS Grundkenntnisse
-
Tools für deine Website
Die AIDA Kreuzfahrt durch das Text-Meer
Fangen wir doch gleich mit einer Headline als Stilmittel an. Das ist eine doppeldeutige und aufmerksamkeitsstarke Headline, um eine alte Werberegel zu beschreiben. Vielleicht hast du schonmal was von dieser Formel gehört. Es ist ein Akronym, das aus den Anfangsbuchstaben der englischen Worte Attention, Interest, Desire und Action gebildet wird. Eine Formel, nach der kurze Werbetexte bis heute geschrieben werden.
Die Headline hätte auch heißen können, "Eine Formel für gute Werbetexte"– klingt eher langweilig. Eine emotionale Headline ist aufmerksamkeitsstärker und merkfähiger. Wir haben gleich zwei Techniken angewendet:
- Eine Doppeldeutigkeit benutzt
- Ein Sprachbild erzeugt
AIDA heißt sowohl die bekannte Marke für Kreuzfahrtschiffe als auch die berühmte Werbeformel von Elmo Lewis aus dem Jahr 1898. Durch das Sprachbild entsteht plötzlich ein schönes großes Bild im Kopf und verknüpft sich mit dem Gedanken. So verankert sich der Gedanke im Unterbewusstsein und ragt aus dem "Text-Meer" heraus.
Die Formel ohne Hokuspokus
Die AIDA-Formel ist kein Hexenwerk, aber sie hilft dir, erfolgreiche Texte zu erstellen. A steht für Attention, Aufmerksamkeit. Das ist die Aufgabe der H1 Headline. Schreibe sie kurz und mache neugierig. Deute an, um was es im Text geht, verrate aber nicht alles. Sie kann provokant sein, lustig, zweideutig, unglaublich, ein Wortspiel enthalten oder eine Tatsache mal anders darstellen. Es gibt unendliche Möglichkeiten.
Nachdem du seine Aufmerksamkeit gewonnen hast, gilt es, Interesse zu wecken. Das bedeutet das I für Interest, auf Deutsch Interesse. Nun erklärst du dem Leser, warum das Thema für ihn interessant sein könnte und dass er Vorteile davon hat, weiterzulesen.
Der dritte Buchstabe D steht für Desire, auf Deutsch Verlangen. Nun beschreibst du die Argumente/Vorteile, die deine Leistung oder dein Produkt bietet und welche Probleme es lösen kann. Das Ziel ist es, den Besucher zu überzeugen, positiv zu stimmen und ihn zu einer Handlung zu führen. Diese Handlung kann alles sein, außer abzuspringen.
"Action" ist das letzte "A" der Formel. Jetzt soll er etwas tun. Im Online-Marketing ist das meistens der Klick auf einen Button, ein CTA-Element. So beginnt die erste Stufe des Verkaufstrichters (Sales Funnel). Meistens wird hier eine relevante Information gegen eine E-Mail-Adresse getauscht.
Text muss gut aussehen
Und relevant sein, wollen wir gleich ergänzen. Es ist nämlich ärgerlich für den Leser, wenn du deine Information "gut verkaufst", sein Interesse geweckt hast, aber der Leser in der ersten Minute feststellt, dass der Inhalt nicht seinen Erwartungen entspricht. Dann ist er sauer, dass er seine Zeit verschwendet hat. Du musst die richtige Balance zwischen echter Information mit Mehrwert und aktivierender Werbesprache finden.
Nehmen wir an, du hast einen Text mit relevanten Fakten für deine Zielgruppe geschrieben. Nun musst du deinen guten Text so strukturieren und formatieren, dass es dem Kunden leicht fällt, ihn zu lesen. Das ist die Lehre der Typografie. Denke daran, Surfer im Internet überfliegen die Texte mehr als dass sie sie lesen.
Typographie - die Regeln für gute Lesbarkeit
Das Problem, die Lesbarkeit von Text zu optimieren, ist kein Phänomen des Internets. Seit Erfindung des Buchdrucks im Jahr 1440 von Johannes Gutenberg haben Typographen daran gearbeitet. So sind die heute gültigen Regeln für gute Typographie entstanden. 10 ausgewählte und erprobte Anhaltspunkte, die auch fürs Internet gelten, wollen wir dir hier vorstellen:
Die Satzbreite einstellen
Das kennst du von Zeitungen und Zeitschriften: Läuft ein Text zu breit, ist er schlechter lesbar, weil man die Zeile verliert, wenn man zur linken Spaltenseite springt. Das nennt man Fixation. In Druckmedien sorgte der Satzspiegel für die optimale Satzbreite. Im Internet ist es Html und das CSS, Cascading Style Sheet genannt. Durch die responsive Anpassung variiert die Spaltenbreite je nach Browserbreite. Aber das kann der Webdesigner für jede Browserbreite durch die Media Queries anpassen.
Hier eine Regel zu definieren, ist schwer. Aber nichts definieren ist ja auch keine Lösung. Deswegen geben wir dir folgende Empfehlung mit relativen Proportionen in Übereinstimmung mit den Regeln für gute Typographie:
Bei einem 16:9 Breitformat (Standardformat) und der vollen Bildschirmbreite des Browsers bei einer Full-HD-Auflösung, also 1920 Pixel Breite, hat der Text-Container eine sinnvolle Breite von etwa 1200 Pixel. Er nimmt nicht die volle Breite des Bildschirms ein, sondern lässt links und rechts etwa 1/6 Platz. Teilt man diesen Text-Raum in zwei Spalten auf, hat der Text eine gute Satzbreite und ist angenehm zu lesen. Vorausgesetzt die Schriftart, Schriftgröße, Zeilenabstand und die Laufweite sind sinnvoll eingestellt.
Diese relative Satzbreite wird sich auch in der Responsive-Darstellung bei Hochformaten nicht wesentlich ändern. Nur die zweite Spalte wird unter die erste Spalte hüpfen.
Schriftart, Schriftgröße, Schriftfarbe
Ausgehend von obigem Beispiel, ist eine Schriftgröße für Mengentext von 16 (px) Pixel für eine serifenlose Schrift wie Roboto Regular (Google Fonts) angenehm zu lesen. Die gleiche Schrift in einem Worddokument entspricht etwa einem Schriftgrad von 11. Gleiches gilt für die Schriftart Open Sans Regular (Google Fonts). Wobei Open Sans deutlich luftiger ist und weiter läuft. Die Schrift Roboto dagegen ist enger aber immer noch gut lesbar. Man bekommt mehr Zeichen in eine Zeile.
Nimmt man dagegen eine Serifenschrift wie den Schrifttypus Garamond, hier die EB Garamond Regular von Google Fonts, ist eine Schriftgröße von 18 (px) Pixel nötig. In Microsoft Word übertragen, entspricht das der Systemschrift Garamond mit einem Schriftgrad von 12-13. Allerding sind die beiden Garamond-Schriftarten verschieden. Probiere es einfach aus.
Das wichtigste Kriterium für Mengentext ist seine Lesbarkeit. Dazu trägt auch die Farbe bei und der Kontrast zum Hintergrund. Schwarz auf weiß hat den größten Kontrast. Das ist vielleicht gut für ein Buch, aber auf hintergrundbeleuchteten Bildschirmen ist das nicht optimal. Ein ganz leichtes Grau für den Hintergrund und ein sehr dunkles Grau für die Schriftfarbe ist auch bei längeren Mengentexten angenehmer für die Augen.
Bei der Headline-Schrift kannst du kreativer sein. Sowohl in der Schriftart als auch in der Farbe. Das Gestaltungssystem deiner Headlines kann eine grafische Auflockerung für lange Texte sein. Trotzdem auf eine gute Lesbarkeit achten.
Serifenlose Schriften werden im Web seltener verwendet als Serifenschriften. Das liegt sicher am Charakter einer Serifenschrift. Sie ist klassischer, konservativer, Sicherheit vermittelnd und kann hochwertiger wirken. Serifenlose Schriften dagegen wirken moderner, technischer, "designiger". Es heißt oft, dass Serifenschriften besser lesbar wären. Der Grund sind die weniger geometrischen Buchstaben, die sich in den Formen besser voneinander unterscheiden. Wir glauben, dass das im Web so grundsätzlich nicht mehr zutrifft. Beim Lesen auf Bildschirmen haben wir uns schon an die vielen serifenlosen Schriften gewöhnt. Wähle die Web-Schriftart, die am besten zu dem Charakter deiner Firma oder deiner Dienstleistung passt.
Wortwahl und Satzlänge
Deine Texte muss nicht jeder verstehen, aber deine Zielgruppe unbedingt. Wendest du dich an eine spezialisierte Fachzielgruppe, kannst du mehr Fachwörter verwenden, als wenn deine Zielgruppe Privatpersonen sind. Für beide Zielgruppen gilt, schreibe einfach, kurze Sätze mit nicht mehr als einem Nebensatz. Es gibt Ausnahmen. (Auch in diesem Text). Auf den hierarchisch obersten Seiten einer Website erwartet niemand ein Fachreferat. Auf Unterseiten ist gegen lange, erkenntnisreiche Fachtexte nichts einzuwenden – wenn sie gut strukturiert sind. Ein gutes Ranking in der Suchmaschine ist die Belohnung für die Mühe.
Schreibstil
Im Internet ist der Schreibstil generell informativer, weniger blumig, wenig kreativ, nicht literarisch und sollte auch weniger werblich sein. Das liegt ganz einfach an der Suchmaschine. Menschen suchen im Internet zuallererst gezielt nach Informationen. Das bestätigt unter anderen Statista in der 2021 veröffentlichten Studie "Umfrage zur Nutzung von Suchmaschinen/Informationssuche im Internet bis 2020". Tendenz steigend. Also gib ihnen, was sie suchen. Schreibe sachlich, informativ. Das will auch die Suchmaschine sehen. Aus technisch-semantischen Gründen der SEO.
Absatz, Zwischenüberschriften, Zeilenabstand
Trenne Sinnabschnitte auch optisch voneinander mit einer Leerzeile. Je eigenständiger ein Abschnitt ist, desto eher verdient er eine eigene Zwischenüberschrift. Abschnitte mit Zwischenüberschriften helfen dem Leser, einen Text schnell zu überfliegen und eine Entscheidung zu treffen. Ist dein Text nicht gegliedert, kann der Leser in den ersten zwei Sekunden nicht beurteilen, ob sich das Lesen für ihn lohnt. Im Zweifel wir er ihn dann nicht lesen. Im Gegensatz zur H1 oder H2 Headline müssen Zwischenüberschriften nicht neugierig machen, sondern unmittelbar verdeutlichen, von was der Textabschnitt handelt.
Das Gegenteil eines ungegliederten Textblocks, nämlich das übertriebene Aneinanderreihen vieler zwei- bis drei-zeiliger Absätze, ist genauso blödsinnig. Leider oft in Blocks zu beobachten, die besonders für das Suchmaschinenranking geschrieben werden. Der Text wirkt dadurch minderwertig und nur auf das Querlesen getrimmt. Hochwertige Information sieht anders aus.
Der Zeilenabstand trägt auch zur Lesbarkeit eines Mengentextes bei. Die gesamte Typografie und damit die Lesbarkeit ist immer eine Kombination aus allen bisher beschriebenen Maßnahmen. Ein erfahrener Grafiker und manchmal auch ein Webdesigner mit Gespür für Typografie treffen die richtige Wahl. Wenn du die Typografie wirklich selbst machen willst, dann geben wir dir hier einen praxisbezogenen Tipp.
Mache Microsoft Word auf und kopiere dir einen Blindtext mit 300 Wörtern und drei Abschnitten in ein Worddokument. Den Blindtext kannst du dir z. B. hier holen: https://www.blindtextgenerator.de/ Stelle als Schrift Calibri ein oder eine andere Systemschrift. Wenn du nun auf den Punkt "Abschnitt" im Menüband klickst, öffnet sich ein Infofeld, indem du unter anderem den vor eingestellten Zeilenabstand siehst. Er steht auf "Mehrfach" und auf 1,08. Stelle 1,2 ein. Das ist ein guter Zeilenabstand für den Mengentext auf deiner Website. Nimm das Word-Dokument als Vergleichsseite und nähere dich an oder zeige es deinem Webdesigner. Die Zoomstufe ist natürlich 100 %.
Auffällig ist, dass die meisten Webseiten eher einen zu großen als einen zu kleinen Zeilenabstand haben. Das ist auch kontraproduktiv und liegt oft an schlechten Websitevorlagen. Der Zeilenabstand für eine Headline mit größerer Schrift muss anders gewählt werden. Für eine Headline in Calibri 18 Punkt über dem Mengentext mit Calibri 12 Punkt ist der Zeilenabstand von 1,2 nicht passend. Hier darf der Zeilenabstand höchstens (Mehrfach) 1,0 sein.
Wenn du mehr über das umfassende Thema Typografie wissen willst, dann lasse dich auf der Website Typolexikon inspirieren. Texte und die Suchmaschinenoptimierung ist Gegenstand eines anderen Artikels.