Responsive E-Mail-Design: Ein Technischer Leitfaden

Über 60 % der E-Mails werden auf mobilen Geräten geöffnet. Responsive Design ist keine Option. Aber responsive E-Mail ist schwieriger als responsive Web. Die Unterstützung für Media Queries variiert. Flexbox funktioniert nicht. Sie sind auf Tabellen angewiesen.

Dieser Leitfaden behandelt Techniken, die tatsächlich über E-Mail-Clients hinweg funktionieren. Wenn Sie die Komplexität überspringen möchten, übernehmen Tools wie Sequenzy das responsive Verhalten automatisch in ihrem visuellen Builder.

Die Realität mobiler E-Mails

E-Mail-Clients auf Mobilgeräten behandeln responsive Designs unterschiedlich:

• Apple Mail (iOS): Volle Unterstützung für Media Queries, funktioniert wie ein Browser
• Gmail App: Unterstützt Media Queries seit 2016, aber mit Eigenarten
• Outlook App: Begrenzte Unterstützung für Media Queries
• Samsung Mail: Im Allgemeinen gute Unterstützung

Die Herausforderung besteht darin, für alle zu designen. Einige unterstützen Media Queries, andere nicht. Ihr Layout benötigt Fallbacks.

Fluide Layouts: Das Fundament

Beginnen Sie mit fluiden Breiten. Statt fester Pixelbreiten verwenden Sie Prozentsätze mit max-width-Einschränkungen:

<table role="presentation" width="100%" style="max-width: 600px;">
  <tr>
    <td style="padding: 20px;">
      Content flows to fill available width
    </td>
  </tr>
</table>

Das funktioniert überall. Auf dem Desktop ist die E-Mail 600px breit. Auf Mobilgeräten schrumpft sie, um auf den Bildschirm zu passen. Keine Media Queries erforderlich.

Media Queries zur Verbesserung

Media Queries ermöglichen es Ihnen, die Mobile-Erfahrung in unterstützenden Clients anzupassen:

<style>
  @media screen and (max-width: 600px) {
    .column {
      width: 100% !important;
      display: block !important;
    }
    .stack-on-mobile {
      display: block !important;
      width: 100% !important;
    }
    .hide-on-mobile {
      display: none !important;
    }
    .mobile-padding {
      padding: 10px !important;
    }
  }
</style>

Wichtige Techniken:

• Spalten stapeln: Neben-einander-Spalten in gestapelte Blöcke umwandeln
• Padding anpassen: Padding auf kleineren Bildschirmen reduzieren
• Elemente ausblenden: Sekundären Inhalt auf Mobilgeräten entfernen
• Bilder skalieren: Bilder volle Breite machen

Die !important-Deklarationen sind notwendig, da Inline-Styles hohe Spezifität haben.

Die Hybrid-/Spongy-Methode

Diese Technik verwendet bedingte Kommentare und CSS, um responsive Layouts ohne Media Queries zu erstellen:

<!--[if mso]>
<table role="presentation" width="600">
<tr>
<td width="300">
<![endif]-->

<div style="display: inline-block; width: 100%; max-width: 300px;">
  Column 1 content
</div>

<!--[if mso]>
</td>
<td width="300">
<![endif]-->

<div style="display: inline-block; width: 100%; max-width: 300px;">
  Column 2 content
</div>

<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->

Das erstellt nebeneinander liegende Spalten in Outlook (das die bedingten Kommentare liest) und gestapelte Spalten überall sonst (die die div-Elemente verwendet). Keine Media Queries benötigt.

Responsive Bilder

Bilder sollten sich mit ihren Containern skalieren:

<img src="image.jpg"
     width="600"
     style="display: block; max-width: 100%; height: auto;"
     alt="Beschreibung">

Das width-Attribut setzt die vorgesehene Größe. max-width: 100 % verhindert Überlauf. height: auto erhält das Seitenverhältnis.

Touch-freundliche Buttons

Mobile-Nutzer tippen, klicken nicht. Buttons benötigen ausreichende Größe:

<table role="presentation">
  <tr>
    <td style="background-color: #007bff; border-radius: 4px; padding: 12px 24px;">
      <a href="https://example.com"
         style="color: #ffffff; text-decoration: none; font-weight: bold; display: block;">
        Hier klicken
      </a>
    </td>
  </tr>
</table>

Minimale Touch-Zielgröße: 44x44 Pixel (Apple-Richtlinie). Mehr Padding ist besser als weniger.

Responsive Verhalten testen

Testen Sie auf realen Geräten, wenn möglich. Emulatoren und Vorschauen erfassen nicht alles:

• Test-E-Mails an Ihre eigenen Geräte senden
• Litmus oder Email on Acid für automatisierte Vorschauen verwenden
• Sowohl Hoch- als auch Querformat testen
• Mit deaktivierten Bildern überprüfen

Frameworks für Responsive verwenden

Frameworks wie MJML übernehmen responsive Design automatisch:

<mj-section>
  <mj-column>
    <mj-text>Column 1</mj-text>
  </mj-column>
  <mj-column>
    <mj-text>Column 2</mj-text>
  </mj-column>
</mj-section>

Dieses MJML kompiliert zu responsive HTML. Spalten stapeln sich auf Mobilgeräten automatisch. Keine manuellen Media Queries.

Visuelle Builder wie Sequenzy funktionieren ähnlich. Blöcke sind für responsive Verhalten vorkonfiguriert. Komponenten ziehen, Inhalt anpassen, das responsive Handling ist integriert.

Häufige Responsive-Muster

Einspaltig (Mobile-First)

Mit einem einspaltigen Layout beginnen. Es funktioniert überall und erfordert minimale responsive Anpassungen.

Zweispaltig zu Gestapelt

Nebeneinander auf Desktop, gestapelt auf Mobile. Das häufigste responsive Muster. Hybrid-Methode oder Media Queries verwenden.

Hero-Bild mit CTA

Vollbreites Bild gefolgt von zentriertem Text und Button. Funktioniert gut in jeder Größe. Bild skaliert, Text bleibt lesbar.

Das Wichtigste in Kürze

Responsive E-Mail ist machbar, erfordert aber Verständnis der Einschränkungen. Mit fluiden Layouts beginnen, mit Media Queries verbessern, wo unterstützt, und gründlich testen.

Wenn die technische Komplexität abschreckend ist, übernehmen Frameworks wie MJML oder Plattformen wie Sequenzy das für Sie. Der Output ist über Clients hinweg getestet, und responsive Verhalten ist in die Komponenten integriert.