Blog

At a time when a considerable percentage of email recipients choose to have images not display, or turned off by default in their email clients, some rather interesting techniques to combat image blocking have started to appear. None of these are capable of forcibly displaying images, of course, but all use good old fashioned HTML to create visual effects that would otherwise have you scrambling for Photoshop.

One of these curious techniques is the use of HTML symbol entities, as recently discussed on Web Designer Wall. Once the domain of unusual text and ASCII art, they provide a creative way to use symbolism and icons in HTML design without the overhead of images. However, a word of caution before you launch into filling your emails with ♘‘s and ☂‘s, as we discovered that they can be not only unreliable, but can render all aliased (read: nasty) in operating systems other than OS X.

HTML symbol entities are characters that are added to your HTML source code. The most commonly used (and misused) examples are quotation marks (eg. ’) and ampersands (&). However as Web Designer Wall pointed out, there are lots of other really obscure entities like ☣ that you may not know about, but are potentially an HTML alternative to images when used as navigation icons (eg. ✓) or illustrations. As well as avoiding the image blocking issue, characters are faster-loading than images, scale according to font size and can be styled using CSS effects like color and text-shadow. However, as cute as we found them to be, their behavior in email clients is sadly, quite unpredictable.

Testing symbol entities in email clients

As the holiday season has just passed, I decided to test out my favorite entity, ☃ (snowman) in a very simple holiday-themed email for our favorite company, ‘ABC Widgets’. Please don’t knock my 5-minute design skills here, we’re testing characters after all.

Things were looking fine in Apple Mail:

And perhaps even flamboyant in Windows Mail (due to font-substitution):

But as you can see, the moment I changed operating systems, my snowman and body copy weren’t looking so glamorous after all. Gone was the nice text-shadow css attribute, hello aliasing. But even worse was to come with AOL Web, which simply returned the ‘square of no comprende’:

What a bad look. The snowman didn’t render in Outlook 2000, 2003, Express and XP, but surprisingly, it did display in Outlook 2007. In a similar vein, things were grim for Lotus Notes 6 & 7, but fine for version 8.

Hope is not lost

Despite this early failure, I found that there were a few unusual HTML symbol entities that did persevere throughout the tests. These included ♂ ♀ ♠ ♣ ♥ ♦ . Sadly, the impressive chess symbols, ♔ ♕ ♖ ♘ didn’t make it. The good news is that the use of characters doesn’t seem to affect your spam score, so once you pick one that works across the major clients, use it at your leisure.

There are countless entities you can use, however we highly recommend using our email client test when using the less-common ones in your extended character-set masterpiece. In so much as the use of symbol entities may be largely trail and error, it certainly offers designers the potential to add imagery to their emails, without worrying about having them blocked.

Do you use unusual HTML symbol entities in your emails? Let us know how you use characters to create interesting effects in your designs, we’re keen to see more examples of this in the wild. All the best with your image-free design! ♥♥♥