Anna Yeaman vom kalifornischen E-Mail-Dienstleister Style Campaign veröffentlichte gestern in ihrem Blog eine tolle Möglichkeit, Grafiken automatisch auf eine passende Größe zu skalieren. Und zwar mit Hilfe von ein wenig Inline-CSS im IMG-Tag:
Die betreffende Grafik wird nun auf 90% ihrer Breite skaliert, damit links und rechts ein kleiner Rand bleibt. Die maximale Breite wird beschränkt auf 550 Pixel. So passt die Grafik sogar auf das schmale iPhone-Display:

Laut Anna Yeaman funktioniert diese Methode bei fast allen relevanten Smartphones. Auch fast alle anderen gängigen E-Mail-Clients kommen damit gut zurecht.
Der Einsatz flexibler Grafiken zwingt zu einem Umdenken beim E-Mail-Layouten: Gewöhnlich haben Inhaltsbereiche nämlich eine festgelegte Breite. Herunter gerechnete Grafiken werden dann wohlmöglich nach rechts verdrängt – es muss also wieder gescrollt werden. Mein Tipp:
- Verzichten Sie links auf einen festen Rand oder machen Sie diesen flexibel.
- Platzieren Sie Textinhalte nicht links – sondern stattdessen rechts von Grafiken.
- Noch besser: Sie verwenden nur eine große Grafik und platzieren sonstige Inhalte dadrunter. Die Breite des Contentbereichs sollte dann von der „dynamischen“ Kopfgrafik automatisch skaliert werden.
Wie immer gilt: Testen, testen, testen!
Quelle: Stly Campaign






Kommentare