My posts on Email Development

Bulletproofing images in email design

You might of heard of bulletproof guides for background images and buttons in email design, but what about the basics of using images? Due to varying level of HTML/CSS support in email clients, embedding images in email templates isn’t as easy as you’d think. I’ve decided to compile all of the information and potential problems with images in email design and how to maintain compatibility with various email clients.

(more…)

Windows 8 mail app and the background-size CSS property

Recently I discovered the Windows 8 mail app (Touch/Metro) not playing nice with the background-size CSS property. This property is often used when you need scale down an image on the fly, one reason for doing this is for optimising image assets for high resolution devices. The Windows 8 mail app supports CSS3 and hence this can be done. However background-size doesn’t actually work in some cases and its all dependant on the way you write background CSS properties. Find out more on how to avoid this quirk below!

(more…)

Floated tables vs table cells, what’s the best approach?

When building an email template you will come across two common layout methods, floated tables or using table cells to create columns. Both of these methods are fundamental layout techniques and form the foundation of any email campaign. Both techniques have different strengths and weaknesses, but ultimately what is the best technique to use? Find out in my comparison between the two.

(more…)

Turning floated tables into columns in Outlook

One of the many layout techniques for email is floating tables. This technique basically provides similar behaviour to the float CSS property but is supported pretty much everywhere. Problem is that pesky email client Outlook will attempt to ruin your party with its poor CSS box model. Sadly Outlook and table widths just don’t add up, which introduces problems like content appearing below its designed place as well alignment issues. Thankfully however, thanks to Mike Ragan from Action Rocket, there’s a cool new way to workaround this issue.

(more…)

Emulating max-width for Outlook and older IE versions

Ever wanted to use max-width but then realised the lack of support in Outlook and older IE clients is going to ruin that plan? Well with some conditional comment magic, you can use max-width in your email templates with a graceful fallback for Outlook/IE which will work across the board. How you may ask? Keep reading on to find out how!

(more…)

1. Jump to:
2. < Previous
3. 1
4. 2
5. 3
6. 4
7. Next >