Op syk nei: Online e-postfoarbyldhulpmiddel

Hawwe jo ea opmurken hoefolle e-postkliïnten ôfbyldings blokkearje en de alternative tekst werjaan? Ik bin benijd oft immen dit emulearre hat sjoen mei JavaScript of Server-side skripting. Ik wol graach in hân krije by in ark dat it docht. Yn 'e rin fan' e tiid bin ik wis dat ik sa'n pagina kin ûntwikkelje ... Ik begon eins te spyljen fan 'e jûn. Hjir is in funksje dy't al jo ôfbyldings op in side fuortsmyt:

funksje ferfange () // ôfbyldings fuortsmite
{
var imgs = document.getElementsByTagName ('img'); // array
foar (var i = 0; i> imgs.length; i ++) // loop
{
imgs [i] .src = ""; // set de ôfbyldings op neat
}
}

It is frij ienfâldich Javascript. It earste wat ik dwaan is in array fan 'e ôfbyldings sammelje HTML, In array is in groep items. Ik fertelde it javascript elk elemint te krijen dat in img-tag hat. (Dat is hoe't jo ôfbyldings werjaan yn HTML). Folgjende 'loop ik' troch de array troch te fertellen dat it mei it earste item (= 0) moat begjinne, gean nei safolle items dy't d'r binne (ôfbyldingslange), en as it klear is mei de loop add 1 om nei it folgjende item te gean (i ++).

Wat yn prinsipe bart is dat de array de lokaasje fan elke ôfbylding op 'e pagina sammelt, troch har hinne loopt en elk op neat stelt. Wat ik hjir echt mei dwaan wol, is de ôfbylding fuortsmite, mar eins elke alternative tekst werjaan - krekt lykas in e-postklient soe. Ik soe ek oare tafel- en div-eleminten graach fuortsmite wolle om it wer te jaan sa't it der yn in soad mobile kliïnten útsjen soe. Dit soe inline styl tag en opmaak fan lettertypen ferfange.

Hat immen soks sjoen of boud? As dat sa is, lit my in notysje yn myn kontaktformulier. As it is skreaun yn C # of foaral JavaScript, kin it sels wat wêze dat ik autorisearje koe om te keapjen. It foardiel fan JavaScript is dat it kin wurde útskeakele en ynskeakele - in heul moaie funksje! Underwilens sil ik der sels oan trochwurkje!

9 Comments

  1. 1

    That would be a really simple Greasemonkey javascript

    You’re almost there, just insert the alt tag as the nextSibling.

    then put it on userscripts.org 🙂

    You could also use Greasemonkey to XPI or whatever it is called to make it a proper standalone Firefox extension.

  2. 2

    hoi Doug,

    De Web Developer Toolbar has a tool for doing this specifically, called “Replace Images With Alt Attributes”. It does exactly what you want for free!

    It did throw up an accessibility issue with your site though. Turning images off leaves black text on a black background, so anyone surfing the web without images on won’t be reading your posts!

    Tafoegje:

    .post { background-color:#fff; }

    should solve that without messing up your theme though.

    • 3

      Great find and catch, Phil! Thanks so much. I’m going to dig into this add-on a little deeper since I need some of that functionality in a page rather than the browser itself. Very cool!

      (I also updated my post class – thanks for pointing that out!)

  3. 4

    At Agency.com we use a product called pvIQ from Pivotal Veracity (http://pivotalveracity.com/solutions/pvIQ.php) that is a big help with your problem. We send our test emails to our various ISP test accounts and then pvIQ retrieves jpgs of the rendered emails from each of the accounts, as they would appear in different browsers. This saves us enormous amounts of time, as all we have to do is look at the resulting jpgs. I’d recommend it.

    • 5

      Hoi Mark,

      Pivotal Veracity has some incredible tools! I know they’ve recently launched an API as well. I’m trying to do something a little simpler, just a ‘quick’ look that doesn’t require actually sending the email out. Imagine just a button to click and you can emulate how it would look, just to take care of the low-hanging fruit.

      doug

      • 6

        Hoi,

        I haven’t looked at this for a while, so I might be wrong, but don’t the portals keep changing their mail rendering software? If they did, I would think you’d be constantly playing catch-up if you tried to use your own test software. That’s why we use pvIQ: it sends us exactly what the portal would render.

        Merk

        • 7

          You’re absolutely correct. My thinking is simply developing a ‘quick & dirty’ previewer that someone could execute before sending to something like pvIQ… things like Alt tags and mobile previewing (tables removed, etc.). I definitely don’t want to try to keep up with the mess out there with Email Clients! Those folks at Pivotal Veracity are the pros at that!

          doug

  4. 8
  5. 9

    I think a potentially useful addition to your idea would be the ability to preview the emails in the same manner that popular email clients do. It would take some time and research into how each one does it (what elements to they strip, leave in, etc.).

    You build a series of filters to choose from. Say, a GMail filter, Yahoo Mail, Outlook (PC, Mac, etc.) filters, etc. So, instead of having to have dummy test accounts with every service under the sun, you could cycle through previews of each one relatively quickly.

    …maybe I’ve said too much… 😉

Wat tinksto?

Dizze side brûkt Akismet om spam te ferleegjen. Learje hoe't jo kommentaargegevens ferwurke wurde.