HTML Email development is tricky. For starters, you have to use tables for layout and as an added bonus inline CSS for styles. There's also the issue of emails displaying differently on multiple platforms. Most mail clients strip code from the head or inject their own. Different mail clients act differently from one another. So let's find out what common display differences should we be aware of exist.
Borders on linked images
I stumbled on this gem when I added a link to an image. It'd make sense if an underline appeared, anchor tags by default display underlined anchor part, but for the image to incorporate a border is strange. Linking an image caused it to be surrounded by a thick and on other email clients thin, blue (or black) border.
Common offenders of this issue are Outlook 2000, 2002, and 2003.
Solutions: In the HTML document set the image border to 0. With inline CSS add border: none to the image style. It's more acceptable to be specific by using border-style: none.
<img src="assets/image.jpg" alt="no borders wanted" border="0" />
<img src="assets/image.jpg" alt="no border plz" style="border: none;" />
<img src="assets/image.jpg" alt="no border" style="border-style: none;" />
As a good rule of thumb set border to zero espically if you're creating a template, just in case an image is linked at any time.
Outlook 2003 in general
Trying to develop for Outlook 2003 and still making emails responsive is quite difficult. Outlook 2003 has existed for 15 years! Only 7% of the email client market share use Outlook[1]. The portion for Outlook 2003 is even smaller. In 2016 the user count for Outlook 2000-2003 was at 11.06% on Outlook, 4.09% on desktop and 0.67% for entire email client users[2].
A lot has happened in 15 years.
- If you were using Outlook 2003 when it released, you're now 15 years older.
- The United States has gone through at least three presidential elections and inducted two presidents.
- An individual on average would've changed their car three times in fifteen years, yet there exists an entity that still hasn't updated their email client!?
- Toy Story made four movies.
- The Incredibles received a sequel.
- The World Wide Web Consortium has recognized HTML5.
- Flexbox is life and CSS grid is awesome.
- Cars drive themselves.
Compare the lack of update to how even:
- Public schools have updated from Outlook 2003. Just kidding, I'm sure there's at least one school still using Outlook 2003.
- Half of the movies and shows made in the '80s and '90s have already been rebooted.
So who’s still using Outlook 2003? Take a guess in the comments. In the meantime, I’m suspicious of public schools, a few banks, lower-end government offices, and that one grandma.
*Since this is my word vomit dumping ground you can find my more refined written words on Medium. I love using this space to explore my journey as a designer and developer while not getting pressed to write in the most splendid manner. Proofreading, revising and consistently editing take up so much time personally. In the past, this has caused me to write less often something I to avoid. My aim is consistency. Added: March 5, 2018. Revised: February 15, 2020.
Resources
Updated: February 24, 2020
