We're making it easier to get around Constant Contact with a brand new left navigation. Not all accounts have that change yet, so if your navigation looks different from our articles, that's why–but everything from the top can now be found on the left!

Email and Digital Marketing
Wie können wir Ihnen helfen?
Durchsuchen Sie unsere Hilfe-Artikel, Video-Tutorials und Schnellstart-Anleitungen

Sie haben es. Sie haben uns. Durchsuchen Sie unsere Wissensdatenbank für eine schnelle Antwort auf Ihre Fragen zum E-Mail-Marketing.

Best Practices für mobilfreundliches E-Mail-Design

Article: 000006191
Updated: 15. April 2022

Lassen Sie eine E-Mail auf einem Smartphone oder Tablet so gut wie auf einem traditionellen Computer oder Laptop aussehen

Mobilgeräte, wie Smartphones und Tablets, werden zum Anzeigen von E-Mails immer beliebter. Die Bildqualität auf einem dieser Geräte unterscheidet sich erstaunlicherweise nicht sehr von der auf einem traditionellen Computer. Für Mobilgeräte geeignete E-Mail-Vorlagen nutzen eine Technologie für das Anpassen und Formatieren des Layouts Ihrer E-Mail, basierend auf der Größe des Bildschirms, auf dem sie angezeigt wird.

Zum Beispiel: Eine für Mobilgeräte geeignete E-Mail, die so formatiert ist, dass rechts davon ein Bild mit Text auf dem Desktop erscheint, sieht gestapelt aus (d. h. Bild oben mit dem Text unterhalb), wenn sie auf einem Mobilgerät angezeigt wird. Somit kann der Endbenutzer die E-Mail einfacher lesen.


Text-Tipps für Mobilgeräte

Wie Sie sich vorstellen können, ist Bildschirmplatz auf Mobilgeräten besonders wertvoll. Daher kann Text, der auf einem Desktop normal aussieht, auf einem anderen Gerät schrumpfen, so dass Ihre Kontakte heran- und herauszoomen müssen, um nur Abschnitte einer E-Mail lesen zu können.

 
Eine Beispiel-Inbox, in der eine E-Mail-Betreffzeile mit mehr als 40 Zeichen abgekürzt wird.Eine Beispiel-Inbox, in der eine Betreffzeile mit weniger als 40 Zeichen vollständig angezeigt wird.

Gewährleisten Sie ein großartiges Leseerlebnis, indem Sie diese Richtlinien einhalten:
  • Kleinen Text vermeiden - Verwenden Sie Text, der auf jedem Gerät leicht lesbar ist. Wir empfehlen die Beibehaltung der Standardgrößen laut Vorlage. Wenn Sie sie ändern müssen, verwenden Sie 22pt für Titel und 14pt für Text. Wählen Sie web-geeignete Schriftarten, die auf vielen Geräten vorinstalliert sind und verwenden Sie maximal zwei verschiedene Schriftarten. Sie erhalten die besten Ergebnisse mit 20 Textzeilen. Wenn Ihr Inhalt länger ist, schließen Sie am besten ein paar kurze "Teaser"-Textzeilen ein, mit einem Link für das Online-Weiterlesen.
  • In Ihrer Betreffzeile maximal 40 Zeichen verwenden - Betreffzeilen werden in der Inbox eines Smartphones häufig abgeschnitten. Wenn Sie Ihre Betreffzeile unter 40 Zeichen halten, (inklusive Leerzeichen) wird gewährleistet, dass sie vollständig gelesen wird.
  • Alt-Text mit Bildern einschließen - Personen mit Mobiltelefonen sind normalerweise unterwegs. Deshalb versuchen sie ständig, mit den Daten sparsam umzugehen. Wenn sie ihre Einstellungen aufrufen und "Bilder nicht automatisch herunterladen" auswählen, können mobile Anwender den Datenverbrauch und die Ladezeit drastisch reduzieren. Somit sind Ihre Bilder am stärksten betroffen. Das Einfügen von Alt-Text in Ihre Bilder stellt sicher, dass nichts verloren geht. Sie können die Quintessenz in Wörtern, anstelle von Bildern vermitteln.



Bild- und Design-Tipps für Mobilgeräte

Wenn Sie eine Zeitlang die selbe alte Vorlage immer und immer wieder kopiert haben, ist es ratsam, eine neue E-Mail mit unserem neuesten Editor zu erstellen. Alle im neueren Editor erstellten Vorlagen sind für Mobilgeräte geeignet, unabhängig vom eingefügten Inhalt.

 
Desktop-Ansicht von E-Mails mit SpaltenMobile Ansicht einer E-Mail mit Spalten


Unabhängig davon, für welche E-Mail-Vorlage Sie sich entscheiden, sollten Sie sich an einige allgemeine Richtlinien halten, um sicherzustellen, dass Ihre E-Mail unabhängig von der Art des Geräts, auf dem sie angezeigt wird, gut aussieht:

  • Für Branding anpassen - Beschränken Sie Ihre Farbauswahl auf fünf Farben (ohne Schwarz und Weiß). Stellen Sie sicher, dass Ihre Textfarbe vor Ihrem Hintergrund lesbar ist.
  • Folgen Sie Blocknamen und Beschreibungen - Vorlagenblocks,wie der Bild-, Text- oder Schaltflächenblock sind für bestimmte Anwendungen professionell entwickelt. Der Name des Blocks zeigt Ihnen, wie er verwendet werden soll, um die bestmöglichen Ergebnisse zu erzielen.
  • Kurz halten - Achten Sie auf die Länge Ihrer Nachricht. Das Hinzufügen weiterer Blocks verlängert Ihre Nachricht und erschwert das Lesen auf einem kleineren Gerät. Sie benötigen in den meisten Fällen nicht mehr als ein Bild, drei Textzeilen und einen deutlichen Call-to-Action. Eine Analyse von über 2,1 Millionen Constant Contact Kunden-E-Mails hat ergeben, dass E-Mails mit maximal drei Bildern und 20 Textzeilen die höchsten Klickraten erzielt haben.
  • Ihre Spalten ausrichten - Kennen Sie diese Blocks mit zwei und drei Spalten? Sie werden auf dem Handy nicht so angezeigt wie auf dem Desktop. Stattdessen werden sie alle in einer langen, scrollenden E-Mail gestapelt, in der die ganz linke Spalte zuerst angezeigt wird. Gehen Sie also sparsam mit Spalten um! Sie haben nur circa zehn Sekunden Zeit, um die Aufmerksamkeit Ihrer Leser zu erregen.
  • Bildgrößen berücksichtigen - Bilder, die beim Hochladen in Ihren Account mindestens 480 Pixel haben, füllen die gesamte Bildschirmbreite aus, wenn sie auf einem Mobilgerät betrachtet werden. Bilder, die sich nicht über die gesamte Bildschirmbreite erstrecken sollen, wie Logos und Symbole, laden Sie entweder in der Größe herunter, wie sie angezeigt werden sollen oder Sie skalieren das Bild bis zu einer Pixelgröße von bis zu 150-200 mit dem Bildeditor. Auf einem Mobilgeräte-Bildschirm ist weniger Platz, sodass Hintergrundbilder auch auf Mobilgeräten nicht gut sichtbar sind. 
  • Aus Ihrem Call-to-Action eine Schaltfläche machen - Haben Sie jemals versucht, einen Hyperlink auf Ihrem Smartphone anzuklicken? Es ist nicht einfach. Verbessern Sie den Bedienkomfort, indem Sie Ihre Schaltflächen für Ihre Calls-to-Action anstelle von Text verwenden. Darüber hinaus könnten Sie sogar Ihre Klickraten verbessern. Schaltflächen werden im Vergleich zu nur Text wahrscheinlich um 25% häufiger angeklickt. 
 
Design-TippWussten Sie: E-Mails sehen auf verschiedenen Geräten unterschiedlich aus. Ein Layout, das auf einem Mobilgerät perfekt aussieht, kann auf dem Desktop gestreckt oder vermischt aussehen. Sie können unsere Best Practices für Desktoplesen, um sicherzustellen, dass Ihre Kontakte stets das bestmögliche Anzeigeerlebnis bekommen.



Vorschau- und Test-Tipps für Mobilgeräte

Wenn Sie eine E-Mail für Mobilgeräte entwerfen, beachten Sie, dass unterschiedliche Kunden und Geräte verschiedene Methoden für das Anzeigen von Inhalten haben.

 
E-Mail-Entwurf im Editor mit Dropdown-Menü Vorschau und TestMobile E-Mail-Vorschau mit Vorschaufunktionen für Desktop, Handy und Posteingang

Es gibt mehrere Methoden, um zu überprüfen, wie eine E-Mail auf den Geräten aussieht:
  • Preview - (Vorschau) Klicken Sie auf die Schaltfläche Check and Preview (Überprüfen &Vorschau) oder Preview & Test (Vorschau & Test), während Sie Ihre E-Mail bearbeiten. Sie können sehen, wie sich der Inhalt in einer Spalte stapelt, wenn er auf einem Mobilgerät angezeigt wird, und Sie können Test-E-Mails an Ihre Korrekturleser senden.
  • Test-E-Mail - Senden Sie eine Test-E-Mail an sich selbst und öffnen sie auf Ihrem eigenen Smartphone oder Tablet, um eine genaue Vorstellung zu erhalten, wie sie auf Ihre Kontakte wirkt.
  • Inbox-Vorschau - Die meisten E-Mails werden in lediglich fünf verschiedenen E-Mail-Clients geöffnet. Inbox-Vorschau zeigt an, wie Ihre E-Mails in jedem Client aussieht.
 
GlühlampensymbolMehr erfahren: Sie möchten mehr über mobile Nutzung erfahren? Probieren Sie diese einfachen fünf Tipps für mobilfreundliche E-Mails aus!
 


Questions?

Ask the Community

Did this article answer your question?


Constant Contact Logo

Copyright © 2021 · Alle Rechte vorbehalten · Constant Contact · Privacy Policy