Zum Hauptinhalt springen

CSS Best Practices für E-Mail-Vorlagen

Das Erstellen effektiver CSS-Vorlagen für E-Mails erfordert ein Verständnis der Einschränkungen und Eigenheiten von E-Mail-Clients. Dieser Leitfaden hilft Ihnen, CSS zu schreiben, das zuverlässig in Gmail, Outlook, Apple Mail und anderen wichtigen E-Mail-Clients funktioniert.

tipp

Typemail inline automatisch Ihr CSS und wendet E-Mail-spezifische Optimierungen mit Juice an, um maximale Kompatibilität zu gewährleisten.

✅ Empfohlene Praktiken​

1. Verwenden Sie Spezifische Selektoren​

✅ Gut:

.email-container {
  max-width: 600px;
  margin: 0 auto;
}

h1 {
  color: #333333;
  font-size: 28px;
}

.button {
  background-color: #0066cc;
  padding: 12px 24px;
}

❌ Vermeiden:

* {
  font-family: Arial;  /* Universal-Selektor beeinflusst alles */
}

div {
  margin: 10px;  /* Zu generisch, schwer zu überschreiben */
}

2. Minimieren Sie die Verwendung von !important​

✅ Gut:

.primary-button {
  background-color: #0066cc;
  color: white;
}

/* Verwenden Sie !important nur für kritische Überschreibungen */
@media screen and (max-width: 600px) {
  .mobile-hide {
    display: none !important;
  }
}

❌ Vermeiden:

p {
  margin: 16px !important;
  color: #333 !important;
  font-size: 16px !important;
}

3. Vermeiden Sie Externe Ressourcen​

❌ Niemals verwenden:

@import url('https://fonts.googleapis.com/css?family=Roboto');

.background {
  background-image: url('https://example.com/bg.jpg');
}

✅ Stattdessen:

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* Verwenden Sie data URLs oder Inline-Bilder in HTML für kritische Grafiken */

4. Verwenden Sie Gut Unterstützte Eigenschaften​

✅ Gut Unterstützt:

.text {
  color: #333333;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin: 16px 0;
  padding: 10px;
  background-color: #f5f5f5;
  border: 1px solid #dddddd;
  border-radius: 4px;
}

⚠️ Eingeschränkte Unterstützung:

.element {
  position: fixed;  /* Nicht unterstützt in den meisten E-Mail-Clients */
  position: absolute;  /* Sehr eingeschränkte Unterstützung */
  transform: rotate(45deg);  /* Inkonsistente Unterstützung */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);  /* Funktioniert in einigen Clients */
}

5. Barrierefreie Schriftgrößen​

✅ Empfohlen:

body {
  font-size: 16px;  /* Basisgröße */
}

h1 {
  font-size: 28px;  /* Groß und lesbar */
}

p {
  font-size: 16px;  /* Niemals unter 14px für Haupttext */
}

.small-text {
  font-size: 14px;  /* Minimum für Lesbarkeit */
}

❌ Vermeiden:

.tiny {
  font-size: 8px;  /* Unleserlich auf Mobilgeräten */
}

.micro {
  font-size: 6px;  /* Verstoß gegen Barrierefreiheit */
}

⚠️ Einschränkungen von E-Mail-Clients​

Animationen & Übergänge​

❌ Vermeiden:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animated {
  animation: fadeIn 1s;
  transition: all 0.3s;
}
warnung

CSS-Animationen werden in den meisten E-Mail-Clients, einschließlich Outlook und Gmail, nicht unterstützt. Sie werden einfach ignoriert.

Positionierung​

❌ Vermeiden:

.fixed-header {
  position: fixed;  /* Funktioniert nicht in E-Mails */
  top: 0;
}

.absolute-badge {
  position: absolute;  /* Sehr eingeschränkte Unterstützung */
  right: 10px;
}

✅ Verwenden Sie stattdessen:

/* Verwenden Sie tabellenbasierte Layouts für komplexe Positionierung */
.container {
  display: block;
  position: relative;  /* Sicherere Alternative */
}

Flexbox & Grid​

⚠️ Eingeschränkte Unterstützung:

.flex-container {
  display: flex;  /* Funktioniert in Apple Mail, nicht in Outlook */
  justify-content: space-between;
}

.grid {
  display: grid;  /* Sehr eingeschränkte Unterstützung */
}

✅ Zuverlässige Alternative:

/* Verwenden Sie Tabellen für das Layout (ja, wirklich!) */
table {
  width: 100%;
  border-collapse: collapse;
}

td {
  vertical-align: top;
}

📱 Responsive Design​

Media Queries​

✅ Empfohlener Ansatz:

/* Basisstile (mobile-first) */
.container {
  width: 100%;
  padding: 10px;
}

/* Desktop-Stile */
@media screen and (min-width: 600px) {
  .container {
    width: 600px !important;
    padding: 20px !important;
  }
  
  .mobile-only {
    display: none !important;
  }
}
tipp

Behalten Sie Media Queries in <style>-Tags (Typemail bewahrt sie automatisch). Verwenden Sie !important in Media Queries für bessere Kompatibilität.

Mobile-Friendly Muster​

/* Gestapeltes Layout auf Mobilgeräten */
@media screen and (max-width: 600px) {
  .column {
    width: 100% !important;
    display: block !important;
  }
  
  /* Vergrößern Sie Touch-Ziele */
  .button {
    min-height: 44px !important;
    padding: 14px 20px !important;
  }
  
  /* Vergrößern Sie Abstände */
  h1 {
    font-size: 24px !important;
    margin: 16px 0 !important;
  }
}

🎨 Farbe & Typografie​

Sichere Farbformate​

✅ Verwenden:

.element {
  color: #333333;  /* Hex */
  background-color: rgb(51, 51, 51);  /* RGB */
  border-color: rgba(0, 0, 0, 0.1);  /* RGBA (gute Unterstützung) */
}

⚠️ Vermeiden:

.element {
  color: hsl(0, 0%, 20%);  /* HSL hat inkonsistente Unterstützung */
  background: linear-gradient(to right, #000, #fff);  /* Eingeschränkte Unterstützung */
}

Schriftarten-Stacks​

✅ Empfohlen:

body {
  /* Systemschriften (universell verfügbar) */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
               Helvetica, Arial, sans-serif;
}

.serif {
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.mono {
  font-family: 'Courier New', Courier, monospace;
}

🔧 Häufige Muster​

Schaltflächen​

.button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #0066cc;
  color: #ffffff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
}

.button:hover {
  background-color: #0052a3;  /* Hover funktioniert in einigen Clients */
}

Tabellen​

table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

th {
  background-color: #f5f5f5;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  border: 1px solid #dddddd;
}

td {
  padding: 12px;
  border: 1px solid #dddddd;
}

Container​

.email-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
  font-family: Arial, sans-serif;
}

🧪 Test-Empfehlungen​

  1. Testen Sie in wichtigen Clients:

    • Gmail (web, iOS, Android)
    • Outlook (2016, 2019, 365, web)
    • Apple Mail (macOS, iOS)
    • Yahoo Mail
    • Thunderbird

  2. Verwenden Sie Validierungs-Tools:

  3. Überprüfen Sie auf Geräten:

    • Desktop (verschiedene Bildschirmgrößen)
    • Mobilgeräte (iOS und Android)
    • Dunkler Modus vs. heller Modus

📚 Zusätzliche Ressourcen​

Brauchen Sie Hilfe?

Wenn Sie sich bei einer bestimmten CSS-Eigenschaft unsicher sind, prüfen Sie Can I Email für Kompatibilitätsinformationen.