good spam

if you're making a games or releasing some other type of content regularly, chances are that you want to tell people about it on platforms beyond twitter. many people make use of newsletters to build a dedicated audience and generate hype leading up to releases.

these are a couple of guidelines and code snippets that might improve your newsletter / email functionally and cosmetically. some of them are very very basic, but recently i've been seeing way too many emails that could easily be improved with a couple of tweaks.

where to start?

as far as i am concerned, the two big options here are:

mailchimp (mature, packed with features, easy to use, pricey when scaling up)

and sendy (lightweight, a bit harder to set up but a lot more affordable, i'm using this one)

there's not much of a difference for your audience here, but you should be aware of the costs and workloads that come with either of these tools. let's assume that you've made a decision and set up your newsletter - here's how you can make it nicer:

widths

you'll never know exactly how wide or narrow the user's viewport will be or what device they're viewing it on, so avoid using absolute values for your container / image / embed sizes. it's really frustrating to have to scroll horizontally because a picture is too large, or to look at tiny lines of text that are stretched out all over an extremely wide desktop display.

that's why you should wrap the entirety of your newsletter in a max-width wrapper that can dynamically scale horizontally, like this:

<div class="wrapper" style="max-width: 600px; margin: 0 auto;"> ... </div>

for clarification: max-width: 600px; tells it to never be wider than 600 pixels, margin: 0 auto; will make sure that it's centered horizontally. those 600 pixels are an arbitrary value i picked because it still looks alright when it's sitting there, isolated, on a big screen.

images

images are good, but they're less good when they break your layout. since we set up a max-width container above, just embed images within that and style them so they fill it out completely:

<img src="..." style="max-width: 100%; height: auto; border: 0;" alt="alt text" />

we're using max-width: 100%; to tell it to be exactly as wide as the container, height: auto; so it scales up and down proportionally, and border: 0; so you can link the entire image and avoid giving it an ugly blue link border.

colors

if you want to use your own background and font colors, just set them in the <body> tag:

<body style="background: black; color: white;"> ... </body>

as for custom link colors: unfortunately, since external css generally won't work, you'll have to set them as inline css for each and every link tag. in my opinion it's worthwhile to get rid of that default blue:

<a href="#" style="color: #333; text-decoration: none; border-bottom: 2px solid #333;">...</a>

headers

personally, i like to add a full-width container at the very top to show the subject line or straightforward description text, as well as link to a browser version of the newsletter. this extra line is really convenient because it's the very first thing, which will then be displayed below the subject line in most clients' inbox.

<div class="top" style="max-width: 100%; margin: 0; font-size: 12px; padding: 6px 6px;"> SUBJECT LINE GOES HERE <a href="[webversion]" style="color: #333;">View this message in your browser.</a> </div>

misc. tips

a couple of other best practices / things you shouldn't forget:

alts and damage control: add alt text to your images in case they don't load properly. some clients won't display images at all unless the user specifically opts in. also make sure that things still look okay even if the entirely of your css breaks (or someone were to copy & paste the entirety of the email).

legal details:

always include an unsubscribe link. no one should have to be forced to send you a message and ask to be removed from the list.

you're legally required to list a physical real life address somewhere. i heard it's also okay to just link to a generic 'legal' page on your website, which is what i'm doing in most cases. just make sure someone can be held responsible if things go weird.

with services like amazon SES (used with sendy), you're most likely required to use 'double opt-in', meaning people have to receive a confirmation link first before they are properly signed up to your list.

structure and user flow:

most tools (e.g. sendy, mailchimp) let you direct the user to a specific url after they subscribe, consider keeping them on your website and not leading them to an empty confirmation screen that leads nowhere. they'll also let you set custom text for pretty much every generic system email, so consider adapting them to your own style.

make the sign-up process as simple and convenient as possible. don't ask for users' names in a form if you don't really really need them.

if it's a longer email, use headlines to divide it into sections, then consider breaking those sections up even further. give people bite-sized paragraphs and avoid making them look at huge walls of text first thing.

message content:

if the time window allows for it, link to recent articles or coverage about your project. ideally the people running those sites will notice a hit spike for a post about your thing and will probably talk about it again when they can.

if you can, provide a list with web versions of previous newsletters. as your list grows, more and more people will miss out on previous emails, so why not offer them additional content at the cost of a couple of links.

speaking of links: link to your site very generously. put link tags around images, use the same link target in multiple instances, make sure that there's at least a very reasonable numbers of entry points to your website / product.

finally, treat every newsletter release like an actual product release. talk about it prior to sending out the email, tease exclusive content that people who aren't subscribed might miss out on.

i'm not trying to say these are definite golden rules you have to follow, but we're applying most of them to our crows crows crows emails and so far it's working out well for us.

hopefully this little list is useful / applicable at all. please let me know if you think there's anything i missed. feel free to get in touch (twitter, email) for questions & feedback. thanks!

love,

dom