Since 2012, we’ve been using our annual holiday email to showcase innovative design techniques and advanced inbox interactivity–with plenty of festive flourishes to boot. You may remember our 2017 card, which gave viewers the ability to trigger four different animated scenes featuring BrightWave’s Chief Client Officer as Santa Claus, or our 2016 card for its long-scrolling animation, done entirely with CSS. These cards were certainly
[more]
brightwave.com 
Design, Video
The snow effect is essentially a snowflake or shape in a div that you animate using CSS. This technique moves the image from the top to the bottom of a container div you place around your email tables. CSS animations work on a range of email clients including iOS, Apple Mail, Android Native Mail and Outlook for Mac – check out the Email on Acid ultimate guide to CSS animation for more information. The snow animation won’t display on other email clients, so you don’t need to provide a fallback. [...]
[more]
emailonacid.com
Design
CSS animations are animations that are built using code—specifically HTML and CSS. Using a handful of CSS properties, email marketers can manipulate the HTML of their campaigns and create a similar sense of motion as when using animated GIFs. Perhaps more importantly, they can create more interactive and engaging campaigns, too. In this guide, we’ll explore the pros and cons of using CSS animations in email, as well as the code that powers CSS animations. [...]
[more]
litmus.com
Design
This is a simple technique to show a brief animation of an object or text against a blank page and having the rest of the email “fade in” after the animation ends. This is a follow on of a previous example with fade in text animation. I got the inspiration from Apple’s MacBook website featuring a Macbook appearing over a blank page. This technique is supported by the email clients that support CSS animation – namely the iOS email clients (iPhone, iPad), Apple Mail and Samsung Mail. For other clients, [...]
[more]
freshinbox.com
Design
I’m an email geek and tried out some fun CSS effects from the Apple Website in an email. The results were as expected: the effect works on iPhone but not most other email clients. I provide a working example of the effect with a fallback for non-supported clients. [...]
[more]
medium.com
Design
Here’s a simple technique we use to add a photo carousel to HTML email. It’s progressively enhanced, which means it works great in modern email apps and defaults back to the original image in older apps like Microsoft Outlook (shudders). It’s responsive, so it looks as stunning on mobile as it does on desktop. And since you’re not using GIF, there no unsightly diffusion dither. [...]
[more]
medium.com
Design
Its 2018 and email clients that support CSS animations no longer require the -webkit vendor prefix when using the animation CSS property or @keyframes rule. When kinetic email design started to gain interest around 2014, the primary email client that supported animations was the iPhone email client on iOS 8, which required the -webkit vendor prefix for animations. However later iOS versions (9 and above) no longer require the -webkit prefix. According to this report 99% of Apple devices are now on iO [...]
[more]
freshinbox.com
Design
So it turns out Linode’s automated system has flagged this email as spam and tied it to me, because of the domain blog.jmwhite.co.uk being in the email and you guessed it, my domain blog.jmwhite.co.uk and indeed jmwhite.co.uk is hosted on the accused Linode server! What may have further pushed me into the crossfire here, is my DNS for the domain jmwhite.co.uk is also hosted at Linode and obviously tied to the same account the accused Linode server is on, so it looks like a bad case of mistaken [...]
[more]
medium.com
Deliverability
Implementing responsive email design can be a bit of a drag. Building responsive emails isn’t simple at all, it is like taking a time machine back to 2001 when we were all coding website layouts in tables using Dreamweaver and Fireworks. But there's hope! We have tools available that can make building email much easier and more like coding a modern site. Let’s take a look at a couple of different frameworks that set out to simplify things for us. [...]
[more]
css-tricks.com
Design, Mobile, Tool
One of the biggest causes of broken emails is the varying levels of support for CSS across different email clients. That's why inlining CSS has been the status quo for email developers for years. But is inlining your CSS still necessary today? [...]
[more]
litmus.com
Design
Multiple people have talked to employees inside Microsoft, and I suspect their customers have been blowing up support about this. I know they’re aware, I suspect they’re frantically working on a fix. Update 11 am PDT: It appears this filter is firing when mail has the word “hotmail” in it. This includes if non displaying text (like CSS) has the word in it. It feels like they were attempting to mitigate something and wrote a rule that wasn’t quite right. Still no word on a fix, but don’t panic. [...]
[more]
wordtothewise.com
Deliverability
One year ago I entered the wild world of email. I was confident in my HTML/CSS skills and ready to rock it. But then… tables(!) and inline CSS(!!) and Microsoft Word as a rendering engine(!!!)… I quickly realized the intricacies of email coding were way beyond my expectations, and consequently the past year has involved a steep learning curve. [...]
[more]
reallygoodemails.com
Design
Designing HTML email is one of the difficult things in life. Even HTML emails are written in HTML with all language specifications, not all email clients support entire language spec. While the web and email are built on the same technologies (HTML and CSS), email applications don’t adhere to the same standards as web browsers. Each email application has its own rendering engine which determines what code is supported and how emails are displayed. For example, most email clients plainly ignore CSS [...]
[more]
medium.com
Design
In the 95th episode of The Email Design Podcast, Kevin Mandeville and Jason Rodriguez answer recent questions from the Litmus Community in a rapid fire format, including topics on CSS inlining, email client market share tracking, iOS 11 scaling, and more. Be sure to follow along and join in the discussion on Twitter using #EmailDesignPodcast. [...]
[more]
litmus.com
Design
Did you know that not so long ago, Gmail supported CSS animations? Well, sort of. Up until June 2016, the desktop webmail of Gmail supported CSS @keyframes declarations. So you could declare the [...]
[more]
hteumeuleu.com
Design
EPiCβ - Rene's daily Email PiCks
