Detangle your content from repetitive email code with configurable, reusable custom components.
In Inkcite 1.18, we rebuilt Helpers from the ground up to make them easier to use while also making them dramatically more powerful. Helpers give you and Your team the ability to create custom, modular, configurable components that can be used throughout an email and across campaigns.
If you’re unfamiliar with the concept of Inkcite’s Helpers, they are designed to detangle email content from layout code. I wrote at length about the power and flexibility of content and display patterns here. TL;DR: Helpers allow you to generalize your…
My fellow #emailgeeks, allow me to blow your mind.
I wrote this tutorial on building a fluid responsive email back in 2015.
There have been a few changes in email clients and rendering since then — Gmail adding media query support being among the most notable because it completely changed the way you had to code modern, responsive emails.
That said, despite the myriad of new best practices and changes to email rendering, my tutorial is every bit as relevant today and works as great as ever in every version of Outlook including the mobile app, in Gmail mobile and…
Stig Morten Myre’s Better Video Previews for Email is a modern approach that leverages CSS animation, responsive background images and VML to give your recipients a more engaging, interactive video preview experience.
Like the rest of the #emailgeek community, the team here at Inkceptional was extremely impressed and eager to use it in an upcoming campaign. That said, this cutting-edge effect can be a bit daunting to implement. There are lots of opportunities to make an #emailmistake: image file names appear repeatedly in the code, calculations are required required if you want to change the size or number of frames…
Dan Mall’s amazing piece about Content & Display Patterns should be of particular interest to email developers. Coding modern, responsive emails often requires the coder to wrestle with hundreds of lines of duplicate code, deeply nested tables and tangled rendering quirks. Traditional email development, which mixes content and display markup, results in complex, hard-to-read code that is nearly impossible to maintain.
Separating your code from your content is an easy but powerful way to #MakeEmailBetter. …
Many email clients (including Gmail and mobile devices) will automatically transform phone numbers into links. Prevent this behavior using the zero-width white space character (​) Instead of this:
Inject the zero-width white space character anywhere in the number to trick the email client and prevent it from turning the number into a link. I like to put it in the middle:
This Litmus compatibility test shows that it works great in all email clients, including Outlook and Office 365. It works for different format variants and international numbers as well.
Based on research by Email on Acid, the overall size of your email’s HTML can have a big impact on the deliverability and performance of your email. Sending an unnecessarily large email:
One of the safest and easiest ways to minimize these risks is to minify your HTML before you hit the Send! button. Hand-crafting an email with its myriad of deeply-nested tables, redundant inline styles and endless workarounds typically require the astute coder to…
Recently, in the Litmus Community, someone asked if high-resolution background images could be used with the Fluid-Hybrid responsive email technique.
The Fluid-Hybrid technique is popular because it doesn’t require media queries to make your email responsive. However, swapping in high-resolution images requires media queries. Fluid purists may desire to avoid media queries to ensure the widest possible compatibility across devices and clients. In my opinion, the best results can be achieved by combining these two techniques.
Here’s a video that demonstrates what it’ll look like:
When the available width falls below the email’s breakpoint, the 2x high resolution background…
Creating a modern, responsive HTML email using the popular Fluid-Hybrid technique normally requires hundreds of lines of code chockablock full of nested tables, floating divs, Outlook-conditional logic and a wee bit of luck. Its complexity requires lengthy tutorials, layout calculators and boilerplate code generators — and in the end, you’re left with a staggering amount of markup that is fragile and hard to maintain.
Thankfully, it doesn’t have to be that way. There is a faster, easier way to build modern responsive emails. Take a look! …
In this tutorial, I’m going to show you how to build a modern, responsive email using Inkcite, a free, open-source email framework. You will learn about:
Before I begin, if you haven’t installed Inkcite 1.8 (or later), instructions can be found here.
Open a terminal or command prompt…
Best of all, running Middleman’s server from within Rubymine is a snap: