Browse by...
Home Resources Blog

For most marketers, creating an email is a piece of cake due to easy to use tools that don’t require knowing how to code. However, if you’re an email developer, you know sometimes, creating an email can be a challenge. It’s not just different email clients that need to be considered, but also web browsers and devices–including mobile phones, tablets, and desktop computers. With the recent announcement from Google things got a bit easier but cope with these challenges, many email developers have honed their own email hacks–snippets of code to help them craft the perfect email.

For this post, we’ve partnered with Jaina Mistry, who chatted up 7 awesome email developers to share their favorite email hacks for those that code.

1. Paul Airy

Paul Airy

@paul_airy
Email Designer & Developer, Beyond the Envelope™

Paul’s favorite hack:
style="Margin:0;"

“Don’t be fooled by its simplicity, this hack is powerful. When it’s applied to opening headline, heading and paragraph tags (e.g. <p style=”Margin:0;”>), it removes all the excessive spacing usually applied to such ‘semantic’ tags by the email and webmail clients.

My desire to make email more accessible, and my dissatisfaction with the acceptance that as email designers and developers we couldn’t use semantic tags (which are crucial to accessibility), as we would suffer the spacing side-effects imposed by the email and webmail clients, led me to discover and implement this simple hack, which I now use in all my emails.

That’s why it’s my favorite hack, as it frees me to use semantic tags, empowering me to deliver more accessible emails to subscribers.”

2. Kevin Mandeville
Kevin Mandeville

@kevinmandeville
Product manager at Litmus and co-host of the Email Design Podcast.

Kevin’s favorite hack:
@media screen and (-webkit-min-device-pixel-ratio: 0)

“This media query targets all WebKit rendering engines which allows easy progressive enhancement for email designers and developers. It’s my favorite email hack because it’s allowed us to push the boundaries of what’s possible in email at Litmus – this simple hack has been the foundation for us to include HTML5 video background, live Twitter feeds, interactive product tours, and live tracking counters in our emails.”

3. Sam Sexton

Sam Sexton

@SamSexton
Email Marketing Associate at Moo Print Ltd.

Sam’s favorite hack:
* [lang=”half”]

“Gmail has a nasty habit of keeping your embedded styles, but removing your classes or IDs. Essentially making your CSS redundant.

Luckily for us, attributes like lang aren’t stripped, so put it together with an attribute selector and we can support media queries and all manner of fancy CSS.

I love this hack because of the huge audience we can reach with it. Billions of people, able to see rollovers, transitions, the sky’s the limit!”

4. Rémi Parmentier

Remi Parmentieri

@HTeuMeuLeu
Rémi Parmentier is a Front End Web Developer, based in France.

Rémi’s favorite hack:
[owa] .foo

“Outlook.com and Office365 don’t support attribute selectors in CSS. Both webmail apps remove the attribute from the selector, changing its meaning and initial intention.

For example, [owa] .foo selector has no effect on other email clients. It will, however, be transformed to .foo, which Outlook.com and Office365 will be able to recognize, and so you’ll be able to target elements in your HTML code with the class “foo”.

I love this hack because it’s really explicit and straightforward. You could use any keyword that is not an HTML attribute (instead of “owa”), but using “owa” makes it clear in my code that selector is specifically for Outlook Web Apps.

It’s also a great illustration of a parsing bug from a webmail. Microsoft changes your code, and this can create a terrible mess if you use attribute selectors, and you’re not aware of this bug.”

5. Mark Robbins

Mark Robbins

@M_J_Robbins
Email developer/hacker at Rebel Mail

Mark’s favorite hack:

HTML

<label> <input type="checkbox" style="display:none !important;"> <span> <div class="button show" style="display:none;max-height:0;overflow:hidden;mso-hide:all;">Show more</div> <div class="button hide" style="display:none;max-height:0;overflow:hidden;mso-hide:all;">Show less</div> <label class="content hide">Here is some more content</label> </span> </label>

CSS

.button{ padding:1em; width:100px; text-align:center; border:1px solid black; } .show{ display:block !important; max-height:none !important; } .hide{ display:none; } input:checked + span .hide{ display:block !important; max-height:none !important; } input:checked + span .show{ display:none !important; }

“I’d have to say my favorite email hack at the moment is the checkbox hack.

There are a lot of cool tricks that can be done with this hack, and the code can get pretty crazy. So I put together a simple example to show/hide some extra content.

For the code you hide a checkbox inside a label, now when you click anywhere in that label the checkbox will toggle between checked and unchecked.

You can now target that :checked value with CSS, but more importantly, you can target the element next to the checkbox and anything contained within that element.

The checkbox hack is my favorite hack as it’s the foundation behind interactive email and it’s a great way to progressively enhance your emails.”

6. Cyrill Goss

Cyril Goss

 

@cygro
Cyrill Goss is Senior Consultant, Key Account Manager, and Partner at Mayoris AG.

Cyrill’s favorite hack:

hide HTML

Gmail Hide CSS

 

“I like to use pre-filled forms in email (they work pretty well in many clients). But, Outlook.com and two of the most important clients in Germany do not support them, while Gmail (webmail and mobile app) does. The form needs to be visible in Gmail but fallback to a CTA button that links to the online version of the email, with the pre-filled form, and must be visible in other webmail clients.

At the top of the <head> in the HTML of your email, the following should be added:

<style type="text/css">
* [lang~="gmail-hide"] {display: none !important;}
* [lang~="gmail-show"] {display: block !important;}
</style>

Gmail doesn’t strip all <style> blocks from the <head>, but it does strip some based on certain, not always obvious reasons. The block above will remain and not be stripped, only if it is above all your other style blocks (because after certain length of the <style> blocks, everything down to the </head> end tag is stripped).

To remove the form from Outlook (desktop), it’s wrapped in MSO-conditional statements.

7. Stig Morten Myre

Stig Morten Myre

@stigm
Email developer at Campaign Monitor.

Stig’s favorite hack:
Try coding it without tables.

“This is not so much a hack in itself, as a starting point for finding new hacks or avoiding old ones. Tables add so much bulk to your markup, especially when they reset font styles, forcing you to repeat the same styles inside each table.

I see emails all the time where tables could be simplified, replaced with <div>s, or just removed altogether. Some tables are unavoidable, but there’s a lot you can do with a few <div>s, basic properties like margin and background-color, and a touch of ingenuity. I do this for spacing, email body wrappers, dividers, and plenty more.”

Wrap up

As you can see, email hacks come in all different sizes. From those that can introduce a whole new type of functionality to your emails to those that subtly enhance your emails for your subscribers.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free