182 lines
4.4 KiB
Markdown
182 lines
4.4 KiB
Markdown
# 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
|
|
```css
|
|
/* ❌ Nicht kompatibel */
|
|
background: linear-gradient(135deg, #00d4ff, #0891b2);
|
|
|
|
/* ✅ Kompatibel */
|
|
background-color: #00d4ff;
|
|
```
|
|
|
|
### 2. Einfache Borders
|
|
```css
|
|
/* ❌ Nicht kompatibel */
|
|
border: 1px solid rgba(51, 65, 85, 0.3);
|
|
|
|
/* ✅ Kompatibel */
|
|
border: 1px solid #334155;
|
|
```
|
|
|
|
### 3. Standard-Fonts
|
|
```css
|
|
/* ❌ Nicht kompatibel */
|
|
font-family: 'Inter', sans-serif;
|
|
|
|
/* ✅ Kompatibel */
|
|
font-family: Arial, sans-serif;
|
|
```
|
|
|
|
### 4. Einfache Container
|
|
```css
|
|
/* ❌ 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
|
|
```css
|
|
@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
|
|
```html
|
|
<div style="background-color: #1e293b; padding: 20px;">
|
|
Inhalt
|
|
</div>
|
|
```
|
|
|
|
### 2. Tabellen-Layout für komplexe Strukturen
|
|
```html
|
|
<table width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="padding: 20px;">
|
|
Inhalt
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
```
|
|
|
|
### 3. Fallback-Farben definieren
|
|
```css
|
|
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! 📧✨
|