16

Ask DN: What's your email design workflow like?

over 7 years ago from , Design @ OneSignal

Most designers have a different way of approaching email design. Some write CSS inline, some use an automated tool, some use a WYSIWYG tool, some write their own HTML.

I recently shared my own (email design workflow)[http://www.leemunroe.com/email-design-workflow/] and I'd love to know how this compares to yours.

28 comments

  • Sean LesterSean Lester, over 7 years ago

    1) Content is emailed to me

    2) I design content into the modular template I've created for our emails in photoshop

    3) I send mocks, go back and forth forever on which subtle background image conveys the appropriate narrative

    4) slice the .PSD because no one here really knows how to code emails so the entire thing is image slices

    5) what the fuck am I doing with my life.

    23 points
    • Taylor Van OrdenTaylor Van Orden, over 7 years ago (edited over 7 years ago )

      5) what the fuck am I doing with my life.

      I ask myself this every day, and my life includes far less slices.

      I use Zurb's Ink templates with their inline tool. Heaven forbid anyone wants a fucking full width header image though.

      I'm lucky because my company's eblasts are really all about the content. Templates just work.

      2 points
    • Kristina DuttonKristina Dutton, over 7 years ago

      That's the exact workflow I have as well. EXACT.

      1 point
  • Colm TuiteColm Tuite, over 7 years ago (edited over 7 years ago )

    Smash computer

    10 points
  • Moeed MohammadMoeed Mohammad, over 7 years ago

    1) Stand up 2) Flip table 3) Walk away

    8 points
  • Jason RodriguezJason Rodriguez, over 7 years ago (edited over 7 years ago )

    Love the email topics on DN, Lee. Personally, mine is fairly basic. I mainly use a template I built off of the Salted Template I did for A List Apart:

    Main styles are inlined, enhancements for mobile are in the head. It's based off of the newsletters we send at Litmus (I know Kevin's lurking, maybe he'll share more about the Litmus process) and follows a similar approach. Our approach is atypical, though, we're not sending on behalf of clients or anything, and we have a unique audience in that they are email fanatics.

    There are a few people writing more and more about their email process, which is awesome to see. Here are a few links that may be of interest:

    A lot of people are bringing in Sass, Grunt, Middleman, and the like, which is amazing to see in such a traditionally backwards medium.

    6 points
    • Lee Munroe, over 7 years ago

      Great articles Jason. Out of interest, how do you manage transactional emails? e.g. if you wanted to make a design change to the Litmus receipt, how would you go about it?

      1 point
      • Jason RodriguezJason Rodriguez, over 7 years ago

        Same workflow for the most part. They are all built off of one general template and updated according to purpose. Matt, our manager of all thing email, may have them abstracted out into actual templates within Pardot, but they all follow the same pattern.

        On occasion, we do some one-off emails to customers that have more of a personal feel. Sometimes we do simple plain text or basic HTML to give it a plain text feel. Either way, they use the mostly inlined, enhancements up top method. Nothing fancy workflow-wise, since our audience and load doesn't really require it.

        That being said, if I had to manage a large volume of emails or worked in an agency setting, I would absolutely set up a well-defined process and stick to it, similar to Brian's approach in that Smashing Mag article. There are lots of moving parts in his world, so keeping things modular and relying on a pattern library and build system is a beautiful and necessary way to go to keep quality consistent and high.

        0 points
    • Sean LesterSean Lester, over 7 years ago

      Haha here I am talking about the Mickey Mouse process I use for email design, and then Mr. Litmus steps in and drops this post off, furthering my shame.

      Great post, though, thanks for all the resources.

      1 point
    • Sean LesterSean Lester, over 7 years ago

      Are there any resources you could share for getting started with learning to design/code emails? I'd really love to have this skill and move beyond "drawing" emails to be sliced - the code only going so far as to place these slices in their proper orientation and linking them places (which I don't even do myself).

      0 points
  • Clinton HalpinClinton Halpin, over 7 years ago

    A while back I built out our email templates. Similar to your workflow the best thing ever is having Grunt running and automatically inlining CSS. Its been really great to use an actual stylesheet to keep things consistent over 20+ emails ( so far ).

    One thing I'd like to look into in the future is having a nicer way of getting the content into the actual email templates. I'm thinking you could use something like markdown and pass that to an underscore template to build out the individual email files. Right now its just copy and paste for each email that we need.

    1 point
    • Miguel Solorio, over 7 years ago

      If you haven't already, you could look into Assemble (runs on Grunt) which uses handlebars for templating. I use it for web + HTML projects and works fantastic.

      0 points
  • Bryn JacksonBryn Jackson, over 7 years ago

    I saw the headline and got all excited because I thought my process was really clever, but it's almost the exact same as yours (swap Sketch for Photoshop and Mailgun for SendGrid).

    Eh, at least it's validation that it was a good idea :D

    1 point
  • Ryan Hicks, over 7 years ago

    I don't do email design, but I took a crack at it last week to do some prototyping for a company newsletter I had to redesign. It's hard as ef to do! I'm using Zurb's ink framework to help with responsiveness and holy hell it's confusing. Table inside of table; table inception! Any resources out there to help me out to make it easier is appreciated lol.

    1 point
  • Moaaz SidatMoaaz Sidat, over 7 years ago (edited over 7 years ago )

    Read through your process. Thanks for sharing. Was really looking for ways to use Sass and Premailer for their respective benefits, not too well acquainted with Grunt to set those up, but this is definitely encouraging enough to do so.

    I recently did a redesign of our emails at MappedIn. This was my first time designing and developing emails. For me the process was as follows:

    1) Reviewing the content for the email and sketching out wireframes for the design, considering standard desktop size and responsive sizes for mobile.

    2) Researching development methodologies for building email, seeing what works, what doesn't, best practices and recommended strategies.

    3) Building out the design in Sketch keeping in mind the constraints for email (which are relatively stricter when compared to web design standards). I believe this step is necessary to get the aesthetics right instead of starting to develop straightaway.

    4) Starting to code the designs. I used Brackets, primarily because I thought that it's live preview feature would come in handy (soon I realized this wasn't true). At first I used an external stylesheet, to use the live preview feature (doesn't work with tags or inline styling). I did most of the code for responsive behaviour during this stage. Once satisfied with the result in browser, moved on to step 5.

    5) Refining/testing process. This is possibly the most painful process, made significantly easier by the use of the Litmus App (all email designers/developers should try it out if they haven't already, seriously: https://litmus.com/ ). This involved testing the email rendering in different email clients, moving all style within style tags and inline (yeah, did that manually for the most part)(for Gmail...and Outlook), using more tables for a more structured approach to the design, using

    for most of the centering in Outlook, and making sure that the email rendered appropriately on all desktop and mobile clients of concern. Being a designer primarily, I think I took a lot of time to fix the smaller details on some major clients of concern, which made this process the longest.

    Yeah that's about it.

    By the end of the email design process, which I felt was quite challenging (for someone who hadn't coded with tables before - I'm an HTML5 person), I had definitely learnt a lot. At the same time, there was some frustration as to how some things seemed to break unexplainably on some email clients (Gmail and Outlook), and the lack of support for some modern (HTML5, CSS3) features.

    Although I would jump at another email design opportunity because I'd like to be challenged similarly again and see how I can refine my process for email design, I'm really hoping for things to improve for email design in the future.

    1 point
  • Llecram P, 2 years ago

    This is awesome and I typically use Bairmail for all of my mail and email workflows.

    0 points
  • Johnny BridgesJohnny Bridges, over 7 years ago (edited over 7 years ago )

    1) Use this - https://github.com/jahvi/generator-htmlemail

    2) Test in litmus.

    3) ...

    4) Profit!

    0 points
  • Al HaighAl Haigh, over 7 years ago

    Sounds like some of you could benefit from Campaign Monitor's fancy new email builder - https://www.campaignmonitor.com/canvas/

    0 points
  • Maurice CherryMaurice Cherry, over 7 years ago
    1. Meet with the client and get an idea of how they plan to use email. Some of them don't know the difference between Outlook and an outhouse, so getting crystal clear with them on what they need and how they will use it is crucial for me to determine the scope of the project (i.e., is it one template, multiple templates, autoresponders, etc.)

    2. Ask detailed questions about their list size, frequency of sending emails, etc. Some clients are starting from scratch, and others have thousands of emails and send daily. Looking at their list analytics also lets me know which clients and/or devices to design towards, which can cut down dramatically on testing.

    3. Create wireframes and mockups. We kinda treat it like building a website and get the client involved each step of the way.

    4. Build. We slice the template up in Photoshop, export the HTML/CSS, then go through and add in the client's content and images. (I should mention that we only do templates for MailChimp -- no other ESPs.)

    5. Test in Litmus. By now,we're pretty familiar with a lot of email quirks, so this time is often pretty short (maybe a day or two). Possibly shorter if we're only targeting a handful of clients.

    6. Install and create a sample campaign, then walk them through how to replicate and add/remove content from the template through MailChimp's interface.

    0 points
  • Julie RobertsJulie Roberts, over 7 years ago (edited over 7 years ago )

    Emails are generally pretty annoying. Creative used to design a graphic (image + text) for marketing to stick in an email to send out to their lists (easy and hard for anyone to screw up) and then we started one off experiments with MailChimp and templates (our biggest issue is that we are generally sending out virtually identical emails under multiple brands in different markets, so the image was really easier).

    After I found out marketing was sending out mail merge emails from freaking WORD, we stepped up our game and now creative is designing and type setting in MailChimp and including any mail merge tags and uploading to the company we actually send it through (another issue, totally annoying) sending off to the individual markets to upload their lists and test before sending. So my workflow is this:

    • get the copy
    • create some sort of header (illustrator), save out as jpg and upload to MailChimp with logo
    • edit and typeset, including any mail merge tags
    • finesse and test from MailChimp, then save as template
    • download template to load into other program
    • let whoever is in charge know that it is ready to send
    • go back and fix whatever corrections or changes they wanted in Mailchimp, then redownload and reupload template.
      • repeat about 6x
    0 points
  • Darren WongDarren Wong, over 7 years ago

    I am currently overhauling our email designz and have been inspired by modular approaches like: http://www.paul.ie/skillpages-email.htmlhttp://www.leemunroe.com/transactional-email-templates :)

    Heres my workflow: 1. Design email patterns (in Ai) 2. Send to developer (hand off could be better) 3. Test on all the things 4. Refine 5. Send email

    0 points
  • Poyi ChenPoyi Chen, over 7 years ago

    Think the most time consuming part of the workflow is testing. My flow looks like: 1) Design the email with real content 2) Build the template with Foundation's Ink 3) Run code through inliner and test with Litmus 4) Tweak code to make sure it works on all desire browser and test again

    0 points
  • Zach UbbelohdeZach Ubbelohde, over 7 years ago

    I have used Zurb's Ink with great success. Haven't been able to find an easier option that is as widely compatible.

    0 points