E-Mail-Design für mobile Geräte

Marketing_Lite_Plus_Professional_Enterprise

Da immer mehr Menschen mit mobilen Geräten arbeiten, ist es wichtiger denn je, bei der Erstellung Ihrer E-Mails an die mobile Nutzung zu denken. Im Folgenden finden Sie die besten Praktiken, die Sie bei der Erstellung von Vorlagen und Kampagnen anwenden können.

Hinweise

  • Klassischer E-Mail-Designer: Es ist nicht möglich, eine E-Mail nur für das Handy oder nur für den Desktop zu bearbeiten. Stattdessen erstellen Sie eine E-Mail, die in beiden Anwendungen unterschiedlich dargestellt wird
  • E-Mail-Designer ab 2022: Sie können eine E-Mail für Handy und Desktop bearbeiten. Diese Einstellung befindet sich unter "Globale Einstellungen" > "Allgemeine Einstellungen" > "Responsive Design" des E-Mail-Designers. Außerdem können Sie unter Inhalte auf dem Handy oder im Web ausblenden. Dies gibt Ihnen die Flexibilität, gleichzeitig eine mobilfreundliche E-Mail und eine desktopfreundliche Version zu erstellen

Verwenden Sie die Einstellung "Mobile Responsiveness aktivieren"

Diese Einstellung wird automatisch für jede von Ihnen erstellte Kampagne und Automations-E-Mail aktiviert und kann manuell deaktiviert werden.

Um sicherzustellen, dass diese Einstellung aktiviert ist, klicken Sie auf das Zahnradsymbol oben rechts im E-Mail-Designer. Das Modal für die Kampagneneinstellungen wird geöffnet. Wenn "Enable mobile responsiveness" ausgeschaltet ist, klicken Sie auf die Umschaltfläche, um die Funktion einzuschalten.

Enable_mobile_responsiveness_toggle.jpeg

Beachten Sie, dass die meisten älteren Versionen der nativen E-Mail-App von Samsung kein Responsive Rendering für Mobilgeräte unterstützen.

Vermeiden Sie das Kopieren und Einfügen von Text aus einer externen Quelle

Wenn Text aus einer externen Quelle, z. B. aus einem Textverarbeitungsprogramm, kopiert und in eine Kampagne eingefügt wird, werden neben dem eigentlichen Text auch alle Formatierungen aus dieser Quelle übernommen. Obwohl wir unser Bestes tun, um alles zu entfernen, was die Darstellung Ihrer E-Mail beeinträchtigen könnte, wird nicht alles erfasst. Das bedeutet, dass zusätzliche Paddings in Ihrem Design dazu führen können, dass der Text bei der Anzeige auf einem Mobiltelefon kleiner erscheint und die E-Mail beim Versand an einen Posteingang anders aussieht.

Stattdessen empfehlen wir Ihnen, Ihren Inhalt direkt in den Textblock einzugeben, oder Sie können den Inhalt in einen Texteditor einfügen und ihn dann in Ihre Kampagne kopieren. Bei beiden Ansätzen werden alle versehentlichen Formatierungen in Ihrer E-Mail entfernt.

Die Spalten in Ihrer Kampagne bestimmen die Reihenfolge, in der sie in der mobilen Ansicht ausgeblendet werden

Die Reihenfolge, in der Ihre Inhalte im Designer erscheinen (von links nach rechts), bestimmt ihre Reihenfolge, wenn die Spalten in der mobilen Ansicht zusammengeklappt werden. In mobilen Geräten werden die Spalten von links nach rechts und dann von oben nach unten eingeklappt. Dies wird auch alsTacking oder Block Stacking bezeichnet.

Wir empfehlen Ihnen, Ihre Inhalte wie in der folgenden Abbildung dargestellt anzuordnen. Der Gedankenstrich steht für eine Zeile, die Gruppierung von Bildern und Text für eine Spalte. Der dunkle Rahmen stellt die Spaltenmarkierung des Designers dar und erstreckt sich nur auf die erste Zeile.

campaign_column_example_1.png

Wenn Spalten in der mobilen Version eingeklappt werden, ist der Inhalt in der richtigen Reihenfolge:

campaign_column_example_2.png

Halten Sie die Breite Ihrer E-Mail auf maximal 650 Pixel beschränkt

Diese Breite ist für die meisten E-Mail-Programme und mobilen Geräte geeignet. Wenn eine E-Mail breiter als 650 Pixel ist, muss möglicherweise eine horizontale Bildlaufleiste verwendet werden, um Ihre Nachricht anzuzeigen. Das macht Ihre Nachricht nicht so übersichtlich und kann dazu führen, dass sich jemand abmeldet.

Die Bildbreite sollte zwischen 400 und 650 Pixel betragen

Ein Bild mit einer Breite von 400 Pixeln ist das Minimum, das benötigt wird, um auf einem mobilen Gerät in voller Breite angezeigt zu werden. Bilder, die kleiner als 400 Pixel sind, werden auf dem Handy nicht skaliert. Dies gilt für Logos und Icons, die nicht skaliert werden sollen.

Wenn Sie ein großes Bild hochladen, wird es so verkleinert, dass es nicht größer als die doppelte Breite der E-Mail ist.
Wenn das Bild oder das Logo bei der Anzeige auf dem Handy zu groß ist, können Sie die Größe des Bildes ändern und es dann erneut in den E-Mail-Designer hochladen. Beachten Sie, dass die tatsächliche Bildbreite und die von Ihnen im Designer festgelegte Breite zwei verschiedene Dinge sind. Bilder, die als Inline-Bilder in einen Textblock eingefügt werden, werden nicht vergrößert.

Um zu sehen, wie groß Ihr Bild mit dem E-Mail-Designer aus dem Jahr 2022 ist, klicken Sie aufdas Bild im Designer und sehen Sie die Größe in den Bildblock-Optionen auf der rechten Seite
:image_in_new_email_designer.jpeg


Um zu sehen, wie groß Ihr Bild im Classic E-Mail-Designer ist, klicken Sie auf das Bild im Designer und sehen Sie die Größe auf der Registerkarte Optionen:

bild_grösse_anpassen.png


Denken Sie daran, dass es immer besser ist, ein größeres Bild zu verkleinern als ein kleineres Bild zu vergrößern.

Alt-Text für Bilder verwenden

ALT-Text ist der schriftliche Text, der anstelle eines Bildes erscheint, wenn das Bild im Posteingang eines Kontakts nicht geladen werden kann oder wenn Bilder blockiert sind. ALT-Text wird ebenfalls dringend empfohlen, da er die Zugänglichkeit Ihrer Inhalte für diejenigen verbessert, die auf Bildschirmlesegeräte angewiesen sind.

Um Ihrem Bild einen ALT-Text hinzuzufügen, verwenden Sie den E-Mail-Designer (ab 2022), , klicken Sie auf das Bild in Ihrer Kampagne und fügen Sie 1-2 Wörter in das Feld "Alternativer Text" in den Bildblockoptionen auf der rechten Seite ein:

new_email_designer_alt_text_example.png

Um Ihrem Bild mit dem Classic E-Mail-Designer einen ALT-Text hinzuzufügen, klicken Sie auf das Bild in Ihrer Kampagne und fügen Sie 1-2 Wörter in das Feld "Info" unter der Registerkarte "Optionen" ein:

alt_text_2.png

Verwenden Sie Bildblöcke, anstatt ein Bild in einen Textblock einzufügen

Beachten Sie, dass diese Methode nur im klassischen Designer verfügbar ist.

Textinhaltsblöcke, die ein Bild und Links im Zusammenhang mit diesem Bild enthalten, können in Outlook 2007 oder Outlook 2013 nicht angeklickt werden. Außerdem kann es vorkommen, dass der Text bei der Anzeige auf einem Mobiltelefon nicht korrekt um das Bild herumgeführt wird.

Wir empfehlen, Bildblöcke zu verwenden, anstatt ein Inline-Bild in einen Textblock einzufügen.

Verwenden Sie den "Spacer"-Block, um Leerraum um Inhalte und Bilder zu schaffen

Die Verwendung von Paddings um ein Bild oder einen Inhalt, um Leerraum zu schaffen, führt dazu, dass Ihr Inhalt bei der Anzeige auf einigen mobilen Geräten komprimiert dargestellt wird.

Verwenden Sie stattdessen den "Spacer"-Block im E-Mail-Designer und stellen Sie ihn auf "Hide on Mobile" (klassischer E-Mail-Designer) oder "Hide element" (E-Mail-Designer, der 2022 eingeführt wurde), falls gewünscht.

Das Ausblenden des Abstandsblocks verhindert, dass große Abstände oder Ränder angezeigt werden, wenn die E-Mail auf mobilen Geräten angezeigt wird.

Verwenden Sie die Option "Auf mobilen Geräten ausblenden"

Diese Option blendet unwichtige Elemente in Ihrer E-Mail aus, wenn sie auf einem mobilen Gerät angezeigt werden. Dies verbessert das Erlebnis für Ihre Abonnenten und sorgt dafür, dass sie mit Ihren Inhalten interagieren.

So blenden Sie ein Element mit dem E-Mail-Designer aus, der 2022 eingeführt wurde:

  1. Klicken Sie auf das Bild.
  2. Scrollen Sie im Bildblock auf der rechten Seite nach unten und klicken Sie auf das Symbol für mobile Geräte, um die Seite auf mobilen Geräten auszublenden.
  3. Sie können auch auf das Desktop-Symbol klicken, um das Bild in der Desktop-Ansicht unter "Element ausblenden" auszublenden. Beachten Sie, dass die Option "Auf dem Desktop ausblenden" nur mit dem E-Mail-Designer verfügbar ist (seit 2022).
    new_email_designer_hide_on_mobile_option.jpegEin
    Symbol mit einer Linie durch das Mobil-Symbol wird auf dem Block angezeigt, den Sie mit der Option "Auf dem Handy ausblenden" verwenden.
    new_email_designer_hide_on_mobile.png

So blenden Sie ein Element mit dem klassischen E-Mail-Designer für mobile Geräte aus:

  1. Klicken Sie auf diesen Block und klicken Sie auf das Zahnrad
    :click_cog.png
  2. Klicken Sie in der Liste der Optionen unter auf "Auf mobilen Geräten ausblenden".
  3. Wenn Sie mit der Maus über das Element im Designer fahren, sehen Sie dies

    :hide_message.png

Probieren Sie Text in der Kopfzeile aus

Heben Sie sich von den übrigen E-Mails im Posteingang Ihrer Abonnenten ab und ermutigen Sie sie dazu, Ihre E-Mail zu öffnen. Erfahren Sie mehr über und das Hinzufügen eines Preheader-Textes zu Ihrer E-Mail.

Testen Sie Ihre E-Mail

Verwenden Sie die Desktop-Vorschau und senden Sie sich und Ihren Kollegen eine Test-E-Mail, die auf verschiedenen mobilen Geräten angezeigt wird. Sie können auch unsere Kompatibilitätsvorschau nutzen, um Ihre E-Mail mit verschiedenen E-Mail-Clients zu testen.

 

War dieser Beitrag hilfreich?
22 von 52 fanden dies hilfreich

Haben Sie weitere Fragen? Anforderung einreichen

Start free trial