In search of a surefire solution to inject a “work smarter, not more durable” ideology into your e-mail workflows? Enable us to introduce you to e-mail modules!
In the event you’re like nearly all of respondents to our 2021 State of Email survey, your e-mail quantity and manufacturing calls for have elevated during the last yr. Electronic mail modules and reusable parts like snippets and partials will help streamline your workflows and improve effectivity, whereas permitting you the pliability to construct artistic and on-brand emails that stand out within the inbox.
Preserve studying to seek out out:
What’s an e-mail module?
An e-mail module is a reusable content material block that may be put collectively in numerous combos. The tip end result is usually a full e-mail, or a spread of full email templates. (An e-mail module is usually known as a part).
Electronic mail modules additionally are available in these varieties:
- Snippets, that are tailor-made to a selected e-mail, like a call-to-action button
- Partials, that are constant throughout a number of emails, like an e-mail footer.
All your e-mail modules might be housed in a sample library as a part of your broader email design system or email brand guidelines. With this modular e-mail design system, everybody in your crew that creates emails has a wide range of confirmed parts that may be blended and matched to construct brand-compliant emails.
In essence, e-mail modules can help you mix smaller sections to create a bigger e-mail design.
Six advantages to utilizing e-mail modules
1. Model standardization
With out e-mail modules, vital model parts like logos or colours can fluctuate or seem inconsistent from e-mail to e-mail. For the reason that blocks you’ll use with a modular e-mail design system are all pre-coded and examined, that they include all the mandatory parts to create emails that keep model requirements and consistency.
2. Shave day off your e-mail workflow
Greater than 40% of respondents to our newest State of Electronic mail survey already use instruments like snippets and partials–and one other 12% had plans to begin. Why? Electronic mail modules can enhance effectivity and cut back the period of time you must spend coding emails from scratch. You’ll get higher emails out the door quicker. (Learn to build emails in ten minutes utilizing e-mail modules, partials, snippets, and Litmus Builder).
3. Achieve flexibility and creativity
Electronic mail templates are likely to get a nasty rap, typically perceived as being inflexible and boring. However modular email templates provide you with items of an e-mail that you could combine and match, so that you acquire the very best of each worlds. You possibly can construct your e-mail design system over time, preserve flexibility and creativity alive, and add new e-mail modules to construct a extra sturdy e-mail design system over time.
4. Usable in drag-and-drop e-mail builders
Electronic mail modules are primarily a “plug and play” instrument. They’re completely suited to drag-and-drop e-mail builders like our drag-and-drop Visual Editor. Set them up, and also you’re able to go.
5. Permits non-coders to create emails
As soon as your reusable content material blocks are arrange in a visible editor, you may construct emails with out ever touching code. Which means even non-coders can create emails! No extra worrying that they may unintentionally break one thing.
6. Scales e-mail manufacturing
When your e-mail crew has the means to create modular emails quick–no coding abilities required–it’s simpler to scale your complete e-mail manufacturing course of. Which means you may develop your e-mail advertising and marketing program, test and learn all of the issues, and give attention to delivering personalized emails that construct a deeper connection along with your subscribers.
 |
Create on-brand, error-free emails quick Construct, preview, and QA check your emails in a single seamless circulate with Litmus Builder. No extra hopping backwards and forwards between instruments. |
How you can get began with e-mail modules
Bought on all the advantages of e-mail modules? We suggest starting your new course of by creating an email design system so your modules are categorized and standardized from the beginning. As you proceed to construct emails, know that this e-mail design system will evolve proper alongside along with your e-mail advertising and marketing program.
When you’ve sufficient blocks to make a template, observe these six steps to begin coding.
1. Audit your emails to see for those who spot patterns
- Which sections do you see repeated all through your emails?
- Are there header and footer blocks you utilize time and again?
- How about one- and two-column content material blocks?
Trace: All of those repeating indicators make good candidates for e-mail modules.
2. Doc which e-mail sections you’ll modularize.
Describe what they’re, how they’ll be used, and supposed guidelines of engagement for them. Organizing your parts from the beginning makes them simpler to seek out and use accurately throughout your crew, particularly as you develop your sample library. Your system might be as primary as labeling content material blocks for headers, physique, and footers, or you might categorize by crew or shopper.
(It’s also possible to experiment organizing by part and e-mail sort in Litmus utilizing “Categories” in Design Library).
3. Decide requirements and model tips
Designers and builders ought to work hand in hand when creating modules to make sure requirements—comparable to spacing between parts and spacing between modules—are created and maintained. Safe buy-in from stakeholders on email-specific model tips like fonts and colours, too.
4. Construct an e-mail boilerplate
All your modules will must be put right into a skeleton or boilerplate HTML. This provides you the final word flexibility in the way you wish to lay out your email. There are a number of totally different ways in which a boilerplate might be configured, however all boilerplates embody a piece on the high with the opening tags, header content material, any reset and model types, and shutting tags.
Mark Robbins has created an amazing stripped back basic email template to get you began. Mix that with Jay Oram’s repository of recent standard CSS reset styles for e-mail, and also you’ll have an honest boilerplate to start with.
5. Construct your e-mail modules
Electronic mail modules might be created in numerous methods. So long as you might be according to the modules, they’ll work collectively when mixed.
Right here’s the way to use two totally different strategies: <desk> based mostly modules and <tr> based mostly modules.
Utilizing <desk> based mostly e-mail modules
You possibly can have every module wrapped in a desk in order that the tables stack as modules are added. Your modules shall be neat and self-contained and structure types from one desk received’t have an effect on the opposite modules. The downside? Stacking tables can generally trigger rendering issues in Outlook, like skinny white strains.
Utilizing <tr> based mostly modules
Modules which are based mostly on desk rows must be positioned in a containing desk. Then, the rows might be positioned within the containing desk stacking the rows on high of one another. With this strategy, you’ll doubtless discover much less pesky white line points in Outlook. However, a rendering situation in a single module could lead to a rendering situation in one other module. Plus, it could require extra code to nest tables contained in the rows to resolve points.
6. Check your e-mail modules
Each module strategies require you to do some email testing to verify one part doesn’t break the entire e-mail.
Creating one massive template with all e-mail modules in Litmus Builder permits you to construct and check on the identical time.This permits for QA testing the modules in a template to see how they affect one another. It additionally ensures spacing between modules is maintained.
As soon as all of the modules are added, they are often seamlessly copied and saved in Design Library as a snippet or partial.
7. Begin utilizing e-mail modules in your manufacturing course of
When you’ve created your e-mail modules, incorporate them into your construct course of. Most code editors provide you with a technique so as to add snippets to your code or boilerplate.
Within the Code Editor view in Builder, you should utilize the snippet set off phrases or the insert menu so as to add snippets immediately into the code. And with Visual Editor, you’ll simply drag and drop the snippets in place.
 |
Give modular e-mail creation a strive Litmus makes it straightforward to go modular. Retailer and arrange your snippets and partials in Design Library. Then, rapidly construct and QA check emails with Visible Editor in Litmus Builder. It even comes pre-loaded with a totally optimized e-mail template with modules so you may bounce proper in. |
This submit initially revealed on Could 4, 2021. It was up to date on July 29, 2022 to incorporate further data.
