html-Mail

[Minimalist]

Hallo Ihr lieben :)

Ich brauche bitte Hilfe... Ich bin dabei mir einen neuen E-Mail-Footer für Outlook zu erstellen, habe allerdings keine Ahnung wie ich meine Vorstellungen umsetzen soll...

Bei meinem CD ist ein festes Element, dass ein Teil vom Logo immer links aus dem Satzspiegel herausragt. Das ist so beim Briefbogen, der Geschäftskarte, den AGB, in Angeboten... Hier mal ein Ausschnitt aus den AGB:

Meine Vorstellung ist jetzt, dass (html!)-Mails ebenfalls ein solches Layout haben sollen. Lässt sich so was irgendwie basteln? Das Logo in zwei Grafiken aufteilen, eine 2×2-Tabelle, ein der "Links oben" irgendwie für den Cursor gesperrt ist, "Rechts oben" der Text rein kommt, "Links unten" die Farbstrahlen sind und "Rechts unten" der Rest vom Logo und meine Daten als Text?

Wenn mir jemand auf die Sprünge helfen kann bin ich wirklich dankbar :D Habe leider von html keine Ahnung...

Gruß aus dem tauenden Frankfurt

minimalist

[Ralf Herrmann]

Klar, ist spielend einfach möglich. Aber ein bisschen HTML musst du schon beherrschen, um den Code schreiben zu können.

Tabellen würde man heutzutage eigentlich nicht mehr nehmen. Typisch wären 2 DIV-Container. Der obere enthält das Bild, der untere den Text und ist eben entsprechend mit margin-left oder padding-left eingerückt.

[Minimalist]

Danke für die rasend schnelle Antwort :D

-hehe- Spielend einfach ist relativ... ;) Gibt es für so was irgendwo ein Beispiel/eine Anleitung, wo ich mir das abschauen kann? Mir rollen sich nämlich ehrlich gesagt schon bei den Begriffen in Deiner Antwort die Fußnägel etwas auf... Wenn man halt von etwas noch so gar keine Ahnung hat... Spontan drängt sich mir die Frage auf, ob der Weg den Du beschrieben hast "Layoutsicher" ist, also ob der Text sich dann auch mit seiner Kante wirklich pixelgenau an der Kante von "Ron Winter..." orientiert und nicht etwa bei unterschiedlichen Auflösungen irgendwo in der Gegend rumgondelt oder so...?

[Ralf Herrmann]

Ja, das geht pixelgenau, da das Bild ja 1 zu 1 abgebildet wird und der Abstand nach links auch in Pixeln angegeben werden kann. Ein Beispiel oder Tutorial genau dafür wirst du nicht finden. Es ist eben klassisches Webdesign und hat mit der E-Mail-Funktion nur bedingt etwas zu tun. Ein guter Platz zum Nachschlagen ist immer das hier: http://de.selfhtml.org/

Wobei beim Thema HTML-Mails gewarnt sei, dass die E-Mail-Clients den Code gern mal unterschiedlich interpretieren. Also immer schön durchtesten.

[Minimalist]

Oh je... Ich habe so eine Ahnung, womit ich mir die nächsten paar Nachmittage und Abende die Zeit vertreiben werde.. ;) Danke für den Link :)

Hast Du vielleicht auch noch eine Ressource zum Thema Clients, vorzugsweise im Firmenbereich? Also, wie viele Unternehmen prozentual gesehen mit Outlook arbeiten, wie viele mit Lotus, vielleicht noch nach Versionen aufgegliedert?

Und wenn ich schon mal dabei bin den Bogen zu überspannen, gab es nicht auch eine Quelle die regelmäßig die Verbreitung von Systemfonts überprüft und die Ergebnisse veröffentlicht hat? :) Ich meine ich hätte so was im Web mal gesehen...

Lieben Gruß

[Ralf Herrmann]

Verbreitung:

http://www.campaignmonitor.com/stats/email-clients/

CSS-Unterstützung:

http://www.campaignmonitor.com/css/

[Minimalist]

Danke :D

Krass... Grad mal knapp 40% die Outlook verwenden, und kaum jemand mit Lotus... hätte ich nie gedacht... Echt aufschlussreich, danke :)

[Minimalist]

Hmmm...

Bring back tables

As much as we all hate it the reality is that email standards have taken a giant leap backwards in recent years. While we can all work to increase email standards support it’s not going to be an overnight process.

So if you need to do anything more complex than a single column, you will find you need to use structural tables. Outlook 2007, for example, has little support for floats. A simple table will keep everything together…how very 1998!

Also doch ne Tabelle, oder ist das Deiner/eurer Meinung nach bei dem was ich vorhabe irrelevant?

[Ralf Herrmann]

Du hast ja nur eine Spalte und brauchst nix zu »floaten«.

[Minimalist]

Aha aha aha... Alle Klarheiten beseitigt, ich werd mich erst mal in selfhtml vertiefen müssen, bevor ich weiter dumme Fragen stelle... ;)

[Alfons]

Ich hab mal schnell ein paar Zeilen Code geschrieben wie es aussehen könnte. (viele Wege führen natürlich nach Rom.) Ich habe es mit Thunderbird ausprobiert. Bei dem muss man nur die html-tags die in den BODY Bereich kommen mit der "Insert html" Funkion in ein neues Email hineinkopieren. Also kein <!DOCTYPE, <head>, <body> und solche html Konstrukte. Es kann gleich mit <div> beginnen.

Hoffe natürlich ich habe verstanden was du beabsichtigst. :?

Nachtrag: Der erste DIV container ist nicht abgeschlossen. Das "</div>" fehlt.

entwurf.html.zip

[Minimalist]

Ich hab mal schnell ein paar Zeilen Code geschrieben wie es aussehen könnte. (viele Wege führen natürlich nach Rom.) Ich habe es mit Thunderbird ausprobiert. Bei dem muss man nur die html-tags die in den BODY Bereich kommen mit der "Insert html" Funkion in ein neues Email hineinkopieren. Also kein <!DOCTYPE, <head>, <body> und solche html Konstrukte. Es kann gleich mit <div> beginnen.

Hoffe natürlich ich habe verstanden was du beabsichtigst. :?

Mann Alfons, vielen Dank! :D

Ich habe die Datei jetzt nur mal in Opera geöffnet... da ist dann das "Logo" aber auch nach rechts verrückt... also hab ich mal den ersten Container mit "</div>" geschlossen... ist das richtig so? :) Jedenfalls tut es jetzt anscheinend das was ich möchte :)

Wenn das bis hierhin stimmt, dann muss ich jetzt anstelle Deines "Dummylogos" die Grafik einbinden, die korrekte Pixelanzahl für "Padding" abzählen und ersetzen, und untendrunter noch einen Container mit den Kontaktdaten und so erstellen, richtig? :)

Vielen Dank für eure Hilfsbereitschaft! :D

[Minimalist]

-grummelbrummel- Also, Outlook 2007 unterstützt diese Padding-Geschichte nicht :( Die Google-Suche meint, dass es wohl doch Tabellen sein müssen :(

Und davon abgesehen scheint das Pfade-Angeben für einzubindende Grafiken bei Outlook auch etwas ganz besonderes zu sein... ich bekomm es jedenfalls nicht hin...

Mann, Layouts anlegen mit einer Beschreibungssprache macht Laune...

Hat noch jemand einen Ratschlag für mich?

[Alfons]

... also hab ich mal den ersten Container mit "</div>" geschlossen... ist das richtig so?

Ja, den habe ich vergessen abzuschliessen. Mehr kann ich im Moment nicht sagen, Outlook habe ich erst Morgen in der Firma wieder.

Grüsse Alfons

[Minimalist]

Also, ich musste die ganze Planung jetzt umschmeissen... Outlook 2007 unterstützt wie gesagt die ganzen CSS-Möglichkeiten die ich bräuchte gar nicht... Ich habe also auf Tabelle umgestellt... Und da ich das Logo mitgesendet haben wollte, und nicht verlinkt zum Download, ist anscheinend die beste Variante, das Layout in Word zu erstellen und mit Copy/Paste in den Outlook-eigenen Signatureditor zu übertragen... -grusel-

Die Mail wird durch den tollen Code den Word erzeugt natürlich nicht besonders klein, und es ist keine elegante Lösung, aber bisher das beste was ich zustande gebracht hab...

Jetzt muss ich noch rausfinden wie ich Outlook daran hindere, meine Tabelle bei ner kleinen Auflösung zusammen zu stauchen anstatt nen horizontalen Scrollbalken anzuzeigen, und dann kann man es zumindest optisch so lassen... Was nicht heißt das es ne ideale Lösung wäre... -soifz-

[RobertMichael]

sobal dir einer antwortet der kein html unterstützt, z.b. aus gmx heraus ist das sowieso

alles hinfällig.

[Minimalist]

Ja, das ist klar :D Das Layout richtet sich natürlich nur an Leute die auch html-Mails empfangen... Aber die sollen eben auch was schönes sehen, wenn sie schon die entsprechende Software haben, beziehungsweise die entsprechenden Optionen aktiviert haben ;)

Übrigens, offtopic, nochmal zum Briefbogen... Kannst Du aktivieren dass ich Dir hier eine Mail schreiben kann, dass ich Dir das pdf einfach zusende? Der Thread scheint hier sonst ohnehin nicht auf viel Beteiligung zu stoßen :)