-
Notifications
You must be signed in to change notification settings - Fork 0
Home
Welcome to the letterform wiki!
This project is designed to eventually offer a comprehensive overview of the "why" behind progressive email design. It includes boilerplate pieces, CSS classes, FAQs, guidelines, modules, and tutorials.
Please note, this project is still in progress, and likely will be for some time. You're more than welcome to use it as you wish, and the boilerplate is in a stable form. From this point forward, I'll continue to add progressive enhancements and template pieces as I can.
Because email generally isn't truly responsive, you'll only get one !important designator that can override your initial style - so choose wisely. Most often, you'll use this to hide and show block level elements. A common example would be to switch between an image block for desktop versus mobile. Keep in mind, this switch can be unreliable and often requires additional sorcery. You'll also need to use !important to override default styling from email clients.
If you're familiar with web design, you likely understand the levels of the box model. On a web page, you can typically apply each level to the same element (i.e., a button with padding, border, and margin). In email, the box model often has to be abstracted a little further. You will sometimes need to apply padding and margin to different levels of a table, table rows, or table cells. The web box model is like a gobstopper, with all the layers integrated in a single object; the email box model is often more like Russian nesting dolls, where each layer is manipulated discretely.
There's some debate on whether comments can trigger spam filters or negatively impact your email, but the general consensus seems to support that they're safe to use. Either way, if you can't properly navigate through the elements of your email, you're far more likely to make mistakes that really will impact your recipients. It's usually helpful to mark where a large block begins and ends; some sections benefit from an explanation of purpose, especially CSS fixes.
Always size your images to the largest you want them to possibly display. This is because certain email clients will always render width:100% images at their native resolution, regardless of container size. The main takeaway here is that full-width images should never be natively larger than your center column; otherwise, they will blow out the layout.
Your work will be much less time-consuming if you write CSS and use a service to pull all of your clean styles inline. This is especially important for client fixes, as they often need to be applied to everywhere. Do you really want to add all your boilerplate styles to every single tag?
There is good support for both pixel and percentage based negative spaces, but watch out for which block level is being used in the calculation. For best results, apply padding and margin to <tr> or <td> elements, as some clients will forcibly style <p> and <h#> tags, even when you use preventative measures. However, you can also play with line-height for more flexibility in your layout designs. One of my favorite fool-proof spacer tricks is <p style="line-height: 20px;"> </p>, where you can set the dependent variable to the line height to your liking. This works especially well with consecutive or nested tables.
A good font stack is the most essential part of your email typography. Even if it's as simple as font-family: Arial, 'sans-serif', you're maintaining a consistent look and managing what your readers receive. You'll find instructions in the repo for utilizing web fonts for more creativity. For help building a nice fallback stack of common "web safe" system fonts, check out cssfontstack.com.