Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] HTML - Newsletter - Design zerschossen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] HTML - Newsletter - Design zerschossen

    Moin,

    habe einen HTML-Newsletter geschrieben.

    =>
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <style type="text/css">
    * { margin:0px; padding:0px; font-family:arial; }
    #background {
    background:url('http://newsletter/nlhg.jpg');width:700px;
    }
    #newsletter {
    font-size:25px;float:right;color:black;margin:30px 20px;
    }
    .textbox1 {
    background:url('http://newsletter/hgsmall.jpg');width:450px;height:200px;margin-top:10px;padding:10px;font-size:14px;float:left;
    }
    .textbox2 {
    background:url('http://newsletter/hgsmall.jpg');width:450px;height:200px;margin-top:10px;padding:10px;font-size:14px;float:right;
    }
    .headline1 {
    background-color:black;
    color:white;
    clear:both;
    margin-top:10px;
    padding-left:10px;
    font-size:12px;
    font-weight:bold;
    height:14px;
    }
    .headline2 {
    background-color:black;
    color:white;
    margin-top:10px;
    padding-right:10px;
    font-size:12px;
    font-weight:bold;
    text-align:right;
    height:14px;
    }
    #content {
    margin:10px;
    }
    #logo {
    float:left;margin-top:10px;
    }
    #info {
    font-size:11px;
    text-align:center;
    margin-top:10px;
    clear:both;
    background-color:#5C5C5C;
    color:white;
    }
    .image2 {
    float:right;
    height:220px;
    width:199px;
    margin-top:10px;
    margin-right:10px;
    }
    .image1 {
    float:left;
    height:220px;
    width:199px;
    margin-top:10px;
    margin-left:10px;
    }
    .clear {
    clear:both;
    }
    #footer {
    margin-top:10px
    }
    </style>
    </head>
    <body>
    <div id="background">
    <div id="content">
    <img src="http:///newsletter/headernl.jpg" alt="" style="margin-top:10px"/>
    <div class="headline'.$hl.'">'.$this->headlines[$i].'</div>
    <div class="textbox'.$hl.'">'.$this->text[$i].'</div>
    <img src="http://newsletter/nlpics/'.$this->files[$i].'" class="image'.$hl.'" alt=""/>
    <div class="clear"></div>
    <img src="http:///newsletter/footer.jpg" alt="" id="footer"/>
    <p id="info"><a href='http://www..com'>Link zur Homepage</a>  l  Tel.   l  Bitte klicken Sie <a href="http://www/newsletter-abmelden22.html">hier</a> , um den Newsletter abzubestellen</p>
    </div>
    </div>
    </body>
    </html>
    Im Thunderbird wird bei mir alles korrekt dargestellt, habe aber nun eine Meldung von jemandem bekommen, dass das Design total zerschossen aussieht ( Float scheint nicht zu klappen ).

    Ist das normal das manche ( viele ? ? ) E-Mail Programme kein float kennen ?

    Die schwarzen Linien mit den Überschriften gehen einfach über die ganze Länge und nicht wie vorgesehen nur in dem 700px großen Bereich, die Bilder sind unter dem Text, der Text hat keinen Hintergrund / keine feste Größe.

    Würde mich über Hilfe freuen.

    Danke
    MfG
    Destruction
    "Dummheit redet viel..Klugheit denkt und schweigt.." [Amgervinus]

  • #2
    Verschiedene Mailclients können keinen CSS code, der mit <style> </style> definiert ist interpretieren. Um alle Clients zu erreichen, musst du den CSS-Code direkt in den HTML-Code integrieren (mir fällt grade der Fachbegriff nicht ein, ich meine sowas: <p style="....">)
    Die HTML-Mails, die ich bekomme, haben alle ein Tabellendesign.
    [PHP]if ($var != 0) {
    $var = 0;
    }[/PHP]

    Kommentar


    • #3
      Zitat von Wolla Beitrag anzeigen
      Verschiedene Mailclients können keinen CSS code, der mit <style> </style> definiert ist interpretieren. Um alle Clients zu erreichen, musst du den CSS-Code direkt in den HTML-Code integrieren (mir fällt grade der Fachbegriff nicht ein, ich meine sowas: <p style="....">)
      Die HTML-Mails, die ich bekomme, haben alle ein Tabellendesign.
      Das hatte ich schon vermutet / gehofft !
      Ja das mit dem Tabellendesign wäre dann meine 2. Option gewesen die ich jetzt eigentlich umsetzen wollte.

      Also biste dir sicher dass das so klappen sollte mit style= "" ?

      Danke
      Grüße
      "Dummheit redet viel..Klugheit denkt und schweigt.." [Amgervinus]

      Kommentar


      • #4
        Zitat von Destruction Beitrag anzeigen
        Also biste dir sicher dass das so klappen sollte mit style= "" ?
        Wenn überhaupt, dann so.

        Aber auch da kannst du nicht davon ausgehen, dass alle Eigenschaften überall unterstützt werden.
        Und wenn die Mail über ein Webmail-Interface angezeigt werden, dann filtern die Anbieter da noch rigoroser, weil du ja nicht mit dem Layout deiner Mail das Layout der darum liegenden Seite zerstören können sollst ...


        HTML-E-Mail ist sowieso eine Unsitte - text/plain ist da das wesentlich angenehmere Format, m.E.
        Wer doch unbedingt Produktinfos o.ä. „stylisch“ präsentieren will, der kann in der Mail einen Link auf eine entsprechende Seite einbauen.
        [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

        Kommentar


        • #5
          Zitat von ChrisB Beitrag anzeigen
          HTML-E-Mail ist sowieso eine Unsitte - text/plain ist da das wesentlich angenehmere Format, m.E.
          Wer doch unbedingt Produktinfos o.ä. „stylisch“ präsentieren will, der kann in der Mail einen Link auf eine entsprechende Seite einbauen.
          Habe ich versucht demjenigen auch zu sagen, aber der wollte nicht hören und will das so haben :/ :/
          "Dummheit redet viel..Klugheit denkt und schweigt.." [Amgervinus]

          Kommentar


          • #6
            Ich glaube der Fachbegriff dafür nennt sich inline CSS. Das heist die CSS Codes direkt in die HTML Tags zu schreiben also so hier.

            Code:
            <div style="float: left;">
            
            </div>
            Und so eiter das durch alle Tags.

            Gruß litter
            Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
            [URL]http://www.lit-web.de[/URL]

            Kommentar


            • #7
              Jop... habs jetzt mal so gemacht.
              Mal schauen obs jetzt bei allen klappt. Werde euch morgen noch mal bescheid geben.

              Vielen Dank für die Tipps.

              cu
              Grüße
              Destruction
              "Dummheit redet viel..Klugheit denkt und schweigt.." [Amgervinus]

              Kommentar


              • #8
                HTML in E-Mails ist eh so eine Sache. Thunderbird ist da noch mit einer der Besten, die meisten anderen verstehen aber kaum CSS, vor allem mit floats hast du so deine liebe Mühe, ob inline oder nicht. So rendert Outlook z.B. (ja, sogar in der neuen Version 2010) sein HTML immer noch über den Word-HTML-Parser und nutzt nicht die Rendering-Engine des IE.
                Wenn du wirklich E-Mails layouten willst, dann musst du Tabellen nutzen, so grausam und unsäglich es ist (das ist auch ein Grund, warum ich keine HTML-E-Mails verschicke neben dem, dass ich bunte E-Mails sowieso nur in sehr wenigen Fällen ausstehen kann).
                Hier mal ein CSS-Tricks-Video über HTML-E-Mails: #30: Creating and Sending HTML Email
                Refining Linux: “[url=http://www.refining-linux.org/archives/65/Performing-push-backups-Part-1-rdiff-backup/]Performing Push Backups – Part 1: rdiff-backup[/url]”

                Kommentar


                • #9
                  Was oft gemacht wird ist, eben nur der Link zum entsprechenden Newsletter in einer Textemail zu versenden. Das hat nicht nur den Vorteil, dass es ne ganze normale Webseite ist und man die Inhalte des Newsletters noch NACH versenden verändern kann (kann einem manchmal den Arsch retten) sondern bringt dir die Möglichkeit die Newsletter auch zu tracken, also zu sehen WER ruft den Newsletter auf (über den Cookie der sowieso bei der Webseite gesetzt ist) und du die Zugriffszahlen sicher mitloggen kannst.

                  Sind alles Vorteile ... vlt. kannst du deinen Auftraggeber noch überzeugen.

                  Kommentar


                  • #10
                    Zitat von Flor1an Beitrag anzeigen
                    Was oft gemacht wird ist, eben nur der Link zum entsprechenden Newsletter in einer Textemail zu versenden. Das hat nicht nur den Vorteil, dass es ne ganze normale Webseite ist und man die Inhalte des Newsletters noch NACH versenden verändern kann (kann einem manchmal den Arsch retten) sondern bringt dir die Möglichkeit die Newsletter auch zu tracken, also zu sehen WER ruft den Newsletter auf (über den Cookie der sowieso bei der Webseite gesetzt ist) und du die Zugriffszahlen sicher mitloggen kannst.

                    Sind alles Vorteile ... vlt. kannst du deinen Auftraggeber noch überzeugen.
                    Stimmt das ist eine sehr gute Begründung!
                    Danke auch Manko10 für deinen Link.

                    Schaue mir das gerade an.

                    Sehr gut gemacht das Video.

                    Vielen dank euch allen

                    Grüße
                    "Dummheit redet viel..Klugheit denkt und schweigt.." [Amgervinus]

                    Kommentar


                    • #11
                      Werbeagenturen wollen halt HTML-Newsletter. Und das hat auch einen Grund: Die Klickrate bei HTML-Lettern ist deutlich höher als bei reinen Textmails. außerdem wird in die HTML-Mails ein Trackercode eingebaut.
                      Wichtig ist halt, dass man per Multipart noch einen Plain/Text-Teil mitliefert, damit auch die Leute etwas lesen können, die in ihren Clients kein HTML zulassen.
                      [PHP]if ($var != 0) {
                      $var = 0;
                      }[/PHP]

                      Kommentar


                      • #12
                        @Flor1an mit externen Grafiken lässt sich aber auch schon gut tracken. Die meisten Mailclients blockieren externe Grafiken zwar zunächst (was nicht immer schön aussieht, aber zum Schutze der Privatsphäre sehr nützlich ist), aber wer bereit ist, einem Link zu folgen, um zu einer Webansicht zu gelangen, ist meist erst recht bereit, externe Grafiken anzeigen zu lassen.
                        Ich für meinen Teil würde hier, wenn Designmails wirklich gefordert sind, eine Multipart-Mail senden, einmal mit HTML-Content, einmal mit Textcontent, wobei der HTML-Teil entweder mit Tabellen komplett durchgestylt ist oder ein grundlegendes Layout bietet. Über einen Link (der auch dem Textcontent angefügt werden kann), kann dann die Vollansicht im Web abgerufen werden.
                        Refining Linux: “[url=http://www.refining-linux.org/archives/65/Performing-push-backups-Part-1-rdiff-backup/]Performing Push Backups – Part 1: rdiff-backup[/url]”

                        Kommentar


                        • #13
                          Eine textmail, die nur einen Link zu einer auf einem Server liegenden HTML-"Mail" enthält, ist unsinnig.

                          a)
                          1) Man muss mit der mail einen Riesendisclaimer mitschicken, in dem der Empfänger nachlesen kann, warum er die mail bekommt
                          2) Man muss das Impressum des Sendenden mitschicken
                          3) Man muss einen Link zu einer Unsubscribe-Seite mitsenden

                          Das Ganze macht dann locker 10 cm Höhe in der Mail aus. Da geht der kleine Link am Anfang der Mail unter.

                          b) In der Mail will man ja was verkaufen. Wenn der Mailtext für den Empfänger interessant ist, dann wird er klicken und z.B. zu einem Shop gehen. Eine Klickaufforderung: "Es ist ein Emailtext für Sie hinterlegt: Hier klicken: http://www.dershopserver.de/emails/20100722/mail.php" wird niemanden animieren.

                          c) Und falls man mit obigem Text doch jemand zum Klicken bewegt, dann kann man den auch gleich in den Shop beamen und nicht erst noch auf eine Zwischenseite.
                          [PHP]if ($var != 0) {
                          $var = 0;
                          }[/PHP]

                          Kommentar


                          • #14
                            Code:
                            <html>
                            <head>
                            <style type="text/css">
                            * { margin:0px; padding:0px; font-family:arial; }
                            </style>
                            </head>
                            <body marginleft="0" margintop="0" marginwidth="0" marginheight="0" offset="0">
                            <table width="700" background="http://.img/nlhg.jpg" cellpadding="0">
                            <tr valign="top"><td><table style="padding:0px 10px;"><tr><td><img src="http://.img/headernl.jpg" alt="" /></td></tr></table></td></tr>
                            <tr>
                            <td>
                            <table style="padding:0px 10px;">
                            <tr valign="top" style="background:black;"><td style="color:white;font-size:12px;padding-left:10px;font-weight:bold;" colspan="2">TEXT TEXT</td></tr>
                            <tr valign="top"><td style="background:url('http://.newsletter/hgsmall.jpg');height:200px;padding:10px;font-size:14px;width:450px;">TEXT TEXT</td><td style="padding-left:10px"><img src="http://.img/pic1.jpg" style="height:220px;" alt="" /></td></tr>
                            </table>
                            <table style="padding:0px 10px;">
                            <tr valign="top" style="background:black"><td style="color:white;font-size:12px;padding-right:10px;font-weight:bold;text-align:right;" colspan="2">TEXT TEXT</td></tr>
                            <tr valign="top"><td style="padding-right:10px"><img src="http://.img/pic1.jpg" style="height:220px;" alt=""/></td><td style="background:url('http://.newsletter/hgsmall.jpg');height:200px;padding:10px;font-size:14px;width:450px;">TEXT TEXT</td></tr>
                            </table>
                            <table style="padding:0px 10px;">
                            <tr valign="top" style="background:black"><td style="color:white;font-size:12px;padding-left:10px;font-weight:bold;" colspan="2">TEXT TEXT</td></tr>
                            <tr valign="top"><td style="background:url('http://.newsletter/hgsmall.jpg');height:200px;padding:10px;font-size:14px;width:450px;">TEXT TEXT</td><td style="padding-left:10px"><img src="http://.img/pic1.jpg" style="height:220px;" alt=""/></td></tr>
                            <tr valign="top" style="background:black"><td style="color:white;font-size:12px;padding-left:10px;font-weight:bold;" colspan="2"></td></tr>
                            </table>
                            <table style="padding:0px 10px;">
                            <tr><td><img src="http://.img/footer.jpg" alt="" /></td></tr>
                            <tr style="font-size:11px;text-align:center;margin-top:10px;clear:both;background-color:#5C5C5C;color:white;"><td><a href="" style="color:white;">Link zur Homepage</a>  l  Tel. 06101 657 87 10  l  Bitte klicken Sie <a href="http://" style="color:white;">hier</a>, um den Newsletter abzubestellen</td></tr>
                            </table>
                            </td>
                            </tr>
                            </table>
                            </body>
                            </html>
                            So jetzt gibt es leider nur noch Probleme mit dem Hintergrund.
                            nlhg.jpg wird leider nicht angezeigt.

                            Ansonsten sieht alles gut aus bis jetzt.
                            Danke
                            cu
                            Grüße
                            "Dummheit redet viel..Klugheit denkt und schweigt.." [Amgervinus]

                            Kommentar


                            • #15
                              Mist, das mit dem Hintergrund funktioniert nicht.
                              Habe im Internet gelesen dass man evtl. noch eine innere Tabelle machen soll und die äußere hat einfach den Hintergrund
                              Jemand eine Idee was ich noch versuchen könnte?

                              Vielen Dank
                              Grüße

                              Edit.: hgsmall.jpg läd er wohl auch nicht ... grml
                              "Dummheit redet viel..Klugheit denkt und schweigt.." [Amgervinus]

                              Kommentar

                              Lädt...
                              X