Hierbei handelt es sich um einfaches Thema, bei dem man aber schnell viel falsch machen kann. Besonders im Hinblick auf Mobile Devices wie Smartphones ist es wichtig, dass der Newsletter korrekt gestaltet ist.
Generell gilt.
Je einfacher desto höher ist die Chance, dass dieser auf allen Geräten korrekt angezeigt wird.
Und weit wichtiger ist jedoch der Inhalt(!) Ihres Newsletters.
Beim Einfügen von Bildern in einen Newsletter (egal ob Magento oder nicht) gibt es verschiedene Dinge zu beachten. Ein Newsletter hat im Normalfall die Bilder selbst nicht als Teil der E-Mail. Das bedeutet der Newsletter beinhaltet normalen html Code über den die Bilder angezeigt werden. Die Bilder selbst liegen auf einer Website oder einem Webshop und der Newsletter verweist sozusagen nur darauf. Dies gilt es entsprechend im Hinterkopf zu behalten.
(1) Erreichbarkeit der Bilder
So dumm es sich anhört, die Bilder müssen natürlich auch von Extern, also dem Empfangsort der Newsletters, erreichbar sein. Wenn die Bilder z.B. nur in einem Admin-Bereich angezeigt werden können oder in einem Firmen Intranet sind, können diese nicht im Newsletter verwendet werden. Die entsprechende Bilder müssen wie eine normale Internetseite von überall auf der Welt ohne Passwort oder ähnliches erreichbar sein.
Häufige Fehler sind hier:
– Bilder liegen auf einem Server wo man sich zunächst anmelden muss.
– Bilder werden generiert und man hat die falsche url (sobald die url kryptisch aussieht, ist es vermutlich eine falsche). Die url ist somit nur für einen Besucher der Website gültig aber kann nicht verschickt werden. Kann man einfach testen in dem man einen anderen Browser verwendet und versucht die url aufzurufen.
(2) Bildgröße (px Maße)
Wie bei normaler Webprogrammierung sollten die Bilder die korrekte Größe haben. Wenn Sie z.B. im Newsletter Produktfotos darstellen wollen, sollten Sie evtl. nicht die „große Ansicht“ nehmen, sondern lieber Thumbnails. Die Thumbnails generiert Ihnen Ihr Shop an gewissen Stellen vermutlich automatisch und so brauchen Sie die Fotos auch nicht neu rausspeichern oder ähnliches.
(3) Dateigröße (Volumen)
Natürlich kann ein Bild in der korrekten Größe vorhanden sein, aber viel zu groß sein. Sie müssen bedenken, dass der Newsletter evtl. auch auf Smartphones empfangen wird oder von Personen ohne DSL Anschluss. Daher sollte auch der Bildgröße Rechnung getragen werden. Gibt es das Foto evtl. auch als Thumbnail? Ist es möglich das Foto zu verkleinern?
Besonders wenn es sich um Fotos handelt die rein für das Design des Newsletters, wichtig sind wie z.B. eine Art Banner, ist sollte dort 5-10 Minuten in die Komprimierung investiert werden. Es macht einen deutlich besseren Eindruck, wenn Ihr Newsletter sofort mit allen Bildern angezeigt wird und nicht erst noch die Bilder geladen werden müssen
(4) Alternativ Tags (alt Tag)
Die Bilder werden voraussichtlich bei vielen Empfängern nicht angezeigt werden. Dies hängt damit zusammen, dass Email-Clients in Mails enthaltende Inhalte wie Bilder meist blocken. Der Grund ist, dass mit solchen Medien viel Unfug betrieben werden kann und dies den Empfänger schützt.
Damit der Empfänger jedoch weiß, dass ihm etwas entgeht, können Sie die Alternativ Tags oder auch „Image Descriptions“ verwenden. Dort kann man gut einen Text platzieren wie „Bitte erlauben Sie das nachladen von Bilder“ oder auch eine kurze Beschreibung des Produktfotos z.B. „Traktor Marke super schnell im Einsatz – Bitte Bild nachladen erlauben“
(5) Verlinken der Bilder
Verlinken Sie die Bilder zur entsprechenden Landingpage oder zu der Seite wo die Bilder im Shop angezeigt werden. Der Empfänger kann so auf den Link klicken und landet beim Bild. Dies hat den großen Vorteil, dass selbst wenn kein Bild angezeigt wird, es einen kurzen Text gibt (siehe Punkt 4) und dieser Text sogar ein Link ist.
Weiter dient dies natürlich dazu, dass Besucher möglichst schnell Ihre Internetseite/Webshop besuchen
(6) Weite beachten“width“
Dies ist etwas was nicht generell gemacht werden sollte, aber Sie überlegen sollten. Wird Ihr Newsletter auch auf Smartphones empfangen? Wenn ja sollten Sie sich Gedanken machen, diesen für Mobile anzupassen. Wenn Sie normal ein Bild einfügen würde diese vermutlich die Bildschirmbreite eines Smartphones bei weitem sprengen. Daher macht es dort Sinn das Bild automatisch an der Breite des Gerätes auszurichten.
Eine Option wäre im html img tag das Attribut „width“ zu verwenden z.B.
<img width=“100%“ src=… >
Dies hat aber den großen Nachteil, dass wenn der Empfänger einen Widescreen Monitor (z.B. 27 Zoll) hat, das Bild riesig angezeigt wird.
Daher sollte man dort lieber mit etwas css arbeiten
<img style=“max-width:200px;“ width=“100%“ src… >
Über das max-width Attribut wird verhindert, dass das Bild zu groß wird. Die dort angegeben Angaben kann die exakte Breite des Bildes sein oder man testet wie weit das Bild vergrößert werden darf/kann ohne komisch auszusehen.
Wichtig ist, dass man die Höhe nicht vergeben braucht/darf. Wenn man die Höhe nicht vergibt, skalliert sich das Bild automatisch korrekt mit. Bei Vergabe einer Höhe würde es verzehrt werden.