Eine mobile-responsive E-Mail ist eine E-Mail, die sich anpasst und auf verschiedenen Bildschirmgrößen, einschließlich Smartphones und Tablets, richtig angezeigt wird. Nicht responsive E-Mails werden möglicherweise falsch angezeigt, was zu Verwirrung bei den Benutzer:innen führt. Es ist von entscheidender Bedeutung, dass Ihr E-Mail-Design auf mobile Endgeräte reagiert, denn etwa die Hälfte aller E-Mails wird auf mobilen Geräten geöffnet. Es gewährleistet die Lesbarkeit auf verschiedenen Geräten und verhindert, dass Benutzer:innen den Inhalt vergrößern oder verkleinern müssen, um ihn zu sehen. 

Um diese Aufgabe für Sie zu vereinfachen, passen wir Ihre E-Mail-Designs automatisch an mobile Geräte an: Elemente wie Bilder, Text und Schaltflächen werden automatisch skaliert und neu angeordnet, damit sie auf mobile Bildschirme passen. Sie können dieses Standard-E-Mail-Design jedoch jederzeit für Mobilgeräte optimieren, indem Sie die verschiedenen Optionen aus unserer Vorschau für den mobilen Modus verwenden und unsere Tipps befolgen, um Ihren Empfänger:innen das bestmögliche Erlebnis zu bieten. 

Gut zu wissen

• Stellen Sie sicher, dass Sie den Unterschied zwischen Abschnitts- und Inhaltsblöcken verstehen.
• Lernen Sie, wie Sie Ihre E-Mails effektiv für den Dunkelmodus gestalten, der auf mobilen Geräten oft aktiviert wird, um die Augen und die Batterie zu schonen. Um mehr zu erfahren, überprüfen Sie unseren Artikel E-Mails im Dunkelmodus gestalten.

💡 Tipps für mobile-responsive E-Mails

• Halten Sie es einfach mit einem einspaltigen Layout
  Ändern Sie Ihr Inhaltslayout, um eine Überladung Ihres E-Mail-Layouts zu vermeiden. Die Bildschirme von Mobiltelefonen haben nur begrenzten Platz, und zu viel Inhalt kann ineffektiv sein.
• Verwenden Sie quadratische oder querformatige Bilder
  Für Ihre Bilder sollten Sie quadratische oder querformatige Formate verwenden, da diese kleiner sind als hochformatige Bilder. Stellen Sie außerdem sicher, dass die Pixelgröße Ihres Bildes nicht die Größe des mobilen Displays überschreitet.
• Vermeiden Sie Inhalte mit hohem Datenvolumen
  Reduzieren Sie Ihre Inhalte, insbesondere wenn Sie große Bilder oder Logos haben, die auf dem Handy angezeigt werden. Halten Sie die Breite Ihrer Bilder zwischen 400 und 650 Pixel. Ein 400 Pixel breites Bild ist die kleinste Größe, die für eine Anzeige in voller Breite auf einem mobilen Gerät erforderlich ist. Sie könnten auch die Größe Ihrer Schaltflächen erhöhen, um die Klickrate zu steigern. Wir empfehlen Ihnen, Ihre E-Mails zu testen, bevor Sie sie an Ihre Empfänger:innen versenden, um die Größe Ihres Inhalts zu überprüfen und sicherzustellen, dass sie für mobile Geräte geeignet sind.
• Einfügen von Alt-Text in das Bild oder Logo
  Für Ihr Bild wird empfohlen, einen Alt-Text hinzuzufügen. Dabei handelt es sich um die textliche Beschreibung, die erscheint, wenn ein Bild oder Logo in einer E-Mail nicht angezeigt wird oder wenn der Empfänger das Bild blockiert hat. Es ist auch sehr empfehlenswert, da es die Zugänglichkeit Ihrer Inhalte für diejenigen verbessert, die Bildschirmlesegeräte verwenden.
  ➡️ Um mehr zu erfahren, lesen Sie unseren speziellen Abschnitt im Artikel Verwendung von Inhaltsblöcken (Text & Links, Bild, Schaltfläche, etc.).

📱 Optimierung Ihres Designs für Mobilgeräte

Wenn Sie Ihre E-Mail mit dem Drag & Drop-Editor gestalten, können Sie das Standard-E-Mail-Design für mobile Geräte anzeigen und bearbeiten, indem Sie auf das Mobil-Symbol oben rechts auf Ihrem Bildschirm klicken:

Wir bieten Ihnen verschiedene Möglichkeiten, die Standard-Mobilversion Ihres E-Mail-Designs zu bearbeiten und auszuwählen, wie Ihre Inhalte auf mobilen Geräten angezeigt werden sollen:

• Einstellen Ihrer E-Mail auf volle Breite;
• Bearbeitung Ihres Inhaltslayouts;
• Ausblenden Ihrer Inhalte für Desktop- oder Mobilgeräte; oder
• Anpassen der Inhaltsgröße. 

Einstellen Ihrer E-Mail auf volle Breite

Verwenden Sie die Option Full width on mobile (Volle Breite auf Mobilgeräten), um die Größe Ihres E-Mail-Textes auf die volle Breite von Mobilgeräten zu erweitern. Dies wird empfohlen, um die Lesbarkeit Ihrer E-Mail zu verbessern:

1. Klicken Sie auf das Symbol für mobile Geräte am oberen Rand Ihres Bildschirms, um den mobilen Modus aufzurufen.
2. Klicken Sie auf Style (Stil) auf der linken Seite Ihres Bildschirms.
3. Aktivieren Sie im Bereich Template auf der linken Seite die Option Full width on mobile option (Vollständige Breite auf dem Mobilgrät).

Ändern des Layouts Ihres Inhalts

Für jeden Abschnitt können Sie die Ausrichtung und Orientierung Ihres Inhalts wählen. Richten Sie alles vertikal aus, um die Lesbarkeit zu verbessern oder horizontal, um Platz zu sparen. Welche Ausrichtung Sie wählen, hängt von der Art des Inhalts ab, den Sie anzeigen möchten. Um Ihnen bei der Auswahl zu helfen, wie Sie Ihre Inhalte auf Mobiltelefonen anzeigen, finden Sie hier einige Beispiele dafür, was Sie tun sollten und was nicht:

	✅ Richtig	❌ Falsch
Vertikale Ausrichtung
Horizontale Ausrichtung

Wenn Ihnen die Ausrichtung Ihrer Inhalte in der standardmäßigen mobilen Version unseres Editors nicht zusagt, können Sie sie bearbeiten:

1. Klicken Sie auf das Symbol für mobile Geräte am oberen Rand Ihres Bildschirms, um den mobilen Modus aufzurufen.
2. Wählen Sie den Abschnitt, für den Sie die Ausrichtung ändern möchten.
3. Wählen Sie in der linken Leiste die gewünschte Inhaltsausrichtung:
   1. Vertikal ausrichten, klicken Sie auf den nach unten zeigenden Pfeil.
   2. Horizontal ausrichten, klicken Sie auf den Pfeil, der nach rechts zeigt.
4. Wenn Sie sich dafür entscheiden, Ihren Inhalt vertikal auszurichten, können Sie auch die Reihenfolge des Inhalts Ihres Abschnitts umkehren. So wird beispielsweise Ihr Text vor dem Bild angezeigt oder umgekehrt.
   Zu diesem Zweck aktivieren Sie die Option Swap content (Inhalt vertauschen) in der linken Leiste:
   

Einen Abschnitt oder Inhaltsblock ausblenden

Das Ausblenden eines Abschnitts oder Inhaltsblocks auf mobilen Geräten hilft, lange Inhalte zu reduzieren, ein minimalistisches Design zu schaffen und eine Überlastung von E-Mails auf mobilen Geräten zu vermeiden. Sie können wählen, was Sie am nützlichsten und wichtigsten finden, in den mobilen Modus zu übertragen und unwichtige Inhalte auszublenden. Um zu erfahren, wie Sie einen Abschnitt oder einen Inhaltsblock auf mobilen Geräten ausblenden können, lesen Sie unseren Artikel Anzeigen oder Ausblenden von Inhalten je nach Gerätetyp.

Die Inhaltsgröße anpassen

Die Ladegeschwindigkeit auf mobilen Geräten ist langsamer als auf Desktops. Ändern Sie die Größe Ihrer Schaltflächen oder Bilder, damit Ihre E-Mails auf mobilen Geräten schneller geladen werden:

1. Klicken Sie auf das Symbol für mobile Geräte am oberen Rand Ihres Bildschirms, um die Option für den mobilen Modus aufzurufen.
2. Wählen Sie die Schaltfläche oder das Bild, dessen Größe Sie ändern möchten.
   
3. Geben Sie im Abschnitt Width (Breite) im linken Bereich die gewünschte Breite für Ihren Inhalt ein. Sie können die Größe in Prozent oder Pixel ändern, indem Sie auf das Dropdown-Menü neben % klicken.
   Wir empfehlen, die Breite Ihres Bildes zwischen 400 und 650 Pixel zu halten.

⏭️ Nächste Schritte

• Gestalten Sie für den Dunkelmodus geeignete E-Mails
• Test-E-Mail senden

🤔 Sie haben eine Frage?

Wenden Sie sich bei Fragen an unser Support-Team: Erstellen Sie einfach ein Ticket über Ihr Konto. Wenn Sie noch kein Konto haben, können Sie uns hier kontaktieren.

Wenn Sie Unterstützung bei einem Projekt mit Brevo suchen, können wir Sie mit dem richtigen zertifizierten Brevo-Expertenpartner zusammenbringen.