Email

Choosing a Responsive Email Framework: MJML vs. Foundation for Emails

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…)

On Paid Newsletters: An Interview With Adam Roberts of SitePoint’s Versioning

You don’t often think of email as something you pay to get. If anything, most people would pay to get less of it. Of course, there are always emails you like to get and opt into on purpose. We have a newsletter right here on CSS-Tricks that we really try to make worth reading. It’s free, like the vast majority of email newsletters. We hope it helps a bit with engagement and we make it worth doing financially by showing the occasional advertisement. It’s certainly not a full-time job.

I spoke with Adam Roberts who is trying to make it a full-time job by running SitePoint’s Versioning newsletter as a paid subscription. I don’t know much about this world, so I find it all pretty fascinating. I know Ann Friedman has a paid newsletter with a free variant. I know theSkimm is a free newsletter but has a paid membership that powers their app. I was told Bill Bishop made six figures on his first day going paid, which is wild. In the tech space, Ben Thompson’s Stratechery is a paid newsletter.

Let’s hear from Adam on how it’s doing it. I’ll ask questions as headers and the paragraph text is Adam.

(more…)

Visual Email Builder Apps

I bet y'all know that apps like Campaign Monitor and MailChimp have visual email builders built right into them. You drag and drop different types of content right into a layout. You edit text right within the email. It's nice. It's a lot nicer than editing the quagmire of HTML underneath, anyway!

But not everybody needs all the rest of the features that those apps bring, like list management and the actual sending of the email. Perhaps you have an app that already handles that kind of thing. You just need to design some emails, get the final HTML, and use it in your own app.

When I was looking around at email tooling, I was surprised there were a good number of apps that help just with the visual email building. Very cool.

(more…)

The Tools of an HTML Email Workflow

Last week's ShopTalk Show was all about HTML Email. It's such a fascinating subject, as technically it is front-end web development, but it almost feels like a bizarro alternate universe.

We have dozens of browsers to worry about, they have hundreds of clients to consider. We worry about whether fancy new APIs are supported, they worry about whether padding is supported. We have grid layout, they have.... grid layout?!

It's tempting to make the joke: "It's coding like it's 1999!", but as we talk about in this episode, that's not really true.

Aside from all that, another thing I thing fascinating are all the tools involved. Lemme think this out.

(more…)

Client Email Helper

For all you freelancers out there, Jessica Hische has written some copy to help you articulate saying no to things you should be saying no to.

I’ve created this handy tool to help you say “no” to free and low-budget work and to help ask for more favorable contract terms before the start of a project.

Inky and Slinky

Inky is kinda like a preprocessor for HTML created by Zurb, specifically designed for responsive emails.

I'm sure a lot of us have hand-coded HTML emails (I do it regularly) and know that it's typically <table></table> soup. It's not even just the tables that are annoying, but the fact that there are so many of them nested to do even fairly simple things it's hard to keep straight.

Inky's appeal is pretty clear from the first demo in their docs:

(more…)

A Guide for SVG Support in Email

We’ve talked about SVG quite a bit here on CSS-Tricks, but one area we haven’t quite touched on is email. Now that browser support for SVG is all in the green, it would be easy to assume that we can start using SVG everywhere. However, if you’ve worked with email before, you may know that it often follows way behind the web as far as feature support. You know, kinda the way California looks at North Dakota with trends: just a few years behind. :)

This article takes a deep dive into four different ways SVG can be used, and compares support for those methods across several of the most popular email applications. Let’s see where we get the most support.

(more…)

Override Gmail’s Mobile Optimized Emails

Many emails are designed with a large screen in mind. Text that looks great on a large screen can be difficult to read on a mobile device, though. If Gmail deems that the font-size of any text in an email is too small to be legible, it will increase the size and flag the message. That’s pretty nice. What could have been illegible is made legible, eliminating the need to pinch and zoom our screens. It can also be a little frustrating.
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag