Using inline styles to spruce up alt tags

Every designer out there should be aware of the fact that not every recipient of your emails is going to have images enabled by default, the net result being that a viewers first look of your deliciously gorgeous email could instead be littered with those hideous broken image place holders we all know and love.

On the plus side, there's a way around this assuming your viewer is using a web based email client such as gmail and certain browsers (but there's really no excuse to not do it anyway), gmail applies inline styles to alt tags, so you can set font size, font family, etc. and know that in place of images, it'll display your alt tags as an alternative in a style you can control.

I think a few examples would serve to show what on earth I'm going on about here, take this hastily created email template:


This is how it would look with all the images displayed, but as we already know, this isn't likely to be how most people will first see it.

This, however, is:


See what happens? We've kept the padding-left: 10px; intact but beyond that, there's no other styles set up on the holding table cell.

So, what happens if we add the following: font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #ffffff; font-weight: bold;

Well, this happens:


You can see how the alt tag on the image has been styled using inline styles on the holding table cell.

Hopefully that gives you a few ideas to work with and hopefully you'll find that there's no reason why your emails shouldn't look good without images.