I was so happy when Litmus Builder came into my life. Builder is set up to manage the creation, use, and storage of all your snippets and templates to make scaling easier for teams. And their snippets are all housed in one place in the Design Library which is easily accessible right from Builder for your whole team to use. When combined with the email design system we have created at Litmus, we are able to create most emails in around 10 minutes. And for new or custom emails, the basic framework can be done in the same 10 minutes, allowing more time to code and test custom emails and keep up to date with ever-changing email clients. . Do not believe me ? I made a video showing the creation of our recent product update email. Creating the entire email took just over 10 minutes using snippets, partials, and the Visual Editor in Litmus Builder. See how fast it took me for yourself (and find out what song I jammed to in the process): How to get organized to save time too “That's all well and good,” you say, “but how long did it take you to set up all those snippets, partials, and templates? I am Image Masking Service happy to inform you that it did not take long! I'll tell you how. main structure First, you need to create the main structure that you will use for each email. This is your company's standard CSS and skeleton code to which snippets and partials will be added. Chances are you probably already have a version of it somewhere. Then you save it as a template for easy access. This boilerplate or starter template is the starting point for any personalized email you create that doesn't have a template already set up. Partials against extracts Next, decide what to create as a partial and what to create as an excerpt. At a basic level, partials and snippets are both reusable blocks of code that you'll put into the boilerplate as you create each email. They entered Litmus the same way, although snippets need a trigger word, while partials don't. The big difference is that partials won't be editable in code. So figure out which blocks you won't change much and do those partials. Here at Litmus, it's headers and footers. Everything else is snippets.

I remember looking at the first email where I was asked to edit the code and saying, “What? Why do they have all these tables! And then "fix" it to make it work on my Apple Mail. Somehow, this email got me working on a marketing team to create emails and landing pages. This may sound familiar; it seems most people fall for email marketing. One of the things you don't realize you're also tripping over is creating a lot of emails in a short time. As a developer, this can be a daunting task. Using the right tools can mean the difference between an email that takes all day to create or one that takes 10 minutes. In this blog post, I will share my personal journey from a long process of creating emails to a much shorter one. Hope this inspires you! Dipping my toes in time-saving tools from a developer's toolkit More recently, I have coded pharmaceutical (pharma) emails. There are a few sectors of email marketing that have huge oversight and tons of requirements, which means you have to be very creative in coding their emails. Pharmacy is one of them. I don't know how many hours I've spent trying to align a footnote exactly or get the font size just right in Outlook. So I was always looking for products or ways to reduce my development time so I could spend more time on the little quirks of email instead. Mail frames E-Commerce Photo Editing Service One of the first things I found was messaging frameworks. They allow you to write a lot less code using their specialized markup language which is then compiled and translated into normal HTML and CSS for your email. Yes, that means you have to learn a new coding language. But once you've done that, you can get whole blocks of code by writing just a few lines. So. Easy. If you don't have time to learn a new language, this might not be for you. Inliner CSS There are several CSS inlining tools you can use so that your styles can be written once in the head of your HTML and then incorporated throughout the body later. This is important because some email clients will remove CSS styles in the head element, ruining the look of your email. But go line by line to insert style elements for each paragraph, link, etc. was really painful. Automatic inline to win! One of my favorite tools was a Gulp workflow for creating emails that compiled HTML and Sass files into email-ready HTML. However, when I moved to the pharmacy, these tools became less convenient. With all the nuances in the designs (eg one <p> tag might be one color while another <p> tag had to be a different color) I could no longer rely on CSS in the tag <style> or in automatic inlining. I had to manually code the inline styles. So what to do with all of this? At the end of the day, I stored the code snippets (reusable email modules) in a code editor while the templates were placed in a folder on Dropbox. This system cut development time in half. Which is great for a one-person messaging team, but when we started growing the team, the process fell apart.

Saving your animation out of Adobe Animate as a GIF is easy and enjoyable. Just head to File > Export > Export Animated GIF. Reduce your file size Regardless of how you create your animated GIF, whether with Adobe Animate or otherwise, reducing your file size for emails is essential. There are a few things to consider to help you keep your animations as lean as possible. Compression Tools like Animate and Photoshop have limited compression options for GIFs; it is often better to use external software instead for compression. I recommend ImageOptim, which is free to download, or EZgif, a free online GIF optimization tool, to reduce your file size to its optimal weight. Personally, I like to keep mine under 1 megabyte (MB), but the optimal file size will vary and depend on email load times which we'll discuss later in this blog post. Flat color Including photographs or gradients in your animation adds weight due to the amount of colors and shades they contain. A GIF can only contain 256 colors, compared to a JPEG which E-Commerce Photo Editing Service can include over 16 million, which often results in lower quality. It is therefore essential to keep things simple. Limited frames The shorter the animation, the better. Each frame your animation contains adds weight to the GIF. Since an animation really should be meant to complement your copy, it makes sense to limit how long your animation plays and encourage readers to descend into the email. If you find your GIF is a bit too big after saving and compressing, you can delete the images using Photoshop or EZgif. Checking your animated GIF Now that you've completed your GIF, you may want to get some feedback or approval before placing it in your email. With a real-time collaboration tool like Litmus Proof, you can centralize everyone's feedback and approvals. GIF of proof Friendly Disclaimer: This is only available in Litmus Enterprise plans Implementing Animated GIFs in Emails Once you have your GIF ready to go, you can include it in your email the same way you would add any other image file: