• Home
  • About
  • Find Me Everywhere Else
Epic Whim
AboutMe AboutMe RSS
 
Skip to content
  • Home
  • About
  • Find Me Everywhere Else

Tag: html email

No comments

Coding Quick Tips: AOL Mail and the Mystery of the Missing Padding

  By David March 9, 2016 March 2, 2016 HTML Email

I ranted about the problems with HTML email last week, so here’s a great and bizarre funkiness that I just experienced, and the solution which will hopefully help someone.

Our story begins on a dark and stormy night bright and sunny day, when I was building an email for a client.  During Litmus tests, they had noticed a strange lack of padding around a certain content area…

aolissue

Left: Gmail. Right: AOL. (Client identity obscured)

…but only within AOL.

First thought: Who still uses AOL?  Answer: about 1% of people, as of 2014.  It’s amazingly still in the top ten, apparently.

Next question: Why?

I mean “why is it breaking?” (though why are people still using AOL is a good question, too).  Litmus has a cool new feature called “Builder,” which provides HTML email devs the opportunity to finally do what Dev Tools has allowed web developers to do for years: live tweaking in-engine.  So I loaded the HTML up, popped up the AOL renderer…and it wasn’t there.

The email looked fine.  Perfect, even.  Padding was right on.

So I chalked it up to some sort of hiccup in Litmus or in our server and ran a new test.  Right as I was about to send the update to the client, I looked at the AOL result.

No padding again.

So I loaded up the code:

...
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tbody>
  <tr>
   <td align="left" valign="top" style="padding: 25px 20px 30px;"
   class="mob" style="">

    (...insert stuff here...)

   </td>
  </tr>
 </tbody>
</table>
...

Took me about a half-hour of agonizing before I figured it out. I’d been troubleshooting an error in a different part of the email, and to make things quick, I’d added a new “style” tag.

And apparently AOL, rather than adding all the CSS up before rendering it like everyone else does, just applies the last CSS received by the layout engine. Litmus’ Builder must do some CSS preprocessing before sending it to the AOL rendering engine, so I didn’t see it there.

So I removed the extra, empty ‘ style=”” ‘ and re-ran the test. Good as new.

Thanks, AOL, for contributing to my stress levels.

Tagged   coding quick tips, html email
No comments

Coding for HTML Emails

  By David March 2, 2016 March 2, 2016 HTML Email

As you may or may not know, writing HTML for email is a special kind of bizarre. Most of the email clients we use on our computers are firmly and staunchly set with both feet in the last century, but our phones are using blazing-fast, standards-compliant browsers to render emails. So when writing an HTML email, you have to somehow make it simultaneously zippy-pretty on a stone age Microsoft Word HTML renderer and rock-solid on a space age Apple Safari HTML renderer.  This leaves you with one real option: abandon your <div>s and <span>s in favor of tables, an HTML development technique that went out of style on the web when Internet Explorer 5 came out.  In the year 2000.

Woof.

Plus you have to throw in such insanity as a Gmail that likes to remove (or ignore, the verdict is still out) your HTML headers. This means that the typical responsive tactic of creating CSS breakpoints won’t work in Gmail.  Yahoo Mail also does weird things with CSS, ignoring media queries unless the designer uses an archaic selector in their CSS to make it work.

You know, two of the most popular web-based email services. No big.

And then there’s Outlook, which has the most bizarre problem (in my opinion): its older versions are actually more standards compliant than its newer versions. That’s because, in 2007, Outlook stopped using Internet Explorer to render its emails (which, of course had its own set of problems) and began using Microsoft Word to do it instead.  A word processor.

This has made a lot of people very angry and has been widely regarded as a bad move.

Microsoft has defended their decision as being more secure (debatable) and easier to use (also debatable).  Basically, it let them make it look flashier without actually expending any effort in the ordeal.

¯\_(ツ)_/¯

Anyway, all of this underscores one major point: there is no set of established standards for HTML email.  And this is a problem.

HTML for the web, for instance, is governed by the W3C (The World Wide Web Consortium) and the WHATWG (Web Hypertext Application Technologies Working Group), who make a public specification document which browser manufacturers (for the most part) do their best to follow.  HTML5 adoption, for example, is almost universal after only two years in the wild; most features were even adopted before the spec was finalized.

CSS is also operated by the W3C.  The latest version of most modules (CSS3) is, again, quite nearly universal, and in fact forms the backbone of responsive web pages and email through media queries.

JavaScript is maintained by the Mozilla Foundation, famously the organization behind Firefox.  They release new features periodically, and cross-browser support for the language is, once more, nearly universal.

But HTML email?

(You can’t hear them, but those are crickets.)

An attempt has been made to form an Email Standards Project to govern the development of HTML email, but its website hasn’t been updated in nearly five years.  And it’s unlikely to pick up any more steam; developers are a niche enough community to begin with, but HTML Email developers?  Forget it.  At best we’re considered practitioners of a dying art; at worst, we’re called spammers.

We’re not spammers, but I’ll take that “last practitioner of a dying art” thing.  That means we can be in the same company as Obi-Wan Kenobi and Superman.

Tagged   compliance complaints, html email, standards, standards compliance
  • RSS Reel World Theology

    • A Child’s Wise Eyes in C’mon C’mon (2021) July 18, 2022 Mikey Fissel
    • Redemption in the Desert: Obi-Wan Kenobi season 1 June 26, 2022 David Atwell
    • Retcon Artist June 18, 2022 David Atwell
    • Seriously, Watch Ozark June 11, 2022 Philip Kinkopf
  • RSS Redeeming Culture

    • A Child’s Wise Eyes in C’mon C’mon (2021) July 18, 2022
    • Redemption in the Desert: Obi-Wan Kenobi season 1 June 26, 2022
    • Retcon Artist June 18, 2022
    • Seriously, Watch Ozark June 11, 2022
  • Archives

    • January 2023
    • December 2022
    • November 2022
    • October 2022
    • August 2022
    • August 2020
    • June 2020
    • May 2020
    • June 2017
    • May 2017
    • January 2017
    • November 2016
    • October 2016
    • August 2016
    • July 2016
    • April 2016
    • March 2016
    • February 2016
  • Categories

    • AI Art
    • Current Events
    • HTML Email
    • Nintendo
    • PCA
    • Politics
    • Redeeming Culture Meta
    • RPGs
    • Science
    • Sermons
    • Site News
    • Social Media
    • Technology
    • Theology
    • TV
    • Writing Prompt Responses
  • Recent Posts

    • Way More OGL
    • No More OGL?
    • The Steps of the Temple
    • Flipping the Bird: How to Mastodon
    • Flipping the Bird: The Options
  • Recent Comments

    • Way More OGL – Epic Whim on No More OGL?
    • No More OGL? – Epic Whim on Flipping the Bird: How to Mastodon
    • Flipping the Bird: How to Mastodon – Epic Whim on Flipping the Bird: The Options
    • Flipping the Bird: The Options – Epic Whim on On the Ludological Decisions of an Oligarch
    • Candice Brown on On George Floyd
  • Archives

    • January 2023
    • December 2022
    • November 2022
    • October 2022
    • August 2022
    • August 2020
    • June 2020
    • May 2020
    • June 2017
    • May 2017
    • January 2017
    • November 2016
    • October 2016
    • August 2016
    • July 2016
    • April 2016
    • March 2016
    • February 2016
  • Categories

    • AI Art
    • Current Events
    • HTML Email
    • Nintendo
    • PCA
    • Politics
    • Redeeming Culture Meta
    • RPGs
    • Science
    • Sermons
    • Site News
    • Social Media
    • Technology
    • Theology
    • TV
    • Writing Prompt Responses
  • Meta

    • Log in
    • Entries feed
    • Comments feed
    • WordPress.org
  • Home
  • About
  • Find Me Everywhere Else
  The personal blog of David Atwell, the Redeeming Culture guy, coder, and overall geek.    
Powered by Parabola & WordPress.
AboutMe AboutMe RSS