Hallo Ambrosch,
deine Frage ist sehr relevant, denn E-Mail-Design und speziell Outlook sind berüchtigt dafür, dass sie CSS oft nur eingeschränkt oder anders unterstützen als Webbrowser.
1. Responsives HTML-E-Mail mit Dreamweaver erstellen
Dreamweaver kann grundsätzlich HTML-E-Mails erstellen, aber es gibt einige Einschränkungen:
- Du kannst HTML und CSS schreiben, aber die Darstellung in E-Mail-Clients ist stark unterschiedlich.
- Für responsives Design nutzt man meist Media Queries, aber nicht alle E-Mail-Clients unterstützen Media Queries, vor allem ältere Outlook-Versionen.
2. Unterstützung von CSS in Outlook
Outlook nutzt auf Windows für die Darstellung oft die Microsoft Word Rendering Engine, was bedeutet:
- Kein oder sehr eingeschränkter Support für viele CSS-Eigenschaften, speziell für CSS-Positionierung, Hintergrundbilder und Media Queries.
- Inline-CSS wird besser unterstützt als eingebettetes oder externes CSS.
3. Hintergrundgrafiken in Outlook
Outlook unterstützt keine CSS-Hintergrundbilder in der üblichen Weise. Für Hintergrundbilder benutzt man häufig sogenannte „VML“-Techniken (Vector Markup Language), die speziell für Outlook erstellt wurden. Das ist komplex, aber notwendig für volle Kompatibilität.
4. Gibt es eine Lösung?
- Nutze für den Hintergrund in Outlook VML-Code.
- Schreibe möglichst viel CSS inline.
- Vermeide komplexe CSS, setze auf Tabellenlayouts (oldschool, aber funktioniert).
- Teste mit Tools wie Litmus oder Email on Acid, um die Darstellung in verschiedenen Clients zu überprüfen.
- Es gibt Frameworks wie MJML oder Foundation for Emails, die dir helfen, responsives E-Mail-Design zu erstellen, das Outlook besser unterstützt.
