Profi-Tipps zum Formatieren von E-Mails für Mobilgeräte

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps

Responsive Design ist heute eines der leistungsstärksten Tools, die E-Mail-Designern zur Verfügung stehen.

Aber es ist auch eines der verwirrendsten. Haben Sie Probleme, Ihre Antwort-E-Mail zu einer Antwort zu machen? Keine Sorge. Das passiert vielen E-Mail-Designern.

In diesem Artikel sehen wir uns einige Profi-Tipps zur Verwendung von Medienabfragen zum Formatieren von E-Mails für Mobilgeräte an. Lesen Sie weiter, um zu erfahren, wie Sie Ihre E-Mails besser für Mobilgeräte formatieren können und mehr.

Warum ist die mobile E-Mail-Formatierung wichtig?

Je nachdem, wen Sie fragen, schätzen Experten, dass 26-78 % aller E-Mails über Mobilgeräte geöffnet werden, je nach Zielgruppe, Produkt und E-Mail-Typ. Das ist eine ziemlich beachtliche Zahl, aber am besten überprüfen Sie Ihre Analysen, um selbst zu sehen, wie viele Ihrer Abonnenten Ihre E-Mail-Marketingkampagnen auf ihren Mobilgeräten ansehen. So oder so wird es Ihnen sehr wahrscheinlich helfen, Ihre Zielgruppe zu vergrößern und zu binden, wenn Sie Ihre E-Mails für Mobilgeräte optimieren!

So wirken sich responsive Designs auf die Leistung Ihrer E-Mail-Kampagne aus:

• Steigern Sie die Conversion-Rate auf Mobilgeräten
• Erleichtern Sie Ihren Abonnenten die Interaktion mit Ihren E-Mail-Inhalten auf kleinen Bildschirmen
• Erstellen Sie tragbare Inhalte, die möglicherweise in einem sozialen Umfeld statt allein am Laptop betrachtet werden

Da über 50 % aller E-Mail-Marketingkampagnen auf Mobilgeräten angezeigt werden, haben Sie hier die Chance, sich von der Masse abzuheben, indem Sie mit E-Mails, die optimal auf die Bildschirme Ihrer Benutzer abgestimmt sind, die Nase vorn haben und sich von der Masse abheben.

Mobilfreundlichkeit vs. Mobil-Responsiveness

Was ist der Unterschied zwischen Mobilfreundlichkeit und Mobilreaktivität? Die beiden Begriffe werden oft synonym verwendet. Bevor wir uns also näher damit befassen, schauen wir uns an, was sie eigentlich bedeuten.

Für Mobilgeräte geeignet bezieht sich auf Webinhalte, die für ein mobiles Gerät neu formatiert wurden, um das wiederzugeben, was Sie auf dem Desktop sehen. Das bedeutet:

• Anstatt die Größe des Inhalts zu verkleinern, werden anklickbare Elemente wie Call-to-Action-Schaltflächen (CTA) vergrößert.
• Die Größe und das Format der Bilder werden angepasst.

Kurz gesagt: Durch die Reaktionsfähigkeit auf Mobilgeräte entsteht ein optimales Benutzererlebnis, das sich vom Desktop-Erlebnis unterscheidet, aber genauso gut ist.

Mobilfreundlichkeitbezieht sich dagegen auf Webinhalte, die genau so aussehen wie auf einem Desktop – nur kleiner. Das bedeutet:

• Mobile Benutzer können dieselben Inhalte sehen, die sie auch auf einem Desktop sehen würden.
• Die Größe des Inhalts wird an die Abmessungen mobiler Bildschirme angepasst.
• Für Mobilnutzer kann die Interaktion mit der Site schwierig sein, da alle anklickbaren Schaltflächen und Bilder kleiner sind.

Zwar können Benutzer auf ihren Telefonen mit mobilfreundlichen E-Mails und anderen Webinhalten interagieren, die Mobilfreundlichkeit führt jedoch zu einer suboptimalen Benutzerinteraktion.

In diesem Artikel konzentrieren wir uns auf die Formatierung von E-Mails für die mobile Reaktionsfähigkeit.

Was sind die Best Practices zum Formatieren von E-Mails für Mobilgeräte?

Wir haben an anderer Stelle über einige Tipps zur Optimierung für Mobilgeräte und Möglichkeiten zur Verbesserung Ihres Mobildesigns gesprochen. Zur Auffrischung Ihres Gedächtnisses finden Sie hier einige Best Practices zum Formatieren von E-Mails für Mobilgeräte:

• Optimieren Sie für die Bildschirmgröße Ihres Benutzers. Verkleinern Sie den Inhalt nicht einfach. Formatieren Sie die Verteilung neu, um sicherzustellen, dass Ihr Benutzer ein optimales Anzeigeerlebnis hat.
• Passen Sie die Größe von Bildern und Text für mobile Benutzer an. Machen Sie es Ihren Abonnenten einfach, Ihre Inhalte anzuzeigen.
• Passen Sie die Größe interaktiver Inhalte an. Holen Sie sich die Klicks. Denken Sie daran, dass Ihre E-Mail-Kampagne nicht funktioniert, wenn Ihre Abonnenten Schwierigkeiten haben, auf die CTA-Schaltfläche zu klicken oder durch Ihre Links zu navigieren.
• Verschiedene E-Mail-Komponenten ausblenden/einblenden. Nicht alles, was Sie von Ihrem Desktop-PC aus per E-Mail erhalten, muss auf das mobile Erlebnis übertragen werden. Achten Sie auf ein klares und übersichtliches Design.
• Machen Sie es einfach mit einem einspaltigen Layout. Auch hier gilt: Überladen Sie den Platz nicht. Mobile Bildschirme sind kleiner und zu viel Inhalt kann genauso ineffektiv sein wie zu wenig Inhalt.

Wie formatiere ich E-Mails für Mobilgeräte?

Nachdem wir nun die Grundlagen geklärt haben, kommen wir zur Geheimzutat für Responsive Design: Media Query.

Media Query ist eine CSS-Technik, die die @media-Regel verwendet, um anzugeben, dass ein bestimmter Codeabschnitt nur dann eingefügt wird, wenn eine bestimmte Bedingung erfüllt ist. Sehen Sie sich beispielsweise den folgenden Code an.

@media nur Bildschirm und (max. Breite: 600px) { body { Hintergrundfarbe: hellblau; } }

Im obigen Beispiel haben wir eine Medienabfrage (@media) verwendet, um per HTML einen hellblauen Hintergrund anzugeben, wenn die Bildschirmgröße eine maximale Breite (max-width) von 600 Pixeln beträgt.

Mithilfe von Medienabfragen können Sie bestimmte Regeln zum Anzeigen/Ausblenden von Inhalten oder zum Ändern des Formats basierend auf bestimmten Bildschirmgrößen definieren.

Welche E-Mail-Clients unterstützen Medienabfragen?

Beachten Sie jedoch, dass nicht alle E-Mail-Clients Medienabfragen unterstützen. Sehen Sie sich unten die vollständige Liste der E-Mail-Clients an:

Wie formatiere ich meine Medienabfrage?

Da Sie nun wissen, dass die Medienabfrage nicht bei jedem E-Mail-Client wie erwartet funktioniert, können Sie loslegen.

Stellen Sie zunächst sicher, dass Ihre Medienabfrage richtig formatiert ist und dass ihre Parameter ordnungsgemäß ausgelöst werden.

Sehen wir uns eine falsch geschriebene Medienabfrage an, um häufige Fehler zu beheben:

Diese Abfrage soll Text auf Mobilgeräten größer und fetter darstellen. Allerdings wird diese Medienabfrage nicht richtig ausgelöst, da eine schließende Klammer } fehlt.

Einfache Syntaxfehler können dazu führen, dass Ihre Medienabfrage fehlschlägt. Hier sind einige weitere Fehler, auf die Sie Ihre Medienabfrage überprüfen sollten:

• Stellen Sie sicher, dass Ihre Medienabfrage und alle darin enthaltenen Deklarationsblöcke in geschweiften Klammern stehen.
• Stellen Sie sicher, dass Ihre Selektoren richtig funktionieren. Sie können dies testen, indem Sie diesen Selektor verwenden, um eine neue Regel außerhalb Ihrer Medienabfrage zu erstellen.
• Stellen Sie sicher, dass das Gerät, für das Sie optimieren, innerhalb des von Ihnen angegebenen Pixelbereichs liegt. Im nächsten Abschnitt unten gehen wir näher darauf ein.

Wie stelle ich die Bildschirmbreite richtig ein?

In diesem Abschnitt erfahren Sie, wie Sie die richtige Bildschirmbreite optimieren. Zunächst besprechen wir den Unterschied zwischen der maximalen Gerätebreite und der maximalen Breite. Anschließend werfen wir einen Blick auf die minimale und maximale Breite. Abschließend besprechen wir die Auswahl von Haltepunkten für Ihren Inhalt.

Verwende ich max-device-width oder max-width?

Wir verstehen es. Max-device-width und max-width können etwas verwirrend sein. Sehen wir uns an, wann sie verwendet werden.

Hier eine kurze Auffrischung:

• Maximale Gerätebreite zwingt die Abfrage, die Größe des Geräts statt des Anzeigebereichs zu prüfen. Auf dem Desktop würde beispielsweise die Größe des Monitors geprüft. Auf einem Handheld-Gerät würde diese Abfrage die gesamte Bildschirmgröße prüfen.
• Max-Breite überprüft die Breite des Anzeigebereichs, wie z. B. des Iframes des Internetbrowsers oder des Anzeigebereichs des E-Mail-Clients. Wenn Sie diese Medienfunktion verwenden, können Sie Ihre E-Mail-Antwort in einem Webmail-Client sehen, wenn Sie die Größe des Browserfensters ändern.

Im folgenden Code stellt Max-device-width sicher, dass die Medienabfrage überprüft, ob die Breite des Geräts weniger als 479 Pixel beträgt.

Verwende ich die Mindestbreite oder die Höchstbreite?

Sehen wir uns eine weitere häufige Quelle der Verwirrung an: Mindestbreite vs. Maximalbreite. Diese beiden sind ziemlich selbsterklärend, aber wann sollten Sie etwas auf der maximalen Breite oder der minimalen Breite basieren? Bei der Wahl zwischen den beiden sollten Sie Folgendes beachten:

• Max-Breite zielt auf Geräte der aufgeführten Breite und darunter ab.
• Mindestbreite zielt auf Geräte mit mindestens der angegebenen Breite oder mehr ab.

Weitere Informationen zu Mindest- und Maximalbreite finden Sie in unserem Artikel zur Entmystifizierung von Medienabfragen.

Wie wähle ich Haltepunkte aus?

Ein Breakpoint ist der „Punkt“, an dem sich Inhalt und Design einer Website auf eine bestimmte Weise anpassen. Kurz gesagt sind Breakpoints Pixelwerte, die Sie bei der Verwendung von Medienabfragen in CSS definieren können.

Schauen Sie sich die erste Zeile unserer Beispiel-Medienabfrage an, die unten wiedergegeben ist:

@media nur Bildschirm und (maximale Breite: 600px)

Der Haltepunkt, den wir oben definiert haben, liegt bei 600 Pixel.

Um das beste mobile Benutzererlebnis zu bieten, müssen Sie Ihre Haltepunkte definieren. Ein branchenüblicher Haltepunkt für tragbare Mobilgeräte ist 480 Pixel. (Bei Verwendung mit max-width wird ein Haltepunkt erstellt, der auf Geräten mit einer Breite von 480 Pixel und kleiner ausgelöst wird.) Bei Tablets sollte ein Haltepunkt in der Nähe von 640 Pixeln die Abfrage auslösen.

Soll ich das Viewport-Meta-Tag verwenden?

Der Viewport-Tag ist bei Responsive-Designern sehr beliebt, da Sie damit den Maßstab steuern können, in dem Ihre Seite oder E-Mail angezeigt wird. Er sieht folgendermaßen aus:

Wie bestelle ich mein CSS?

Denken Sie daran, dass bei der Verwendung von CSS die Reihenfolge wichtig ist. Die Regeln, die im Stilblock zuletzt stehen, haben Vorrang.

Aus diesem Grund sollten Medienabfragen, die die „Standard“-Desktopstile überschreiben sollen, am Ende Ihres Stilblocks stehen. Das kann man leicht vergessen, aber auch leicht beheben.

Wenn Sie mehrere Abfragen verwenden, ist es wichtig, Ihre Medienabfragen richtig zu ordnen, um ihre Priorität festzulegen. Wenn Sie beispielsweise max-device-width verwenden, sollten Sie Ihre Regeln in der folgenden Reihenfolge haben:

1. Desktop-Medienabfrage
2. Tablet-Medienabfrage
3. Handheld-Medienabfrage

Wenn Sie möchten, können Sie für Ihre Medienabfrage einen Bereich festlegen, wie unten gezeigt:

Der obige Code verwendet die erste Medienabfrage, um Geräte mit einer Breite von 481–900 Pixel (Tablets und ähnliche Geräte) anzusprechen, und die zweite Medienabfrage, um Geräte mit einer Breite von 480 Pixel oder weniger anzusprechen.

Einpacken

Und das war’s! Wir haben einige häufige Probleme mit Medienabfragen beim Entwerfen responsiver E-Mail-Vorlagen besprochen. Sie sind sich nicht sicher, wie Ihre E-Mail auf verschiedenen Bildschirmen angezeigt wird? Denken Sie daran: Testen Sie, raten Sie nicht. Wir helfen Ihnen, Ihre E-Mails für Mobilgeräte zu optimieren.

Haben wir etwas übersehen, das Sie in der Vergangenheit vor ein Rätsel gestellt hat? Teilen Sie uns Ihre Probleme mit Medienabfragen in den Kommentaren unten mit.

Dieser Artikel wurde am 7. April 2022 aktualisiert. Er wurde ursprünglich im August 2013 veröffentlicht.

Autor: Das Email on Acid Team

Das Content-Team von Email on Acid besteht aus digitalen Vermarktern, Content-Erstellern und echten E-Mail-Freaks. Verbinden Sie sich mit uns auf LinkedIn, folgen Sie uns auf Facebook und twittern Sie unter @EmailonAcid auf Twitter für weitere interessante Sachen und tolle Gespräche zum Thema E-Mail-Marketing.

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps