Development Tricks

Best Email Development Tricks and Hacks


Over the last year (or so), I’ve seen some pretty incredible tricks and hacks covered on blogs in the email development community. Here are a few that I found particularly useful or groundbreaking, as well as a few from Email on Acid that I think you might find helpful.

If you regularly find yourself needing email development help, sign up for the RSS feeds of these folks or follow them on Twitter. You’ll learn a lot and always be up to date with the latest techniques.

Reverse Stacking in the Gmail App

Mike Ragan, ActionRocketLabs

I don’t always reverse stack content blocks in Gmail, but when I do, I use Mike Ragan’s method. It’s simple, foolproof and easy to add to an existing hybrid design. It’s also where I first read about the ghost column method.

Using Ghost Columns to Fix Alignment Problems in Outlook

Geoff Phillips, Email on Acid

Based on Mike’s work, above, I quickly realized just how useful “ghost columns” could be, even without using fluid design. Any time you have two side-by-side tables that just won’t line up in Outlook, put them in ghost columns!

Bulletproofing Images in Email Design

James White, James’ Blog

Got image problems? Look no further than this post by James White. He covers a huge range of potential image problems in HTML email and how to fix them. Or, if you’re feeling really proactive, use this blog to problem-proof your images ahead of time.

Webfont Alternatives, Fallbacks & Outlook

Anna Yeaman, StyleCampaign

If you really want to take control of your fonts, this blog is a must read. In it, Anna takes us on a trip down the HTML email font rabbit hole. Spoiler alert: She settles on a technique that allows capable clients to use webfonts of one size, while other clients use Georgia as a universally supported fallback. Her fix also deftly avoids the annoying Outlook Times New Roman bug.

Mobile Optimization: Retina Images in Email

Geoff Phillips, Email on Acid

This is one of our tips from earlier in the year. It’s super easy to add to any email template, and it can vastly improve how your images look on iOS devices. Don’t worry, the images will show perfectly in Outlook, as long as you define the height and width using HTML attributes.

Create Great Pixel Art Emails

Simon White, display block

I’ve had people ask me about how to pull this off before, and the answer is actually pretty complex. Simon will walk you through the process of creating a pixel art email step by step, making it look easy. It can give your emails a cool “retro” look and often creates more buzz than the image you took so much time to slice up! You can also get a similar effect from our Mozify tool.

Responsive Email Design Patterns Part 1&2: The Exotic Navigation

Jordie van Rijn, display block

The rise of mobile opens has caused many email developers to reconsider how they’re coding their emails. Navigation bars can be especially troublesome. A bar that takes up 600px of width but is only 20px tall can take a huge amount of vertical space once all of those nav items are stacked. Read this blog and Jordie’s original post for an overview of the solutions to this common problem.

Prevent IE Edge Meta Tag from Breaking Images in Live Mail

Geoff Phillips, Email on Acid

The IE Edge meta tag is very useful, because it unlocks responsive design (media queries) on Windows Phone. The only issue is that it also, somehow, breaks every image in Live Mail (thanks, Microsoft!). Luckily you can make use of this meta tag anyway with this easy fix.

A New Table Structure

Mark Robbins, Rebelmail

I guess they call it “Rebelmail” because Mark just can’t just follow the pack. He came up with this unique way of creating a wrapper that centers your email using only a single table. Word on the street is that his next blog will detail a method for creating a centered layout in all clients with no tables at all!

Snowball Surprise: Shaking the Email

Justin Khoo, FreshInbox

Justin has been blogging about interactive techniques and animation in email all year. I thought that this was a really fun way to shake things up and surprise your readers. As Justin points out, you wouldn’t want to do this all the time, but if you’re looking for something to give a campaign a little extra oomph, this could be it.

Did we miss any amazing emails hacks or tricks?

I’m always looking for more blogs by my fellow email devs. Let us know if we missed any great posts in the comments below!

1 thought on “Best Email Development Tricks and Hacks”

  1. Hello Geoff Phillips,

    Good article, we always struggled to get webfonts to in a perfect form. i think we got some new time and hack to try out in our new email design templates.

    Thanks
    Brightlivingstone

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies