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

Da immer mehr Menschen mit mobilen Geräten arbeiten, ist es wichtiger denn je, bei der Erstellung von E-Mails auch mobile Geräte im Auge zu behalten. Im Folgenden finden Sie einige Tipps und Tricks, die Sie bei der Erstellung Ihrer eigenen Vorlagen verwenden können, damit Ihre Nachrichten im mobilen Posteingang immer ganz oben angezeigt werden und Sie das Interesse Ihrer Abonnenten aufrecht erhalten.

Hinweis: Es ist nicht möglich, eine E-Mail nur für mobile Geräte oder nur für Desktops zu bearbeiten. Stattdessen erstellen Sie eine E-Mail, die in beiden Apps unterschiedlich dargestellt wird.

E-Mail-Clients lesen Nachrichten von links nach rechts
HTML-Elemente werden immer von links nach rechts angeordnet. Das bedeutet, dass Ihre Inhaltsblöcke von links nach rechts angeordnet werden. Wenn Sie eine E-Mail mit einem Bild auf der linken Seite erstellen und dann rechts von diesem Bild einen Textblock hinzufügen, dann wird das Bild auf mobilen Geräten oberhalb dieses Texts angezeigt. Darüber hinaus ist es immer am besten, ein einfaches und übersichtliches Design zu verwenden und an den kleineren Bildschirm zu denken.

Begrenzen Sie Ihre E-Mail-Breite auf maximal 650 Pixel
Dies ist die Breite, die bei den meisten E-Mail-Clients und mobilen Geräten funktioniert. Wenn eine E-Mail breiter als 650 Pixel ist, muss möglicherweise eine horizontale Bildlaufleiste verwendet werden, um Ihre Nachricht anzuzeigen. Dadurch ist Ihre Nachricht nicht nur schwer lesbar, sondern es kann auch sein, dass Sie den Kunden aufgrund der nicht gerade herausragenden Erfahrung verlieren und er ihre E-Mails abbestellt.

Die Bildbreite sollte zwischen 400 und 650 Pixel liegen.
Ein Bild mit einer Breite von 400 Pixeln ist das Minimum, das erforderlich ist, damit es auf einem mobilen Gerät in voller Breite angezeigt werden kann. Um zu sehen, wie groß Ihr Bild ist, klicken Sie im Designer auf das Bild und lassen Sie sich die Größe auf der Registerkarte „Optionen“ anzeigen:

adjust_image_size.png

Um die Größe zu ändern, passen Sie sie einfach auf der Registerkarte „Optionen“ an oder passen Sie die Größe der eigentlichen Bilddatei an und laden Sie das Bild erneut hoch.

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

Verwenden von ALT-Text
ALT-Text ist ein großartiges Hilfsmittel, da dieser Text angezeigt wird, falls ein Abonnent Bilder blockiert hat. Um ALT-Text zu Ihrem Bild hinzuzufügen, klicken Sie auf das Bild in Ihrer Kampagne und fügen Sie 1-2 Wörter in das Feld „Info“ auf der Registerkarte „Optionen“ ein:

alt_text_2.png

Verwenden von Bildblöcken, anstatt ein Bild in einen Textblock einzufügen
Textinhaltsblöcke, die ein Bild und mit diesem Bild verbundene Links enthalten, können in Outlook 2007 oder Outlook 2013 nicht angeklickt werden (siehe Abbildung unten). Darüber hinaus kann es vorkommen, dass der Text beim Betrachten auf einem mobilen Gerät nicht korrekt um Ihr Bild gruppiert wird.

example_link.png

Verwenden Sie das Spacer Widget, um weißen Raum um Inhalte und Bilder herum zu schaffen
Die Verwendung von Padding um ein Bild oder einen Inhalt herum, um Leerraum zu erzeugen, führt dazu, dass Ihre Inhalte auf einigen mobilen Geräten sehr schmal angezeigt werden. Verwenden Sie stattdessen das Spacer Widget im Drag-and-Drop Designer und stellen Sie es so ein, dass es auf Wunsch auf dem mobilen Gerät ausgeblendet wird (weitere Informationen unten).

spacer_widget.png

Nutzen der Funktion „Auf mobilen Geräten ausblenden“
Diese Funktion verbirgt unwichtige Elemente in Ihrer E-Mail, wenn diese auf einem mobilen Gerät angezeigt wird. Dies wird die Erfahrung für Ihre Abonnenten verbessern und dazu führen, dass sie ihre E-Mails öffnen.

Um ein Element auf einem mobilen Gerät auszublenden, klicken Sie einfach auf diesen Block und klicken Sie auf das Zahnrad:

click_cog.png

Klicken Sie auf „Auf mobilen Geräten ausblenden“.

hide_on_mobile.png

Wenn Sie mit dem Mauszeiger über dieses Element im Designer fahren, sehen Sie dies:

hide_message.png

Experimentieren mit Preheader-Text
Heben Sie Ihre Nachrichten von den restlichen E-Mails im Posteingang Ihres Abonnenten ab und bringen Sie ihn dazu, Ihre E-Mail zu öffnen. Hier erfahren Sie mehr darüber, wie Sie einen Preheader-Text zu Ihrer E-Mail hinzufügen können

Testen Ihrer E-Mail
Nutzen Sie die Desktop-Vorschau und senden Sie sich und Ihren Kollegen eine Test-E-Mail zur Ansicht auf verschiedenen mobilen Geräten. Sie können auch unsere Kompatibilitätsvorschau-Funktion verwenden, um Ihre E-Mail in verschiedenen E-Mail-Clients zu testen.

Haben Sie Fragen? Anfrage einreichen