Suche: Online-E-Mail-Vorschau-Tool

Have you ever noticed how many email clients block images and display the alternative text? I’m curious if anyone has actually seen this emulated utilizing JavaScript or Server-side scripting. I’d like to get a hand on a tool that does it. Over time, I’m sure that I can develop such a page… I actually started playing tonight. Here’s a function that removes all of your images on a page:

Funktion replace () // Bilder entfernen
{
var imgs = document.getElementsByTagName ('img'); // Array
for (var i = 0; i> imgs.length; i ++) // Schleife
{
imgs [i] .src = ""; // setze die Bilder auf nichts
}
}

It’s pretty simple Javascript. The first thing I do is collect an array of the images in HTML. An array is a group of items. I told the javascript to get every element that has an img tag. (That’s how you display images in HTML). Next I ‘loop’ through the array by telling it to start with the first item (=0), go for as many items there are (imgs.length), and when it’s done with the loop add 1 to move to the next item (i++).

What basically happens is that the array collects the location of every image on the page, loops through them, and sets each to nothing. What I’d really like to do with this is remove the image but actually display any alternative text – just like an email client would. I’d also love to remove other table and div elements to render it as it would look in many Mobile Clients. This would replace inline style tag and font formatting.

Has anyone seen or built anything like this? If so, drop me a note in my contact form. If it’s written in C# or especially JavaScript, it may even be something I could be authorized to purchase. The advantage of JavaScript is that it could be turned off and on dynamically – a really nice feature! Meanwhile, I’ll continue working on it myself!

9 Kommentare

  1. 1

    Das wäre ein wirklich einfaches Greasemonkey-Javascript

    Sie sind fast da, fügen Sie einfach das Alt-Tag als nächstes Geschwister ein.

    dann setzen Sie es auf userscripts.org 🙂

    Sie können auch Greasemonkey für XPI oder wie auch immer es nennt verwenden, um es zu einer eigenständigen Firefox-Erweiterung zu machen.

  2. 2

    Hallo Doug,

    Das Web Developer Toolbar verfügt über ein spezielles Tool namens "Bilder durch Alt-Attribute ersetzen". Es macht genau das, was Sie wollen, kostenlos!

    Es ist jedoch ein Problem mit der Barrierefreiheit Ihrer Website aufgetreten. Wenn Sie Bilder deaktivieren, bleibt schwarzer Text auf schwarzem Hintergrund, sodass jeder, der ohne Bilder im Internet surft, Ihre Beiträge nicht liest!

    Hinzufügen:

    .post { background-color:#fff; }

    sollte das lösen, ohne dein Thema durcheinander zu bringen.

    • 3

      Tolles Finden und Fangen, Phil! Vielen Dank. Ich werde mich etwas eingehender mit diesem Add-On befassen, da ich einige dieser Funktionen auf einer Seite und nicht im Browser selbst benötige. Sehr cool!

      (Ich habe auch meine Postklasse aktualisiert - danke, dass Sie darauf hingewiesen haben!)

  3. 4

    Bei Agency.com verwenden wir ein Produkt namens pvIQ von Pivotal Veracity (http://pivotalveracity.com/solutions/pvIQ.php) das ist eine große Hilfe bei Ihrem Problem. Wir senden unsere Test-E-Mails an unsere verschiedenen ISP-Testkonten und dann ruft pvIQ JPGs der gerenderten E-Mails von jedem der Konten ab, wie sie in verschiedenen Browsern angezeigt würden. Dies spart uns enorm viel Zeit, da wir uns nur die resultierenden JPGs ansehen müssen. Ich würde es empfehlen.

    • 5

      Hallo Markus,

      Pivotal Veracity hat einige unglaubliche Werkzeuge! Ich weiß, dass sie kürzlich auch eine API gestartet haben. Ich versuche, etwas einfacher zu machen, nur einen "schnellen" Blick, bei dem die E-Mail nicht tatsächlich gesendet werden muss. Stellen Sie sich nur eine Schaltfläche zum Klicken vor und Sie können emulieren, wie es aussehen würde, nur um sich um die tief hängenden Früchte zu kümmern.

      Doug

      • 6

        Hallo,

        Ich habe mir das eine Weile nicht angesehen, also könnte ich mich irren, aber ändern die Portale nicht ständig ihre Mail-Rendering-Software? Wenn dies der Fall wäre, würden Sie wahrscheinlich ständig aufholen, wenn Sie versuchen würden, Ihre eigene Testsoftware zu verwenden. Deshalb verwenden wir pvIQ: Es sendet uns genau das, was das Portal rendern würde.

        Mark

        • 7

          Du bist absolut richtig. Ich denke einfach daran, einen "Quick & Dirty" -Previewer zu entwickeln, den jemand ausführen kann, bevor er ihn an pvIQ sendet ... Dinge wie Alt-Tags und mobile Vorschau (Tabellen entfernt usw.). Ich möchte definitiv nicht versuchen, mit dem Durcheinander mit E-Mail-Clients Schritt zu halten! Diese Leute bei Pivotal Veracity sind die Profis!

          Doug

  4. 8
  5. 9

    Ich denke, eine potenziell nützliche Ergänzung Ihrer Idee wäre die Möglichkeit, eine Vorschau der E-Mails auf dieselbe Weise anzuzeigen, wie dies bei beliebten E-Mail-Clients der Fall ist. Es würde einige Zeit dauern und untersuchen, wie jeder es tut (welche Elemente sie abstreifen, belassen usw.).

    Sie erstellen eine Reihe von Filtern zur Auswahl. Angenommen, ein GMail-Filter, Yahoo Mail-, Outlook-Filter (PC, Mac usw.) usw. Anstatt Dummy-Testkonten für jeden Dienst unter der Sonne zu haben, können Sie die Vorschau der einzelnen Dienste relativ schnell durchlaufen.

    … Vielleicht habe ich zu viel gesagt… 😉

Was denken Sie?

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.