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:

  1. Has a higher risk of being classified as spam
  2. Can be truncated by some email clients
  3. Loads slower and risks instant delete from impatient recipients

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:

  • Creating a new Inkcite project
  • Previewing your email in your browser and on a mobile device
  • Inkcite’s Table, Image, Anchor and Button Helpers
  • Keeping your email code DRY (don’t repeat yourself)
  • Using Fluid-Hybrid techniques to make it mobile friendly
  • Automatic image optimization
  • Using Google Fonts in your email
  • Minifying your email’s HTML

Before I begin, if you haven’t installed Inkcite 1.8 (or later), instructions can be found here.

Open a terminal or command prompt…

Rubymine is a great development environment for sites powered by the Middleman preprocessor — particularly if you’re a Rails enthusiast like I am. Rubymine’s built-in support for Bundler, Rack, ERB plus it’s visual, context-aware HTML, Javascript and CSS editors streamline static site building.

Best of all, running Middleman’s server from within Rubymine is a snap:

  1. Open the Run menu and choose Edit Configurations…
  2. Click the + sign (in the upper-left corner of the dialog) to add a new configuration and from the drop-down menu that appears, select Gem Command.
  3. The configuration properties will appear on the right-hand side of the…

Jeffrey Hoffman

Creator of Inkcite, the modular design system for modern, responsive email development. #emailgeek #MakeEmailBetter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store