Digi Nut

Digi Nut Blog

Passionate about the web

MORE TH>N HTML email for SFW

I recently developed an HTML email for our friends over at Stephens Francis Whitson for their client, MORE TH>N. A common and affordable means of digital marketing, email campaigns can be an effective way of communicating directly with your customers. Previous clients I’ve worked with, Virgin Atlantic and Microsoft for example, put a great deal of time and money towards their email marketing efforts, with regularly impressive results.

For a developer, creating HTML emails that work across the many email clients, software and web-based applications (Hotmail, Yahoo!, Gmail, etc) can be a frustrating process. CSS layout support is limited, stylesheets are often stripped out, background images don’t display and general images are often not displayed by default. Developers and designers differ in how they deal with these issues in order to create email designs that are consistent and that degrade well when support is limited.

My approach is to use tables for layout, using div tags sparingly. I avoid using deprecated font tags, opting instead for inline CSS for formatting and colours. Placing CSS classes in the head of a document is stripped out or replaced by some of the bigger web-based email clients and can seriously affect your design. Background images are also a no-go as the support is very limited and you can end up with a big chunk of your email design missing if you rely on them too much. Finally, I always make sure I have descriptive ALT tags where necessary - more and more computers or email clients don’t display images for security reasons, meaning users see a blank space. Having decent alternative text can be the difference between a customer deleting an email right away or switching on images to find out more.

The result is email communications that work across as many email clients as possible, a greater chance of making your customers read your message and, ultimately, click-through to your offering.

Leave a Reply

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-Spam Image