The tools we use to design, build, and test email campaigns have changed drastically over the years. From Dreamweaver and Builder, to Photoshop and Figma, tools have evolved to make our work more dynamic, collaborative, and enjoyable. Those classic tools still hold a special place in the hearts of email geeks everywhere. More importantly, they influence what we expect of our current tools and what we want to see in the future.
In this webinar, Shani Nestingen from Target and Camille Palu from Camiah joined the Litmus team to geek out (and commiserate) about the history of making emails and the tools we used.
Didn’t have a chance to watch the webinar live? Don’t worry. You can access the full recording at any time and read the Q&A below.
A big thank you to everyone who chimed in during the webinar with a question! Here’s a recap of our answers to the most popular questions, along with our take on some of the questions we didn’t get to during the live webinar. Have any additional questions? Please leave them in the comments.
Any tips for adapting email for Dark Mode?
Lily Worth: Alice Li, Litmus’ Principal Email Engineer, wrote a great guide to Dark Mode that would be a helpful read. It walks you through Dark Mode media queries to add to your embedded CSS, so you can tailor your Dark Mode experience.
Can you define open source for someone who only has DW HTML knowledge?
Camille Palu: The definition is: software for which the original source code is made freely available and may be redistributed and modified. This means the code is not a secret. This is great because it can be updated and iterated on to make it better and better, rather than being locked down and owned by a company. If it’s locked down and owned by a company, there is less chance of updates being made in a timely fashion, or even at all.
Is Dreamweaver the only point-and-click-edit app?
Camille Palu: Dreamweaver is the only one I know of. Also Litmus Builder has the functionality.
How does Atom compare to Sublime?
Camille Palu: Both are good! You should definitely look through the real needs and reasons for a tool for the work you do all day. I prefer the customization of the packages that Atom supports. It’s worth testing out both to see what works for you and your team.
How did you learn Adobe Animate? Did you teach yourself or find useful tutorials?
Lily Worth: Initially I learnt how to animate in Flash. When it became Adobe Animate, it retained most of the Flash animating features. From what I can recall of that time, I used the guides and tutorials that came with the program. I struggle to retain all of the techniques you can use with this software so I often turn to YouTube to refresh my knowledge. I would recommend Tiptut for some fun animation learnings.
Any resources you recommend for a designer who wants to do work in After Effects?
Lily Worth: Although I haven’t successfully animated in After Effects, I have dipped into some of the great resources on offer when attempting to learn. Creative Bloq offers no less than 50 handy tutorials in this post, which range from the basics to more complex techniques. And Tiptut has some fun YouTube videos as well.
Camille Palu: YouTube for sure!
Shani Nestingen: YouTube for sure. Also, Smashing Magazine has some great articles on it, as well as great intro tutorials on Lynda and Pluralsight.
How do you deal with slicing elements for an email design in Figma? My team just switched over to Figma and I’m struggling to get to grips with it.
Camille Palu: I save stuff out of Figma at 2x the size and take those saved elements into Photoshop to perfect them. I’m really picky about how perfect the images need to be. A lot of the time the elements save out really nicely, but I like to make sure in Photoshop and save for the web.
Lily Worth: I use a similar process to Cam! I struggle a lot with decimal pixels in Figma, so I often check and perfect my images in Photoshop before handing them over to Alice to go into the email build.
Do you have any advice for a designer trying to break into coding and designing emails?
Lily Worth: It does feel like a bit of a mountain to climb when you are starting out, but there are lots of resources to help you get going. Here is some helpful reading material:
- New to email coding? Here’s where to start. (Really Good Emails)
- A Step-By-Step Guide To Create Your Own HTML Email (Uplers)
- Email Design Reference (Mailchimp)
- 101 of Email Code (Litmus)
Also, connect with the email community via #emailgeeks on Twitter! The email community is amazing and always keen to help. You can also post your questions on the Litmus Community to reach out to email designers and devs for support, or join the Email Geeks Slack community.
Shani Nestingen: The links that Lily share are what I would start with, but definitely connect via social media, Twitter, and the Email Geeks slack group. There are so many great resources and people to connect with there.
Do you have any recommendations for how to best migrate from one tool to another? We’re looking to move our design stack to Figma.
Lily Worth: Figma allows you to import your designs from Sketch easily. If you are migrating from Photoshop, there is a way to convert your PSD files to Sketch files and then import to Figma.
The great thing about Figma is just how quickly you can create layouts and save modules and elements to your library, so if importing doesn’t work out too well, it may not be too painful to recreate some of your existing files within Figma (fingers crossed).
Did any of you use Adobe Fireworks back in the day? Talk about a throwback!
Shani Nestingen: I only used Fireworks when it was still owned by Macromedia, but I liked being able to save web versions with very few steps!
What tools would you recommend for any step of the email creation process?
Jason Rodriguez: Here are some of the tools we discussed during the webinar, along with tools that fellow attendees recommended: