Gmail annotations was a big development that Google brought to promotional emails in the Promotions tab. Originally, only two annotated emails were displayed at the top of the Promotions tab.
However, it is looking like Gmail is starting to display emails with annotations in the main list...
Designing Creative Transactional Emails to Stand Out in the Inbox
Businesses that use email marketing use it explicitly to promote deals and product launches. However, they often ignore transactional emails which should be a fundamental part of their email marketing strategy. These are emails that are often overlooked as boring or unimportant, and marketers avoid spending much time and effort in planning and creating these [...]
A Free, Quick Tool to Test Your Email in Dark Mode
Have you always wanted a quick and easy way to test your emails in dark mode without having to send a test to your device? Good news! I built a Dark Mode for Email Simulator. Check the legibility of your text, logo and icons in Dark Mode With this tool, you are able to detect [...]
Google Chrome 81 Will Block Non-HTTPS Images in Email
Many brands and retailers are still sending emails with images that are loading through HTTP. However, the next Google Chrome update (Chrome 81) will cause emails with images loaded over HTTP (vs HTTPS) to no longer show up in some webmail providers. This will mainly affect Outlook.com and Xfinity’s webmail service, as Gmail and Yahoo! [...]
All You Need to Know About Gmail’s Promotion Card Image Previews and New Promotion Tab Features
Posted in Gmail Promotion Card by Justin On December 5, 2018
Gmail unveiled yesterday a slew of new features for the Promotion Tab in their iOS and Android Gmail app. Technically some of these changes have been out for a while as early as as April of this year. In fact, Jordan Grossman, Google’s Product Manager of Gmail and Gmail ads gave a presentation on these [...]
Gmail Promotional Tab Markup Tool for Promotion Card Image Previews
I've created a simple tool to help you generate the markup required to display the features when your email is featured in the Top Promotions section in Gmail's Promotion Tab (Note there is no guarantee that your email will be featured).
Full Page Intro Animations in Email
Posted in Interactive Email, Interactive Email Tutorials, Kinetic Email by Justin On October 31, 2018
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.
Gmail IMAP (GANGA) Finally Supports Background Images in New Update
It looks like Google has finally added background image support for the Gmail App for Non-Google Account (GANGA) client! This is a BIG deal because this means that background images are now supported across all major email clients.
Fade in Text Effects for Email
Posted in CSS Help, Interactive Email, Interactive Email Tutorials, Kinetic Email by Justin On August 2, 2018
Adding subtle text animations in your email hero area can add some sophistication into your design. Although not every email client supports CSS animations, here is a simple technique you can use to display a slow drop down and fade in effect in your email design.
The nice part about this technique is that you don't need to have a fallback design, clients that don't support animation just display the text.
The nice part about this technique is that you don't need to have a fallback design, clients that don't support animation just display the text.
How to Fix Jittery CSS Animations in iOS Mail
Posted in CSS Help, Email Resource, Interactive Email, Interactive Email Tutorials, Kinetic Email by Justin On July 28, 2018
Here is a technique that solves a common kind of animation jitteriness in iOS Mail. Under certain conditions, quick, single iteration (non-repeating) CSS animations in iOS tend to skip - causing movements to look glitchy and jarring.
A solution is to increase the duration of the animation but make the animation complete faster. Read on for the details...
A solution is to increase the duration of the animation but make the animation complete faster. Read on for the details...