Get Your Responsive Emails in Order

Lesson #123Responsive Email Design

You’ve probably heard it before: Content dictates design. Getting your content to fit your design can be challenging. This is especially more challenging in Responsive HTML Emails where many CSS properties just don't work on every email client or device. In responsive email design your content often will stack on smaller screens where space is limited. Being able to control what column stacks on top or bottom can make a big difference in usability and readability. In this lesson, you’ll learn how to source order in responsive HTML emails so your content can work with your design.

Bulletproof vertical spacing in HTML Emails

Lesson #119Responsive Email Design

One thing that is consistent in email development is how inconsistent your emails will look on different email clients. Luckily, using Foundation for Emails can help things get more consistent by packaging up all the know-how, workarounds, and hacks on the web so you don’t have to worry about these issues. One of those challenging inconsistencies is with vertical spacing between or inside your elements. In this lesson you’ll learn some of the perils of vertical spacing in HTML emails and what techniques actually work on all clients.

Pain-Free HTML Email Coding

Lesson #112Responsive Email Design

Coding responsive emails can be a real pain but the juice is worth the squeeze. Email is still the best medium to reach your audience. With the release of Foundation for Emails 2, we help you get away from crappy table-based markup and into a world you might be be more familiar with (especially if you’ve used Foundation for Sites). The Inky markup language will make you feel right at home by using <row> and <columns> similar to what you’d use on the web. In this lesson we’ll build a common pattern you’d use in a responsive email using Inky and Foundation for Emails 2.

The Basics of Email Metrics

Lesson #111Responsive Email Design

Far from dying, email seems to grow in both effectiveness and importance each year. More and more digital products include some email component to either onboard new users or as part of the functionality of product. For example, in our design platform, Notable, emails are a critical component of the way the product works. Users are notified when they are added to projects, when feedback is given on design work, and when updates are made. Other popular digital products and services work in much the same way, with email serving many functions core to the product itself. Yep, email is not just a tool for marketers anymore. It’s a tool product designers can use to convey information and drive action.

In this lesson, we’ll break down what the most common email metrics are so we can measure the effectiveness of our emails, and dive into A/B testing so we can continue to iterate on our design and content.

Staying D.R.Y. with Panini

Lesson #108Responsive Email Design

ZURB loves flat file generators, so much in fact that we created our own as a companion to the Foundation Family. Panini is a flat file compiler that uses the concepts of templates, pages, and partials—powered by the Handlebars templating language—to streamline the process of creating static prototypes. Panini comes with tons of Handlebars helpers built in, like a repeat helper or markdown parser, but in this lesson we’ll take a look at creating a custom month/year helper for an HTML email.

Bulletproof Centering in HTML Emails

Lesson #107Responsive Email Design

Ironically, vertically centering things in HTML emails is relatively easy compared to web development. The challenge is coming up with a centered layout that tests well across clients. Surprisingly, a lot of the solutions out there did not seem to test well – and the major problem child was Outlook (surprise, surprise). You’ll commonly need to center images, text, buttons, and the email's container for your designs. In this lesson we’ll learn some different techniques (and hacks) to center anything in emails.

Get Your Responsive Emails in Order

Lesson #93Responsive Email Design

Ah, responsive email design — the art of stacking the thing on the left on top of the thing on the right for smaller screens. While this is a powerful concept in the world responsive emails, designers may sometimes want to, dare we say, stack the thing on the right on top of the thing on the left. Today we’ll explore the concept of source ordering using Ink and and the power of table-based emails.

1. Sketch it Up!

First things first, you need to know what it is you’re trying to build! Start sketching how your email is laid out on desktop and mobile. These should be quick and dirty and look something like this:

Avoiding the Spam Bin

Lesson #64Responsive Email Design

If you've worked in email design, then you've likely faced the laborious task of wrangling tested tables, compatibility nightmares, and templates that might or might not fall apart on mobile devices. But no matter how much time you spend designing a great email, if it's marked as spam then your work is for nothing. Here are tips to avoid readers' spam filters.

Dive Deep Into a Responsive Email Grid

Lesson #38Responsive Email Design

While more people than ever open email on mobile devices, responsive email templates aren’t easy to customize beyond colors and type families. As collections of reusable code and design patterns, frameworks give designers a solid, tested bases on which to build their own templates.

Although the grid in Ink uses nested tables, understanding how it works pays off when users can read an email under most any circumstances. Here’s how you can use the Ink grid to make a complex responsive email template.