The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

Tools for Email Development

Veronica Vasilakos
posted 2016-01-27 21:55:30

Hey all,

During The Email Design Conference, I learned about new and interesting tools that I can use to enhance my email campaigns. I listed some of the tools below but I've probably missed a bunch of them. Could you guys help me completing this list?

Hello, I am trying to find out if the files used in the advance email workshop at the recent conference might be available from someone. I missed the workshop but attended the conference in Boston. Thanks

This is awesome, and thanks Team Litmus for an excellent conference. Having learned of your relative infancy (and I mean that respectfully) it's incredible the standard you've set in the industry and the incredible 2 years of conferences that I've personally attended.

I'm particularly keen on learning more about the countdown timer hack that was cited, in addition to any resources on how B&Q achieved that amazing hover menu effect I believe is called a 'content carousel'. Do we have any resources, blogs, guides or breakdowns on the preceding?

And Paul Airy, I see your name in this topic, just wanted to drop a line to say that was an incredible segment you presented at the conference. I'll be taking your advice to our V2.1 template that will be in WW circulation.

Glad you enjoyed the conference! Alex Ilhan actually did a great writeup of the countdown timer hack that you can read here.

As for the B&Q email, I have yet to see a blog post about it, but I can give you a fairly high-level overview of how it works.

Starting with a solid foundation that works across email clients, the email uses four main things to achieve the carousel effect: absolute positioning, z-index, overflow-hidden, and CSS3 animations to make things work at a mechanical level.

So, the designer takes the fallback email (which is beautiful on its own) and uses media queries to target email clients that will support all of the above, which in this case is basically Webkit-based clients.

@media only screen and (-webkit-min-device-pixel-ratio: 1){ }

For those clients, the content sections are absolutely positioned outside that main slider area, which uses the overflow property to hide content outside of its visible container. Z-index is used to stack the slides in their appropriate order, and then when someone hovers or taps on the slider controls, CSS transitions and the left property are used to slide the correct slide into the visible carousel container.

It's an amazing email and a great example of using email client targeting to progressively enhance an already awesome email for clients that support more advanced CSS. I may be glancing over a few details, but I think that's the main concept. Would love to hear other people's thoughts on the B&Q email or if anyone else is doing anything similar.

In short, it's a really bad solution. We calculated it could require up to 5.2M frames per day, per use to generate the animated GIF. We were going ot apply this to an email that goes out to quite literally millions (I can't disclose on here), and with the largest of servers that's just not possible.

In addition, we suspect Google Mail may cache images, which could affect all Gmail users, meaning the timers could all be out.

I think this solution is too ahead of its time, but we're investigating other ways that exploit the .gif/php... hack.