Responsive E-Mail

[TecEye]

da hilft die vw und vh oder vmax das sind neue größen die sich der fenster breite bzw höhe anpassen.
Nutze ich für großflächige Symbole zB. Kann man aber auch für überschriften nutzen.
Die Unterstützung ist noch nicht sooooo verbreitet Can I use... Support tables for HTML5, CSS3, etc aber akzeptabel, kannst ja zur nocht n fallback auf die mindestgröße machen.

https://css-tricks.com/viewport-sized-typography/

ansonsten natürlich kannst du auch die media querys bemühen in stufen dann
[CODE]
#deinDIV{ font-size:50px; }
@media (max-width: 800px){ #deinDIV{ font-size:30px; } }
@media (max-width: 600px){ #deinDIV{ font-size:25px; } }
@media (max-width: 400px){ #deinDIV{ font-size:20px; } }
@media (max-width: 300px){ #deinDIV{ font-size:15px; } }
[CODE]
Je kleiner du das Fenster schiebst desto kleiner die Schrift Edit fiddle - JSFiddle

[mikdoe]

Das ist der absolute megaober Hammer. Danke Tec, du hast mich genau auf die richtige Spur gebracht. Und danke, dass du auch nachgebohrt hast und dran geblieben bist!!
Jetzt ist es perfekt responsive. Wusste garnicht dass es diese CSS Tags gibt
Echt Geil!!


Online anschauen und Browsergröße verändern: Test responsive E-Mail

[mikdoe]

Die Ernüchterung folgt auf dem Fuße. K-9 Android Mail kann das rechts oben nicht mit dem Bild und gleichzeitig Schrift. Fange also jetzt an, wieder in Richtung Steinzeit zurück zu bauen

Fehler gefunden, kann ihn aber nicht beheben. K-9 rafft rechts oben das height in der Einheit vmin zusammen mit width: 100% nicht. Das führt dazu, dass die Grafik garnicht skaliert wird.
Oder weiß da jemand zufällig eine Lösung für?
Ich würde das ja gern als Hintergrundbild belassen aber wie kann ich Skalierungsangaben für ein Hintergrundbild definieren?

[TecEye]

Immer gerne

Oh, dann kennt er die neuen Einheiten noch nicht
Nein bitte nur keine Steinzeit, man kann alles mit modernsten Mitteln lösen
dann solltest du eine kombination mit media querys machen und die schrift stufenweise verkleinern.
Und das design ist jetzt nicht bahnbrechend kompliziert, mach es mit DIVs, Tabelle ist so schrecklich, da kommt auch n weißer strich in der mitte beim skalieren :/

[mikdoe]

mit divs hab ich es nicht annähernd so gut hinbekommen wie mit der table

[TecEye]

naja ich würd sagen du bist einfach zu faul
gut da heute freutag ist und ich jetzt feierabend mache
bitteschön Edit fiddle - JSFiddle
an den verschiedenen Stufen darfst du am wochenende selber tüfteln

und bitteeeee, ein logo mit Hintergrundbild??? Sowas macht man in den gesamten header-container

[mikdoe]

danke dir aber im chrome sehe ich beide grafiken nicht.

[TecEye]

ich habs im chrome erstellt

- - - Aktualisiert - - -

mein Freund deine Bilder sind offline http://mikdoe.lima-city.de/images/logotest_rechts.png

- - - Aktualisiert - - -

dein Server ist down

[mikdoe]

ach herrje. stimmt. ist bei lima noch nie passiert. aber kost nix, da darf das passieren. dann schauen wir morgen nochmal. danke dir

[mikdoe]

Jetzt hab ichs anschauen können.
Hammer!
Jetzt gehts auch im K-9. Scheins hat das Ding die Probleme ursächlich mit Tabellen.

Nochmal Danke, TecEye!!

[TecEye]

Scheins hat das Ding die Probleme ursächlich mit Tabellen.

Tabellen sind ne Seuche, sollte man immer drauf verzichten und viel mehr Arbeit ist das auch nicht

Nochmal Danke, TecEye!!

Immer gerne
Wenn du das mit dem Hintergrund noch besser lösen magst, können wir auch ab 300 die überschrift unter das Logo packen. Gibt echt tolle Sachen - ich liebe HTML5/CSS3

- - - Aktualisiert - - -

Wie ich diese Wochenende leider feststellen musste löscht/ignoriert Gmail die <style> werte.
Hat mir ein Kunde berichtet und nach einem ernüchternden Test musste ich es bestätigen.
Inline funktioniert es wunderbar, natürlich funktionieren inline keine mediaquerys oder :hover angaben, liegt es an meine html-header?

$header  		= "MIME-Version: 1.0\r\n";
$header 		.= "Content-type: text/html; charset=iso-8859-1\r\n";
$header 		.= "From: ".$config_row['meta_title']." <".$config_row['stamm_email_from'].">\r\n";
$header 		.= "Reply-To: ".$config_row['meta_title']." <".$config_row['stamm_email_to'].">\r\n";
$header 		.= "X-Mailer: PHP ". phpversion();

[mikdoe]

Auf GMail käme es in meinem Fall nicht an. Mein Empfängerkreis würde entweder einen Webmailer verwenden oder einen lokal installierten Client wie z.B. Outlook.

liegt es an meine html-header?

Unterschiede zu meinem:

• ich verwende nirgendwo \r
• bei mir wird der charset ISO-8859-15 verwendet, weil ich das Eurozeichen hier und da verwende
• bei mir werden die Zeilen im Header auch Mime kodiert

Aber das Problem mit den Styles in Gmail würde ich nicht auf den Header zurückführen. Ich glaube einfach, die E-Mail Client Programmierer haben das nicht drauf in der Tiefe wie die Browserhersteller. Das kann man ja auch kaum noch leisten, wenn man sich mal anschaut, was es inzwischen alles gibt.

[TecEye]

ich denke es liegt eher daran, dass wenn du dann eine class in deinem stylesheet hast, welches genau den namen trägt den die zB auch verwenden, dass du deren Design zerschießt :/

- - - Aktualisiert - - -

bei mir werden die Zeilen im Header auch Mime kodiert

ehhhh what? Wie jede Zeile? Wie und wozu? Das wäre meine zweite Frage, in Gmail landen meine Mails im Spam, obwohl meines Erachtens keine Anzeichen dazu vorliegen.
Ich habe nur 60 Zeichen pro Zeile, ich habe Betreff über 10 Zeichen, einen vollständigen Header, Inhalt über 100 Zeichen. Was will Gmail von mir?

[mikdoe]

ich denke es liegt eher daran, dass wenn du dann eine class in deinem stylesheet hast, welches genau den namen trägt den die zB auch verwenden, dass du deren Design zerschießt :/

Ja, auch möglich.

Wie jede Zeile? Wie und wozu?

https://tools.ietf.org/html/rfc2047

Das wäre meine zweite Frage, in Gmail landen meine Mails im Spam, obwohl meines Erachtens keine Anzeichen dazu vorliegen.

Ist nicht von mir sondern aus einem meiner Hefte: auf den Spam Index kommen gerne Absender, die sich bei der Mailkodierung nicht an RFC's halten. Und bei Mails ist das ziemlich viel, was man da beachten muss.

Ich habe nur 60 Zeichen pro Zeile

bei quoted-printable sind 75 korrekt und der Umbruch muss stimmen: =\n
kommt aber drauf an, wie du den Content kodierst, da gibt es mehrere Möglichkeiten.

ich habe Betreff über 10 Zeichen

Der Header muss m.W. immer quoted-printable sein und da sind 75 Zeichen korrekt, hier lautet der Umbruch immer ?=\n

einen vollständigen Header

soweit ich weiß sind From und To Pflicht, sonst nichts.

[TecEye]

aus einem meiner Hefte

Beste Methode Hole mir immer die WebDeveloper und WebBooster, interessante Artikel hefte ich mir immer kategorisiert ab, manchmal besser als ein Buch was ich da an Schätzen habe, und man ist immer up2date.

Hatte leider noch keinen wertvollen Artikel über mailings, wärst du so gut und würdest mir deinen Aufbau mal postet

- - - Aktualisiert - - -

Bin bisschen vom Thema abgekommen, hoffe du kannst das abtrennen