How to Design Emails with Auto Layout and Slinky Sketch Plugin

Alright guys, so today I’m going to show you how to design HTML emails using Sketch — last week I had absolutely no idea how to design emails, so believe me when I say that this is dead easy. So, do you have 5 minutes to spare?

———

Honestly, I didn’t know all that much about designing HTML emails (until last week) because I’ve never really done it before; however, I recently had to learn since I’ve now started a monthly newsletter. I already knew that emails were composed of fairly old-school HTML, but designing and coding them from scratch seemed a little daunting. Naturally, I wanted to be able to use a tool that I’m quite familiar with (Sketch, in my case), and bingo, I found the Slinky Plugin and Auto Layout Plugin!

Slinky is a Sketch Plugin that converts your .sketch designs to HTML templates. Let’s begin by actually designing the email in Sketch, then we’ll look into grabbing the HTML and dropping it into some email marketing software like MailerLite

Layout Design with Sketch

I still believe in the classic 600px rule, and if the newsletters that I’m subscribed to are anything to go by, it seems that many others do as well. Press A for Artboard and draw out a custom-width artboard at 600px using the mouse/TrackPad.

I very rarely enjoy overly complex column-based newsletters, and most newsletters are designed to be read on a mobile device anyway, so let’s roll with a fluid layout with vertically stacked content, where the max-width is 600px. Create some rectangle shapes + text layers to create a vertical repeat of content. Leave a 75px margin up top, and 50px on the sides so that our content isn’t too tight.

We’ve left 75px on top to give us room to include some essentials; that is, the recipient's name and an unsubscribe link (this is very important!). It’s courtesy to address the recipient by their name, and let them unsubscribe from your content if they’re no longer finding it beneficial. Go ahead and add those in:

Responsive w/Auto Layout

Auto Layout is a constraints-based Sketch Plugin that allows us to test responsive layouts. For those that have never used it before, it’s very similar to the Group Resizing feature in Sketch. Long story short, use pinning to “pin” the recipient's name to the top-left corner with a margin of 25px 50px, and the “unsubscribe” link (make sure that’s underlined by the way) to the top-right corner using the same values.

Naturally, the main body of content should also have a 50px margin on either side, but it should also be fluid, so make the width 100% (also using Auto Layout). Tip: wrap each content block in a Group (⌘ + G) and apply the 100% to that.

Finally, hit the "devices icon" in the Auto Layout tab to test what the newsletter would look like on an iPhone 7 device. Pretty cool, right? You can also manually resize the artboard and watch the template adapt to the fluid width on-the-fly.

HTML Conversion with Slinky

Next step — let’s prepare our design to be exported to HTML by Slinky. Firstly, it’s important to note that you will still need to mark assets as exportable, so select each image asset and click “Make Exportable” in the bottom of the inspector (I’d recommend using the JPG format with compression to lower the file-size).

Next, linking — rename (⌘ + R) your layers/objects with the link URL and Slinky will automatically convert them to HTML links during the conversion. Also, if your email marketing software has any vital tags, you can use those too (for example, to include an unsubscribe link in MailerLite, you would type ${unsubscribe}). Alternatively, you can add them manually later on, which I’ll explain how to do very shortly.

Note: I would recommend using a web-safe font such as “Arial” or "Verdana", not only to make the exported HTML more compatible with the various email clients but because Slinky is still in beta and we don’t want to screw anything up.

Plugin to Email Software

Shall we export our design then? Select the artboard and hit ⌘ + ⌥ + E to begin, then save the .html file to the desktop. Open up your email software (I’m using MailerLite here), and create a campaign. I don’t know about other apps, but MailerLite allows me to drop in some HTML code and see the result side-by-side:

We’ll need to add some functionality that allows the reader to unsubscribe to the newsletter if they wish, and of course, include the recipient's name so that the email feels more personalised. If you didn't already do this by renaming the Sketch layers with codes like ${unsubscribe}, MailerLite has a "tag" generator interface that lets you copy that information into the HTML manually. Go ahead and do that:

And we’re done! How easy was that? Did I miss anything? If so, let me know in the comments below and I'll update the article — thanks for reading guys!

———

By the way, I have an e-book coming out very soon that teaches interface designers about prototyping, collaborating and handing off designs with Sketch + Craft + InVision. Sign up to my newsletter and I'll send it to you (for free — no strings)!