reptil1990/Ninjaserver

Fork 0

Files

Carsten Graf 58b5e6b074 Update

2025-09-23 14:13:24 +02:00

4.4 KiB

Raw Permalink Blame History

E-Mail-Client-Kompatibilität Guide

🚨 Problem: Farben sehen in E-Mail-Clients komisch aus

E-Mail-Clients sind sehr restriktiv mit CSS und unterstützen oft keine modernen Features. Hier sind die Lösungen:

❌ Was E-Mail-Clients NICHT unterstützen:

CSS-Features

Gradients (linear-gradient, radial-gradient)
Backdrop-Filter (backdrop-filter: blur())
Box-Shadow (komplexe Schatten)
Transforms (transform: translateY())
Custom Fonts (Google Fonts, Inter)
Flexbox/Grid (begrenzte Unterstützung)
CSS-Variablen (--custom-property)

Farben

Transparente Hintergründe (rgba() mit Alpha)
Komplexe Farbverläufe
Moderne CSS-Farben (HSL, etc.)

✅ E-Mail-Client-kompatible Alternativen:

1. Einfache Hintergrundfarben

/* ❌ Nicht kompatibel */
background: linear-gradient(135deg, #00d4ff, #0891b2);

/* ✅ Kompatibel */
background-color: #00d4ff;

2. Einfache Borders

/* ❌ Nicht kompatibel */
border: 1px solid rgba(51, 65, 85, 0.3);

/* ✅ Kompatibel */
border: 1px solid #334155;

3. Standard-Fonts

/* ❌ Nicht kompatibel */
font-family: 'Inter', sans-serif;

/* ✅ Kompatibel */
font-family: Arial, sans-serif;

4. Einfache Container

/* ❌ Nicht kompatibel */
background: rgba(30, 41, 59, 0.95);
backdrop-filter: blur(20px);

/* ✅ Kompatibel */
background-color: #1e293b;

🎨 Optimierte Farbpalette für E-Mail:

Hauptfarben

Hintergrund: #0a0a0f (Dunkelblau)
Container: #1e293b (Dunkelgrau)
Akzent: #00d4ff (Neon-Blau)
Text: #ffffff (Weiß)
Sekundärtext: #cbd5e1 (Hellgrau)

Status-Farben

Erfolg: #22c55e (Grün)
Warnung: #f59e0b (Orange)
Fehler: #ef4444 (Rot)
Info: #00d4ff (Blau)

📱 Responsive Design für E-Mail:

Media Queries

@media (max-width: 600px) {
    .email-container {
        margin: 0 10px;
    }
    
    .email-content {
        padding: 20px 15px;
    }
}

Mobile-First Approach

Max-Width: 600px für Container
Padding: Reduziert auf mobilen Geräten
Schriftgrößen: Angepasst für kleine Bildschirme

🔧 Template-Optimierungen:

1. Inline-CSS verwenden

<div style="background-color: #1e293b; padding: 20px;">
    Inhalt
</div>

2. Tabellen-Layout für komplexe Strukturen

<table width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td style="padding: 20px;">
            Inhalt
        </td>
    </tr>
</table>

3. Fallback-Farben definieren

background-color: #00d4ff; /* Fallback */
background: linear-gradient(135deg, #00d4ff, #0891b2); /* Modern */

📊 E-Mail-Client-Test-Matrix:

Client	Gradients	Backdrop-Filter	Box-Shadow	Custom Fonts
Gmail	❌	❌	❌	❌
Outlook	❌	❌	❌	❌
Apple Mail	✅	❌	✅	✅
Thunderbird	❌	❌	❌	❌
Yahoo Mail	❌	❌	❌	❌

🚀 Empfohlene Template-Struktur:

1. Kompatible Versionen erstellen

welcome-email-compatible.html - E-Mail-Client-optimiert
welcome-email.html - Moderne Browser-Version

2. Fallback-Strategien

HTML-Version für moderne Clients
Text-Version für einfache Clients
Kompatible HTML für E-Mail-Clients

3. Testing

Litmus oder Email on Acid für E-Mail-Testing
Verschiedene Clients testen
Mobile Geräte berücksichtigen

📝 Best Practices:

1. Einfache Struktur

Minimale CSS verwenden
Inline-Styles bevorzugen
Tabellen-Layout für komplexe Strukturen

2. Farben

Hex-Codes verwenden (#00d4ff)
Keine Transparenz (rgba() vermeiden)
Hoher Kontrast für Lesbarkeit

3. Typografie

Web-Safe Fonts verwenden
Fallback-Fonts definieren
Angemessene Schriftgrößen (mind. 14px)

4. Bilder

Alt-Text immer angeben
Optimierte Größen verwenden
Fallback-Farben definieren

🎯 Sofortige Lösung:

Verwende die kompatiblen Versionen der Templates:

welcome-email-compatible.html
reset-password-compatible.html

Diese verwenden nur E-Mail-Client-kompatible CSS-Features und sollten in allen Clients korrekt angezeigt werden.

Tipp: Teste immer in verschiedenen E-Mail-Clients, bevor du die Templates produktiv einsetzt! 📧✨

4.4 KiB Raw Permalink Blame History