[DE] Mobiloptimierte E-Mail-Vorlage

Optimale Darstellung auf allen Geräten

Immer mehr Empfänger öffnen ihre E-Mails auf mobilen Geräten wie z. B. Smartphones. Da diese Geräte über deutlich kleinere Bildschirme als Desktop-Geräte verfügen, müssen Kampagnen entsprechend angepasst werden. Vor allem Texte, Bilder und Call-to-Action Elemente sollen gut lesbar und ansprechend gestaltet sein.

Responsive Webdesign mit einem fluiden Layout

Bei der Mobiloptimierung unserer Vorlagen arbeiten wir mit „Media Queries“ - ein CSS-Werkzeug, zur Anpassung des Layouts an unterschiedliche Bildschirmgrößen.

Anstatt für jede Displaygröße eine eigene Version zu erstellen, setzen wir auf ein „fluides Layout“. Dabei passt sich die Newsletter-Breite automatisch an den verfügbaren Platz an. Bilder, Texte und Call-to-Action Elemente nutzen den vorhandenen Raum optimal und bleiben auf unterschiedlich großen Geräten gut lesbar.

Der Aufbau von mobiloptimierten Vorlagen

Mehrspaltige Inhalte, die in der Desktop-Version nebeneinander dargestellt sind, werden auf mobilen Geräten untereinander angeordnet. Dadurch wird die E-Mail länger und kann bei sehr komplexen Layouts unübersichtlich wirken.

Wir empfehlen deshalb:

• einfache Strukturen bevorzugen
• wichtige Inhalte nicht auf zu viele Spalten aufteilen
• komplexe Layouts vermeiden

Durch die einspaltige Darstellung in der mobilen Version, wird die Reihenfolge einzelner Inhalte verändert. Es ist deshalb insbesondere bei mehrspaltigen Elementen wichtig darauf zu achten, dass die Inhalte unabhängig voneinander verständlich sind.

Bei der Umsetzung einer individuellen E-Mail-Vorlage können auch Sonderwünsche für die mobile Darstellung berücksichtigt werden.

Unser Tipp: Platzieren Sie wichtige Informationen möglichst weit oben in der Kampagne. So werden diese schneller wahrgenommen und es besteht keine Gefahr, dass sie erst nach Klick auf den „Weiterlesen“-Button einiger Mail-Apps erscheinen.

Desktop und mobile Version im Vergleich

Bilder

Bilder werden an die verfügbare Bildschirmbreite angepasst. Große Bilder werden verkleinert, kleinere Bilder können leicht vergrößert werden, damit sie auch auf mobilen Geräten gut sichtbar sind.

Besonderheit: Hintergrundbilder

Für die mobile Darstellung von Hintergrundbildern gibt es mehrere Möglichkeiten:

• Text unter dem Bild:
  Inhalte, die in der Desktop-Version auf dem Bild liegen, werden in der mobilen Ansicht darunter platziert. Dadurch kommt die gesamte Grafik zur Geltung. Vor allem im Headerbereich ist diese Methode sehr gängig.
  

  

  

• Text im Bild:
  Bleibt der Text auch in der mobilen Ansicht auf dem Bild, muss noch definiert werden, wie sich die Grafik in der mobilen Version verhält.

  • Gesamtes Bild wird verkleinert
    Die Bildgröße wird entsprechend der Displaybreite neu berechnet. Ebenso verhält es sich mit der Textposition. Aufgrund der vielen verschiedenen Bildschirmgrößen mobiler Endgeräte, kann es passieren, dass die Grafik unten abgeschnitten wird. Diese Variante ist am ähnlichsten zur Desktop-Version.
    

    

    

  • Bildausschnitt mit gleichbleibender Höhe
    Die Höhe des Hintergrundbildes bleibt gleich. Bei kleiner werdender Bildschirmbreite wird aber nur noch ein Ausschnitt der Originalgrafik angezeigt. Der sichtbare Bereich kann in den Einstellungen mit dem „Fokuspunkt“ (links, mitte, rechts) definiert werden.
    

    

    

Call-to-Action Elemente

Für den Empfänger klickbare Bereiche – Links, Buttons und verlinkte Bilder – sollen eine minimale Höhe von 50 Pixel haben. Die Breite richtet sich nach der Textlänge. Damit wird garantiert, dass sie auf den Touch-Displays leicht mit den Fingern berührt werden können.

Ein aktueller Trend ist, dass Buttons in der mobilen Version über die ganze verfügbare Breite aufgespreizt werden. Dadurch können sie sowohl mit der rechten als auch mit der linken Hand einfach geklickt werden.

Reality Check

Die meisten modernen E-Mail-Clients unterstützen Media Queries und damit ein responsives Webdesign. Outlook Classic für Windows sowie einzelne Webmail- und Mobile-Clients bieten jedoch nur eine eingeschränkte Unterstützung.

Unsere Vorlagenexpert:innen setzen auf Lösungen, die von möglichst vielen E-Mail-Clients unterstützt werden. Dennoch kann die mobile Darstellung je nach verwendetem E-Mail-Client vom ursprünglichen Design abweichen. Ziel ist es, Ihren Newsletter auf allen unterstützten Geräten funktional, gut lesbar und optisch ansprechend darzustellen.