ᐅ Buttons in E-Mails richtig erstellen (HTML, CSS und VML)

Rund ein Viertel der Empfänger blockiert die Anzeige von Bildern in E-Mails.

Egal, wie ansprechend das Design deiner E-Mails ist, viele Leute sehen es gar nicht. Damit sind anklickbare Buttons mit deinem Call-to-Action die einzige Chance, mit deiner E-Mail Konversionen zu generieren.

Doch wenn der E-Mail-Button als Bild eingebunden ist, wird ihn niemand je zu Gesicht bekommen.

Was wäre, wenn du deine E-Mail-Kampagnen davor schützen könntest, unsichtbar zu werden? Was wäre, wenn deine Call-to-Action-Buttons in deinen E-Mails immer anklickbar sind – und zwar in jedem Mail-Client?

Lies weiter und erfahre alles darüber:

Was klickstarke Call-to-Action-Buttons ausmacht
Mit welchen vier HTML-Formate du anklickbare CTA-Buttons erstellst
Wie E-Mail-Designs mit und ohne anklickbare CTA-Buttons funktionieren
Wie du mit ActiveCampaign kinderleicht CTA-Buttons erstellen kannst

Was sind klickstarke Call-to-Action-Buttons?

Ein klickstarker E-Mail-Button ist eine Schaltfläche mit einem Call-to-Action (CTA), der in JEDEM E-Mail-Client im Postfach angezeigt wird. Und weil der Button als HTML und ohne Bilder in die E-Mail eingebunden ist, wird er auch dann angezeigt, wenn der Empfänger das Nachladen von Bildern blockiert.

Die durchschnittliche Aufmerksamkeitsspanne liegt heute bei nur acht Sekunden. Drei davon braucht es, um zu entscheiden, ob deine E-Mail gelöscht oder gelesen wird. Selbst dann, wenn alle grafischen Elemente angezeigt werden.

Du investierst viel Zeit in deine E-Mails. Und damit deine Kampagnen erfolgreich werden, befolgst du alle Best Practices für das E-Mail-Marketing und achtest auf:

Attraktive Betreffzeilen
Interessante E-Mail-Preheader
Wie du gute Texte schreibst
Welche E-Mail-Arten Kunden erhalten
Wie du deine E-Mail-Liste ausbaust

Aber wenn du am Ende deine Call-to-Action-Buttons als Bilder in deine E-Mail einbindest, war die ganze Mühe umsonst … und du lässt wertvolles Potenzial für Konversionen ungenutzt liegen.

Lass den Inhalt deiner E-Mails nicht verschwinden.

Früher blockierten E-Mail-Clients standardmäßig das Anzeigen von Bildern, damit Spammer keine Malware auf deinen Computer schleusen konnten.

GMail änderte das 2013 und ließ alle Bilder über Googles eigene sichere Server laufen. Von nun an musste man nicht mehr auf Bilder unten anzeigen klicken, um die eingebetteten Bilder zu sehen.

Eine großartige Nachricht für alle, die mit Hyperlinks und Produktbildern Aufmerksamkeit erregen wollten: Mit nur einem Klick auf die Betreffzeile wurde jetzt gleich die ganze Nachricht geladen.

Doch nur ein Jahr später zeigten Statistiken, dass 43 % der Gmail-User ihre Einstellungen geändert haben, um das automatische Laden von Bildern wieder zu deaktivieren.

Bis heute werden in vielen anderen E-Mail-Programmen, wie Outlook, Bilder überhaupt nicht automatisch angezeigt.

Es gibt viele Gründe, warum Empfänger nicht wollen, dass Grafiken und Bilder standardmäßig angezeigt werden, die wichtigsten sind:

Bequemlichkeit. Wenn es ewig dauert, bis eine E-Mail vollständig aufgebaut wird, weil die Datenverbindung schwach oder instabil ist, kann es passieren, dass die Anzeige von Bildern deaktiviert wird (oder Bilder gar nicht erst angezeigt werden).
Barrierefreiheit. Ein Screenreader, der den geschriebenen Inhalt einer Seite vorliest, kann den Text in einem GIF oder JPEG nicht erkennen. Dadurch haben Menschen mit Sehschwäche nur eingeschränkten Zugang zum Content deiner E-Mail.
Datenschutz. Eine einfache Google-Suche führt zu zahlreichen Artikeln, in denen empfohlen wird, den automatischen Download von Bildern zu deaktivieren. So soll verhindert werden, dass personenbezogene Daten nachverfolgt werden können.

Zum Glück gibt es aber genug Softwarelösungen für E-Mails, mit denen du klickbare Buttons erstellen kannst, die immer und überall angezeigt werden. Aber was, wenn du E-Mail-Buttons mit Hilfe von Code erstellen musst?

4 Wege zu garantiert klickbaren E-Mail-Buttons

Hier sind vier Codierungsstile, die du verwenden kannst, um deine eigenen E-Mail-Buttons zu erstellen, die garantiert klickbar sind:

VML-Code
Padding (Zwischenraum)
Border (Umrandung)
Padding plus Border

1. VML (Vector Markup Language)

VML ist eine weit verbreitete Methode, um E-Mail-Schaltflächen zu gestalten, die immer klickbar sind. Wenn du mit dieser Programmiersprache nicht vertraut bist, wird es zwar etwas knifflig. Aber zum Glück gibt es Tools wie buttons.cm, die den richtigen VLM-Code für deinen Button erzeugen.

Das ist ein Button!

Pro: Der ganze Button ist klickbar.

Contra: Du musst eine schwierige Programmiersprache verwenden.

<!–VML button–>

<tr>

<td>

<div>

<!–[if mso]>

<v:roundrect xmlns_v=”urn:schemas-microsoft-com:vml” xmlns_w=”urn:schemas-microsoft-com:office:word” href=”https://www.activecampaign.com” style=”height:40px;v-text-anchor:middle;width:130px;” arcsize=”5%” strokecolor=”#19cca3″ fillcolor=”#19cca3;width: 130;”>

<w:anchorlock/>

<center style=”color:#ffffff;font-family:Helvetica, sans-serif;font-size:18px; font-weight: 600;”>Hier klicken!</center>

</v:roundrect>

<![endif]–>

<a href=”https://www.activecampaign.com” style=”display: inline-block; mso-hide:all; background-color: #19cca3; color: #FFFFFF; border:1px solid #19cca3; border-radius: 6px; line-height: 220%; width: 200px; font-family: Helvetica, sans-serif; font-size:18px; font-weight:600; text-align: center; text-decoration: none; -webkit-text-size-adjust:none; ” target=”_blank”>Hier klicken!</a>

</a>

</div>

</td>

</tr>

</table>

2. Buttons mit Padding

Unter Padding versteht man den Zwischenraum zwischen dem Inhalt und dem Rand eines Elements. Für die E-Mail-Schaltfläche wird eine Zelle als HTML-Tabelle formatiert, die dann mit HTML-Attributen und CSS gestaltet wird.

Das ist ein Button!

Pro: HTML vereinfacht die Programmierung und Pflege der Formatierung.

Contra: Nur die Schrift im Inneren des Buttons ist klickbar, was verwirrend sein kann.

<!–Padded button–>

<tr>

Hier klicken!

</a>

</td>

</tr>

</table>

3. Buttons mit Umrandung

Ein klickbarer E-Mail-Button mit Umrandung (Border) ähnelt in seiner Struktur klickbaren Buttons mit Padding: Beide werden mit HTML und CSS erstellt und gestaltet. Aber statt einer Tabellenzelle erhält der Link eine breite Umrandung.

Das ist ein Button!

Pro: Vereinfachter Code und hohe Skalierbarkeit

Nachteil: Outlook mag diese Schaltflächen nicht, denn < a > Tags werden nicht als Block-Level-Elemente erkannt, sodass die Buttons kleiner dargestellt werden.

<!–Border based button–>

<tr>

Hier klicken!

</a>

</td>

</tr>

</table>

4. Buttons mit Padding plus Border

E-Mail-Buttons, die immer klickbar sind, lassen sich auch durch eine Kombination von Padding und einem breiten Rand erzeugen. Das Ganze wird dann mit einer kontrastreichen Hintergrundfarbe noch optisch hervorgehoben.

Das ist ein Button!

Pro: Einfach zu pflegen, Hintergrundbilder werden unterstützt.

Contra: Die Formatierung ist im < a > und < tr > Tag eingebunden, daher müssen beide Tags angepasst werden, wenn sich die Formatierung ändert.

<!–Padding and border combo button–>

<tr>

Hier klicken!

</a>

</td>

</tr>

</table>

Schlecht, besser, optimal: 3 Beispiele für klickbare Buttons in der Praxis

Hier sind drei Beispiele dafür, wie klickbare Buttons, die immer angezeigt werden, die Nutzererfahrung deiner Empfänger beeinflussen – zum Guten oder zum Schlechten.

1. Ganz schlecht

Ohne Bilder: Genau deswegen ist es schlecht, wenn du dich nur auf Bilder verlässt, wenn es darum geht, dein Publikum zu erreichen. Offensichtlich wird hier niemand alles stehen und liegen lassen, weil: Siehst du hier irgendwo ein geniales neues Produkt?!

Darum funktioniert diese E-Mail nicht, wenn der Empfänger das Anzeigen von Bildern blockiert:

Kein klickbarer E-Mail-Button: Ohne etwas zum Anklicken gibt es keine hohe Klickrate. Logisch, nicht?
Kein Text: Das Bild enthält den Werbetext und den Call-to-Action, sodass mindestens ein Drittel der Empfänger ihn nicht lesen kann.
Keine Alt-Tags: Es fehlen Alt-Tags, die verraten, was auf dem Bild zu sehen ist. Daher bleibt unklar, warum sich ein Download überhaupt lohnen sollte. Eine so leere E-Mail kann einfach kein Interesse an dem Produkt wecken, für das sie eigentlich werben soll.

2. Schon besser

Ohne Bilder: Dieses Design ist schon durchdachter: Du kannst zwar nicht sehen, was für ein Poster hier genau beworben wird. Trotzdem schafft es der Text ganz leicht, so viel Interesse zu wecken, dass man Lust bekommt, auf den Button zu klicken und die Landing Page zu besuchen.

Darum funktioniert diese E-Mail gut – trotz der blockierten Anzeige von Bildern:

Eine klare Produktbeschreibung. Der Text beschreibt das Produkt so ausführlich, dass keine Informationen verloren gehen, auch wenn keine Bilder in der E-Mail angezeigt werden.
Klickbarer Button: Der CTA-Button wird nicht nur garantiert immer angezeigt, er überzeugt auch mit einem tollen Button-Text.

3. Optimal gelöst

Ohne Bilder: Ein perfektes Beispiel für einen Newsletter, dem zwar die Bilder fehlen, dessen Design aber trotzdem stimmig ist. Der Text ist so aufgebaut, dass er einfach funktioniert, und der CTA-Button tut das, was man von ihm erwartet: zur Handlung auffordern.

Darum funktioniert diese E-Mail auch ohne Bilder so gut:

Responsives Design: Die Buttons in dieser E-Mail sind immer klickbar, wie es sich gehört. Der responsiver Hintergrund sorgt dafür, dass man gar nicht merkt, dass die Bilder fehlen.
Gut getexteter Inhalt: Der Text ist so gestaltet, dass er auch ohne Bilder gut lesbar (und ansprechend) ist. Und ein Newsletter ist immer eine gute Gelegenheit, um dein Publikum anzusprechen.

ActiveCampaign erstellt automatisch klickstarke Buttons

ActiveCampaign erstellt automatisch anklickbare Buttons für deine E-Mail-Kampagnen. Mit unserem Design-Editor erstellst du CTA-Buttons für dynamische E-Mails, die genauso im Posteingang erscheinen, wie du sie gestaltet hast – bei jedem deiner Empfänger.

E-Mails, bei denen die Anzeige von Bildern blockiert ist, kosten dich Leads, Abonnenten und Umsatz. Die Lösung dafür ist ganz einfach.

Bilder sorgen für das Engagement. Aber nicht für die Information. Mit E-Mail-Buttons ohne Bild und einer durchdachten Gestaltung der Texte erreichst du alle auf deiner Liste mit genau den Informationen, die du ihnen geben willst.

E-Mails haben eine Funktion: Über den CTA-Button Leads zu konvertieren. Diese Kampagne von ActiveCampaign schafft das auch ohne Bilder oder Grafiken.

Gehen Sie zu einem Abschnitt

Was sind klickstarke Call-to-Action-Buttons?

4 Wege zu garantiert klickbaren E-Mail-Buttons

1. VML (Vector Markup Language)

2. Buttons mit Padding

3. Buttons mit Umrandung

4. Buttons mit Padding plus Border

Schlecht, besser, optimal: 3 Beispiele für klickbare Buttons in der Praxis

1. Ganz schlecht

2. Schon besser

3. Optimal gelöst

ActiveCampaign erstellt automatisch klickstarke Buttons

Verwandte Beiträge

Jetzt kostenlos testen