So erstellen Sie wunderschöne kugelsichere E-Mail-Buttons, die absolut funktionieren

Veröffentlicht: 2021-06-11

Wenn Ihre Webseite Ihr Geschäft und Ihre E-Mail Ihr Schaufenster ist, dann ist Ihre Call-to-Action (CTA)-Schaltfläche Ihre erstaunliche Schaufensterauslage, die die Leute anzieht. Oder so. Da mag meine Metapher auseinander gefallen sein.

Unnötig zu erwähnen, dass Ihr CTA einer der wichtigsten Bestandteile Ihrer E-Mail ist. Und wenn es schwer zu finden, schwer zu verwenden oder in irgendeiner Weise kaputt ist, werden Ihre Abonnenten weglaufen. (Weglaufen!)

Aber keine Sorge. Wir sind hier, um sicherzustellen, dass Ihr CTA-Button kein blutrünstiges Kaninchen ist, das Ihre Abonnenten vertreibt. In diesem Blogbeitrag werden wir etwas tiefer in die Methoden zur Herstellung von Schaltflächen eintauchen, um sicherzustellen, dass sie für Ihre Abonnenten kugelsicher sind.

Machen Sie sich bereit zu lernen:

Was ist ein kugelsicherer Knopf?
Best Practices für das Schaltflächendesign
5 Codierungstechniken
- Schaltfläche zum bedingten Auffüllen
- VML-Schaltfläche
- Polstertaste
- Randtaste
- Polster + Randtaste
Erweiterte Verbesserungen
E-Mail-Client-Support

Was ist ein kugelsicherer Knopf?

Kugelsichere Schaltflächen sind Call-to-Action-Schaltflächen, die mit Code anstelle von Bildern erstellt wurden. Sie können Ihre GIFs, PNGs und JPEGs zuverlässig gegen HTML und CSS austauschen. Wenn Sie nur Code verwenden, wird die Schaltfläche in allen E-Mail-Clients angezeigt, auch wenn Bilder deaktiviert sind, wodurch sie „kugelsicher“ werden.

Darüber hinaus können Sie den Inhalt und den Stil Ihrer Schaltflächen aktualisieren, indem Sie einfach Ihre HTML-Vorlage bearbeiten. Sie müssen keine Zeit mehr damit verschwenden, Schaltflächen in einem Designtool wie Photoshop zu erstellen, sie auf einen Server hochzuladen und Ihren HTML-Code zu aktualisieren.

Keine Bilder verwenden

Ich werde das einmal sagen und dann nie wieder sagen. Die einzige wirklich kugelsichere Schaltfläche ist ein Bild.

*keuchen*

Ich kenne. Aber nur so können Sie garantieren, dass Ihr Button in 100 % der E-Mail-Clients genau gleich aussieht. Weil wir alle wissen, wie inkonsistent unsere E-Mails über verschiedene E-Mail-Clients, Apps und Geräte hinweg aussehen können.

Trotzdem sollten Sie niemals einen bildbasierten Button verwenden. Bildschaltflächen gehen verloren, wenn Bilder aufgrund von Bildblockierung deaktiviert werden, und sind für Ihre Abonnenten, die Screenreader verwenden, nicht zugänglich (mehr dazu gleich).

Bild-E-Mail-Schaltfläche mit Bildern an vs. aus — *Die Bildschaltfläche verliert ihre Wirkung, wenn Bilder deaktiviert sind*

Wenn Ihre CTAs in Bildern enthalten sind, besteht eine gute Chance, dass Abonnenten Ihre Nachricht verpassen. Schlimmer noch, sie interagieren nicht mit Ihren Kampagnen.

Die Verwendung von bildbasierten CTA-Buttons wirkt sich auch auf die Zugänglichkeit Ihrer E-Mails aus. Wenn Sie den Kontext des CTA in einem Bild verbergen, können Bildschirmleseprogramme diese möglicherweise nicht lesen, sodass Ihre E-Mail für sehbehinderte Abonnenten nicht zugänglich ist.

Jetzt, da Sie mehr über Bildschaltflächen wissen, sollten Sie feststellen, dass meine ursprüngliche Aussage nur größtenteils richtig ist. Bildbasierte Schaltflächen sehen in jedem E-Mail-Client gleich aus, in dem Bilder aktiviert sind, und nur, wenn der Abonnent keinen Screenreader verwendet . Sind sie also wirklich kugelsicher? Nein, sind sie nicht. Und da diese beiden oben genannten Fälle mit dem Standard-E-Mail-Tracking nicht nachverfolgt werden können, können Sie nicht wissen, wie viel Prozent Ihrer Abonnenten diese schlechte Erfahrung machen.

Vergessen Sie also den Bild-CTA und stellen Sie sicher, dass Ihre Abonnenten Ihre CTAs sehen und verwenden können, unabhängig davon, welches Gerät sie verwenden.

Das Zeug zu einem schönen Knopfdesign

Schaltflächen sind jedoch mehr als nur Code. Es gibt mehrere Faktoren, die dazu beitragen, dass Ihre Schaltflächen nutzbar und auffällig sind.

Knopfform

Lassen Sie Ihre Knöpfe wie Knöpfe aussehen.

Wir alle mögen es, lustige und einzigartige Schaltflächen zu erstellen, aber wenn Sie zu weit von den Erwartungen abweichen, verpassen Abonnenten die Absicht und ergreifen keine Maßnahmen. Ja, die Worte sagen vielleicht, dass etwas anklickbar ist, aber wie sie sagen: „Ein Bild sagt mehr als tausend Worte“.

Beispiele für Standard-Button-Formen

Verwenden Sie Standard-Schaltflächenformen, um sicherzustellen, dass Sie die Aufmerksamkeit der Leute auf sich ziehen, insbesondere wenn sie scannen. Standardformen sind:

Abgerundete Ecken
Quadratische Ecken
Pillenform
Geistertaste
Schattierter Knopf

Das heißt nicht, dass man mit Knöpfen keine lustigen Dinge machen kann. Magic Spoon hat seinen Buttons einige lustige animierte GIFs hinzugefügt, um noch mehr Aufmerksamkeit auf sie zu lenken.

Zauberlöffel-E-Mail-Beispiel für Schaltflächen mit animierten GIFs

Knopfgröße

Da über 40 % der Abonnenten E-Mails auf Mobilgeräten öffnen, ist es laut unseren jährlichen Marktanteilsdaten für E-Mail-Clients wichtig, dass Ihre Schaltfläche so gestaltet ist, dass sie auf allen Geräten funktioniert.

Wenn Ihre Schaltfläche zu klein ist, ist es auf mobilen Geräten schwierig, darauf zu klicken. Wenn es zu groß ist, sieht es weniger aus wie ein Knopf, sondern eher wie ein Designelement.

Es gab mehrere Studien zu Tastengrößen auf Touchscreens, aber die Forschung scheint am häufigsten mit Millimetern als Hauptmaßeinheit durchgeführt zu werden. Was weniger als ideal ist. Aber einige haben ein anständiges Millimeter-zu-Pixel-Verhältnis erreicht.

Die ideale Größe für Schaltflächen zum einfachen Klicken auf Mobilgeräten wurde auf zwischen 42 Pixel und 72 Pixel (ca. 11-19 mm) umgerechnet. Dies scheint ungefähr durchschnittlich für die Schaltflächenhöhe im Web zu sein, und die Schaltflächen, die wir hier bei Litmus verwenden, fallen ebenfalls in diesen Bereich.

In einer Studie, die bis zu 30 mm reichte, verharrte die Tap-to-Click-Genauigkeit bei 20 mm, sodass es einen Punkt gibt, an dem die Tastengröße keinen so großen Unterschied mehr macht.

Tastenraum

Stellen Sie sicher, dass auch um Ihre Schaltflächen genügend Leerraum vorhanden ist, damit sie hervorstechen. Dies erleichtert es Ihren Abonnenten auch, auf den richtigen Button zu klicken.

Das beste Beispiel hierfür wäre eine E-Mail mit vielen Links in einem Absatz. Wenn Sie Ihre Links dicht beieinander bündeln, werden Ihre Abonnenten nie genau auf das klicken, worauf sie klicken sollen, insbesondere auf Mobilgeräten.

Visuelles Feedback

Nicht jeder E-Mail-Client unterstützt interaktive Elemente, aber wenn möglich, hilft ein wenig Interaktivität für visuelles Feedback den Abonnenten zu wissen, dass ihre Interaktion registriert wurde.

Es ist ein zusätzliches Zeichen für sie, dass etwas anklickbar ist.

Dies kann so einfach wie ein Farbwechsel oder so komplex sein, wie Sie möchten. (Wir wissen, dass es manchmal Spaß macht, alles zu geben, also halten Sie sich nicht zurück – aber wissen Sie, wann Sie sich zügeln müssen.)

Unser eigener Standardknopf hat einen Farbwechsel sowie einen Druckknopfeffekt.

E-Mail-Beispiel für einen Push-Button-Effekt

Aber wir haben auch etwas Neues ausprobiert und hatten viel Spaß mit unseren Januar-Newsletter-Buttons. Ein tolles Gestaltungselement, das auch noch Spaß gemacht hat zu „schieben“.

Lackmus-E-Mail-Beispiel für visuelles Feedback zu einer Schaltfläche

Schaltflächentext

Halten Sie Ihre tatsächliche CTA-Kopie oder Ihr Etikett umsetzbar und auf den Punkt. Sagen Sie Ihren Abonnenten so klar und prägnant wie möglich, was sie tun sollen.

1 bis 5 Wörter reichen normalerweise aus.

Diese Länge hält auch Ihre E-Mails scanbar. Und wenn Sie noch mehr zu sagen haben? Fügen Sie es in eine Überschrift über der Schaltfläche ein. Indem Sie CTAs regelmäßig innerhalb von 1 bis 5 Wörtern halten, wird der seltene Moment, in dem Sie sie durchgehen, auf eine viel aussagekräftigere Weise hervorgehoben.

5 Möglichkeiten, eine kugelsichere Schaltfläche zu codieren

Ist es bei über 300.000 potenziellen E-Mail-Renderings wirklich überraschend, dass Sie keine einheitliche Schaltfläche erstellen können, die überall funktioniert?

Was Sie tun können, ist eine Schaltfläche zu erstellen, die fast überall funktioniert. Und es gibt verschiedene Methoden zum Erstellen dieser Schaltflächen, je nach Ihren Anforderungen. Sehen Sie sich diese an, um herauszufinden, welche für Ihre Abonnenten am besten geeignet ist.

1. Schaltfläche zum bedingten Auffüllen

Vielen Dank an Mark Robbins für diese Schaltfläche zum bedingten Auffüllen. Es ist diejenige, die wir hier bei Litmus verwenden.

bedingte Schaltfläche

Diese Schaltfläche verwendet Stile für den Link, um ihn für alle außer Outlook zu gestalten. Dann verwendet es bedingten Code, um Outlook-spezifische Auffüllung hinzuzufügen. Da das Outlook-Padding separat gesteuert wird, können Sie das Outlook-Padding bearbeiten, ohne das Aussehen der Schaltfläche in anderen E-Mail-Clients zu beeinträchtigen.

<a href="https://www.litmus.com/" style="background-color: #1F7F4C; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 20px; color: #ffffff; border-radius: 5px; display: inline-block; mso-padding-alt: 0;">
	<!--[if mso]>
	<i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i>
	<![endif]-->
	<span style="mso-text-raise: 15pt;">I am a button &rarr;</span>
	<!--[if mso]>
	<i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i>
	<![endif]-->
</a>

E-Mail-Posteingang mit glücklichem Gesicht und Häkchen

Hat es funktioniert?

Gebrochen sieht nicht gut aus. Testen Sie mit Litmus Email Previews, wie Ihre Schaltflächen in über 90 E-Mail-Clients, Apps und Geräten aussehen. Und stellen Sie sicher, dass Sie markengerechte, fehlerfreie E-Mails erstellen – jedes Mal.

Mehr erfahren →

Vor- und Nachteile einer Schaltfläche mit bedingtem Auffüllen

Vorteile:

Die meisten E-Mail-Clients bieten großartige Unterstützung (siehe Tabelle unten).
Die gesamte Schaltfläche selbst ist anklickbar.

Nachteile:

Es erfordert ein Herumspielen mit dem bedingten Code, um die Auffüllung in Outlook genau richtig zu machen.
Die Outlook-Version hat auf jeden Fall eckige Ecken.

2. VML-basierte Schaltflächen

Der traditionelle Ansatz für kugelsichere Schaltflächen wurde von Stig, einem Entwickler bei Campaign Monitor, populär gemacht.

vmlbutton

Dieser Ansatz verwendet das Styling des Links selbst, um die Schaltfläche für die meisten E-Mail-Clients zu strukturieren und zu gestalten. Die Struktur wird über die Eigenschaften line-height und width bereitgestellt.

Als Fallback für Microsoft Outlook wird Vector Markup Language (VML) innerhalb eines Outlook-spezifischen bedingten Kommentars verwendet. Die VML erstellt einen Rahmen um den Link in Outlook und formatiert dann das Anker-Tag, um das Schaltflächendesign für alle anderen zu erstellen.

<div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:50px;v-text-anchor:middle;width:170px;" arcsize="10%" stroke="f" fillcolor="#1F7F4C">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://litmus.com" style="background-color:#1F7F4C;border-radius:5px;color:#ffffff;display:inline-block;font-size: 18px; font-family: Helvetica, Arial, sans-serif;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;">I am a button &rarr;</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>

Für komplexere Versionen dieser Schaltfläche würden Sie eigentlich zwei Versionen der Schaltfläche erstellen – eine in VML und eine für alle anderen.

Vor- und Nachteile einer VML-basierten Schaltfläche

Vorteile:

Die meisten E-Mail-Clients bieten großartige Unterstützung (siehe Tabelle unten).
Die gesamte Schaltfläche selbst ist anklickbar.
Abgerundete Ecken werden in Outlook beibehalten.

Nachteile:

Es basiert auf der Verwendung einer unbekannten Sprache – VML –, die proprietär für die Microsoft Office-Suite ist, was das Erstellen neuer kugelsicherer Schaltflächen und das Aktualisieren vorhandener Schaltflächen zeitaufwändig und frustrierend macht.
Breite und Höhe der kugelsicheren Schaltfläche müssen angegeben werden, sodass jede Änderung der Kopie des CTA Änderungen der Abmessungen der Schaltfläche erfordern würde.
Komplexere Versionen der VML-Schaltfläche erfordern zwei URLs, die geändert werden müssen. Und einige ESPs verfolgen die URL im VML-Abschnitt nicht.
VML erfordert eine feste Höhe und Breite, daher funktioniert diese Schaltfläche nicht sehr gut für Vorlagen, bei denen die Länge der Kopie im CTA variieren kann.

Wenn Sie die Vor- und Nachteile von VML nicht kennenlernen möchten (und ehrlich gesagt, wer tut das schon?), bietet Campaign Monitor ein kostenloses Online-Tool zum Erstellen traditioneller kugelsicherer Schaltflächen. Buttons.cm macht es einfach, neue CTA-Buttons zu erstellen, die gut aussehen und in den meisten E-Mail-Clients gut funktionieren.

Dies war mein Lieblingsstil zum Codieren von Schaltflächen, als ich an pharmazeutischen E-Mails arbeitete. Das größte Plus ist die Möglichkeit, die abgerundeten Ecken in Outlook beizubehalten, die für diese stark regulierte Branche erforderlich waren.

3. Aufpolsterungsbasierte Tasten

Polsterknopf

Diese Methode verwendet eine einfache HTML-Tabelle für die Schaltfläche. Es basiert auf dem Auffüllen auf Tabellenzellenebene, um die Schaltfläche zu strukturieren, sowie auf HTML-Attributen und CSS, um die Schaltfläche zu gestalten.

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="padding: 12px 18px 12px 18px; border-radius:5px; background-color: #1F7F4C;" align="center">
            <a href="http://litmus.com" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; color: #ffffff; text-decoration: none; display: inline-block;">I am a button &rarr;</a>
        </td>
    </tr>
</table>

Vor- und Nachteile einer aufpolsterungsbasierten Schaltfläche

Vorteile:

Es funktioniert gut bei den meisten E-Mail-Clients (siehe Tabelle unten).
Es verwendet Code, mit dem E-Mail-Designer vertraut sind – HTML und CSS – was das Erstellen neuer kugelsicherer Schaltflächen und das Aktualisieren vorhandener Schaltflächen zum Kinderspiel macht.

Nachteile:

Die gesamte Schaltfläche ist nicht anklickbar, was zu Reibungen mit Abonnenten führen kann, die glauben, auf eine Schaltfläche geklickt oder getippt zu haben.
Outlook unterstützt keine abgerundeten Ecken.

4. Randbasierte Schaltflächen

Randtaste

Rahmenbasierte Schaltflächen verfolgen einen ähnlichen Ansatz wie die vorherige Methode. Mithilfe von einfachem HTML und CSS können Sie Ihre Calls-to-Action strukturieren und gestalten. Anstatt sich jedoch für die Struktur auf das Auffüllen auf Tabellenzellenebene zu verlassen, fügen Sie dem Link selbst dicke Rahmen hinzu, um Ihren CTA zu erstellen.

<a href="http://litmus.com" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-weight: bold; text-decoration: none; border-radius: 5px; background-color: #1F7F4C; border-top: 12px solid #1F7F4C; border-bottom: 12px solid #1F7F4C; border-right: 18px solid #1F7F4C; border-left: 18px solid #1F7F4C; display: inline-block;">I am a button &rarr;</a>

Beachten Sie, dass das Link-Tag als Element auf Blockebene festgelegt ist und dass Rahmen verwendet werden, um unser "Padding" bereitzustellen. Dadurch wird sichergestellt, dass die gesamte Schaltfläche schwebend und anklickbar ist, auch in älteren Desktop-Clients.

Vor- und Nachteile einer randbasierten Schaltfläche

Vorteile:

Das gesamte Styling befindet sich auf dem eigentlichen Link-Tag, was den Code vereinfacht.
Es wird nur eine Taste verwendet. Keine doppelten Schaltflächen oder verwirrender VML-Code erforderlich.
Sie benötigen keine spezifischen Höhen- oder Breitendefinitionen, wodurch Schaltflächen hochgradig skalierbar sind.

Nachteile:

Outlook reduziert die Größe der Rahmen um einen kleinen Betrag.
Outlook erkennt <a>-Tags nicht als Elemente auf Blockebene.
Outlook unterstützt keine abgerundeten Ecken.
Es gibt keine Möglichkeit, erweitertes Styling wie zusätzliche Rahmen für das genaue Linkelement hinzuzufügen.

5. Schaltflächen auf Padding-und-Rand-Basis

Die auf Auffüllen und Rahmen basierenden Schaltflächen kombinieren Elemente der beiden vorherigen Ansätze.

E-Mail-Schaltfläche für Polster und Rahmen

Im Wesentlichen verwendet dieser Ansatz die gleiche Struktur zum Gestalten des Links mit Padding und mindestens einem festen 1px-Rahmen. Dann wird dem <td> eine Hintergrundfarbe zugewiesen, um den gesamten Hintergrund des Links auszufüllen. Die Hintergrundfarbe muss in diesem Fall auf <td> anstelle von <a> angewendet werden, da Outlook horizontale Auffüllungen auf dem <a>-Tag nicht erkennt (da es solche Formatierungen für HTML nicht auf Blockebene unterstützt). Elemente).

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" style="border-radius: 5px; background-color: #1F7F4C;">
            <a href="https://litmus.com" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-weight: bold; text-decoration: none;border-radius: 5px; padding: 12px 18px; border: 1px solid #1F7F4C; display: inline-block;">I am a button &rarr;</a>
        </td>
    </tr>
</table>

Vor- und Nachteile eines Padding-and-Border-Buttons

Vorteile:

Es muss nur eine Schaltfläche codiert werden, wodurch Schaltflächen mit dieser Technik leicht aktualisiert werden können.
Spezielle Abmessungen für die Tasten sind nicht erforderlich.
Mit dieser Methode können Hintergrundbilder unterstützt werden.

Nachteile:

Der Stil wird zwischen <td> und <a> getrennt, daher müssen beide aktualisiert werden, wenn sich der Stil für die Schaltfläche ändert.
Outlook unterstützt keine abgerundeten Ecken.

Was ist mit semantischem HTML?

Wir verwenden gerne semantisches HTML, aber leider wird das <button>-Tag in E-Mails nicht unterstützt. Es ist in den meisten E-Mail-Clients auf ein <div> reduziert, das entweder nicht anklickbar ist oder nicht korrekt gerendert wird.

Das Verschachteln von Divs oder Tabellen in Ihren Anker-Tags ist möglich. Aber es ist semantisch nicht korrekt. Außerdem führen beide Methoden zu Schaltflächen, die in Outlook nicht funktionieren. Bei Tabellen ist der Link nicht anklickbar und bei divs… nun, sehen Sie selbst:

Div-Taste	Div-Schaltfläche in Outlook

Erweiterte Hacks und Verbesserungen

Alle oben genannten Methoden sind gute Ausgangspunkte für die Erstellung von kugelsicheren Schaltflächen, aber jede Technik kann weiter modifiziert werden, um bessere kugelsichere Schaltflächen zu erstellen.

Horizontaler Padding-Hack für Outlook

Outlook unterstützt kein horizontales Auffüllen, was dazu führen kann, dass Ihr CTA-Text sehr nahe am linken und rechten Rand Ihrer kugelsicheren Schaltfläche liegt.

Ein schneller Hack, der verwendet werden kann, um das horizontale „Padding“ für Outlook zu erhöhen, besteht darin, bedingt inline, geschützte Leerzeichen auf jeder Seite des Links hinzuzufügen. Die Schaltfläche für bedingtes Auffüllen nutzt dies bereits zusammen mit der Eigenschaft letter-spacing, um Platz an den Seiten der Schaltfläche hinzuzufügen.

<!--[if mso]>&nbsp;<![endif]-->

Progressive Erweiterung mit Media Queries

Um das Design Ihrer kugelsicheren Schaltfläche zu verbessern, können Sie erweiterte Stile wie Rahmen, Farbverläufe, Webfonts, Hover-Effekte und mehr mit Medienabfragen verwenden.

Standard-E-Mail-Schaltfläche im Vergleich zu schrittweise verbesserter Schaltfläche

Outlook-Verbesserungen mit VML

Wenn Sie Ihre Schaltflächen wirklich zum Glänzen bringen möchten, können Sie in VML eintauchen, um Ihren Schaltflächen ein wenig Schwung zu verleihen.

So frustrierend VML auch sein mag, es ermöglicht Ihnen, einige sehr lustige Schaltflächen mit Hintergrundbildern und Farbverläufen sowie Schatten zu erstellen. Es gibt definitiv ein gewisses Maß an Versuch und Irrtum, aber die Ergebnisse können atemberaubend sein.

Schauen Sie sich unseren Button in unserem Januar-Newsletter an, um ein Beispiel zu sehen:

E-Mail-Beispiel mit lustiger VML-Schaltfläche — *Verwenden von VML zum Hinzufügen eines Schaltflächenschattens in Outlook, der dem Schlagschatten in anderen E-Mail-Clients entspricht*

Wie sieht der E-Mail-Client-Support aus?

E-Mail-Clients haben ihren Support seit dem ersten Verfassen dieses Beitrags im Jahr 2017 aktualisiert, sodass diese Schaltflächen nahezu kugelsicher sind. Am wenigsten Support gibt es erwartungsgemäß in Outlook, aber auch dort sind die Buttons nicht sehr kaputt.

Sie können die vollständigen Lackmus-Tests hier einsehen.

E-Mail-Client	Bedingt	VML	Polsterung	Grenze	Polsterung + Rand
Apple-Mail
Lotus Notes	✘	✘
IBM Notes 10	✘	✘
Ausblick 2007-2016	*		*	*†	*
Outlook für Mac
Office365 (Desktop)	*		*	*†	*
Google Mail
AOL
Yahoo
Outlook 365 (Webmail)
Outlook.com
Mail.ru
GMX.de	*		*	*	*
T-Online.de	Ich
Web.de	*		*	*	*
Gmail-App (Android)
Gmail-App (iOS)
iPhone/iPad
Samsung Mail
Outlook (Android)
Outlook (iOS)
Dunkler Modus
Apple-Mail
Gmail-App
iPhone/iPad
Büro 365 (Desktop)		✘
Outlook.com

* Abgerundete Ecken werden nicht gerendert. † Schaltflächengröße ist verzerrt.

Unterstützung und Hacks für den Dark Mode

Der Dark Mode bringt eine interessante Wendung bei kugelsicheren Tasten. Wie bei den meisten HTML- und CSS-Elementen können Sie die Stile des dunklen Modus für Schaltflächen mit Medienabfragen steuern.

Gmail und Outlook.com können jedoch die Schaltflächenfarben invertieren.

Wenn Sie die Hintergrundfarben Ihrer Schaltflächen beibehalten möchten, gibt es einige Hacks. Achten Sie jedoch darauf, dass die Farbe der Kopie auf den Schaltflächen invertiert wird. Es gibt keine Möglichkeit, zu verhindern, dass Ihre Schriftfarben in Outlook wechseln, aber Sie können weißen Text auf Ihren Schaltflächen mit Remi Parmentiers CSS-Blending-Workaround weiß halten.

Der größte Mangel an Unterstützung bei diesen kugelsicheren Schaltflächenoptionen sind die VML-Schaltflächen.

Im dunklen Modus invertiert Office 365 Ihre Hintergrundfarben, aber nicht die Füllfarbe in der VML. Am Ende erhalten Sie Schaltflächen, die wie folgt aussehen:

VML-Taste im Dunkelmodus

Dafür gibt es eine Lösung: Stellen Sie sicher, dass Sie den RGBA-Wert für die Hintergrundfarbe des <a>-Tags für Ihre Schaltfläche verwenden, etwa so:

<div>
    <!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:50px;v-text-anchor:middle;width:170px;" arcsize="10%" stroke="f" fillcolor="#1F7F4C">
        <w:anchorlock/>
        <center>
    <![endif]-->
    <a href="http://litmus.com" style="background-color:rgba(31, 127, 76,1);border-radius:5px;color:#ffffff;display:inline-block;font-size: 18px; font-family: Helvetica, Arial, sans-serif;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;">I am a button &rarr;</a>
    <!--[if mso]>
        </center>
        </v:roundrect>
    <![endif]-->
</div>

Am Ende hast du also eine Schaltfläche, die stattdessen so aussieht (viel besser, oder?):

VML-E-Mail-Schaltfläche mit Dark Mode Fix

Der RGBA-Wert als Hintergrundfarbe wird in Outlook nicht unterstützt, daher fällt er auf die VML-Farbe zurück. Danke an Wilbert Heinen für diesen Fix! Da wir die Schriftfarbe im dunklen Modus in Outlook nicht steuern können, stellen Sie bei Verwendung dieser Schaltfläche sicher, dass Ihre Farbauswahl auch die Zugänglichkeit berücksichtigt, wenn Ihre Schriftfarbe umgekehrt wird. (Das von uns verwendete Beispiel ist ein gutes Beispiel dafür, welche Farben nicht verwendet werden sollten.)

Sind Ihre Kampagnen kugelsicher?

Unabhängig davon, welchen Ansatz Sie wählen, ist die Verwendung von kugelsicheren Schaltflächen für Calls-to-Action dem Vertrauen auf Bilder bei weitem überlegen. Selbst in E-Mail-Clients, die Bilder blockieren, stellen kugelsichere Schaltflächen sicher, dass Ihre Botschaft für Ihr Publikum klar ist, und erhöhen die Wahrscheinlichkeit, dass Ihre Abonnenten sich engagieren. Keine kaputten E-Mails mehr!

Erstellen Sie markenkonforme, fehlerfreie E-Mails mit Litmus

Abgebrochene E-Mails – insbesondere CTA-Buttons – bedeuten weniger Klicks und Conversions. Autsch. Mit einer automatischen Überprüfung auf Bildblockierung, defekte Links und mehr hilft Ihnen Litmus dabei, sicherzustellen, dass alles perfekt ist.

Starten Sie Ihre kostenlose Testversion →

Was ist deine Lieblingstechnik mit kugelsicheren Knöpfen?

Teilen Sie uns in den Kommentaren unten mit, wie Sie kugelsichere E-Mail-Buttons erstellen.

Ursprünglich veröffentlicht am 1. November 2017 von Jason Rodriguez. Zuletzt aktualisiert am 22. Juni 2021.