--- title: "Adapting During Disruption: Modular Emails Made Simple" description: While companies struggle with adapting their marketing efforts during this time of disruption, we recommend focusing on production efficiencies. image: https://blog.shawscott.com/hubfs/20200611_Modular_Design/modular%20design-feature.png --- [![ShawScott_Logo_Solid](https://blog.shawscott.com/hs-fs/hubfs/ShawScott_Logo_Solid.png?width=250&name=ShawScott_Logo_Solid.png)](https://shawscott.com) - [OUR STORY](https://shawscott.com/our-story) - [LABS](https://shawscott.com/labs) - [BLOG](https://blog.shawscott.com/) - [CONTACT](https://shawscott.com/contact) [![Shaw Scott: a digital marketing agency](https://blog.shawscott.com/hs-fs/hubfs/Shawscott_April2016/Image/ss_logoGrey_nav.png?width=250&height=65&name=ss_logoGrey_nav.png)](http://shawscott.com) - [HOME](http://shawscott.com) - [LABS](http://shawscott.com/labs) - [PORTFOLIO](http://shawscott.com/portfolio) - [BLOG](https://blog.shawscott.com) - [OUR STORY](http://shawscott.com/our_story) - [CONTACT](http://shawscott.com/contact-us) Share # Adapting During Disruption: Modular Emails Made Simple June 11, 2020 [![Edgar Lopez](https://blog.shawscott.com/hubfs/E_Lopez_HS.png)](https://blog.shawscott.com/author/edgar-lopez) [Edgar Lopez](https://blog.shawscott.com/author/edgar-lopez) June 11, 2020 Share In March, marketers were thrown quite the curveball as states across the country began implementing social distancing guidelines and ordering non-essential business offices and brick-and-mortar locations to temporarily close. To help marketers adapt and lighten their load, Shaw/Scott recommends that all email marketing efforts leverage modular HTML designs. Modular design is the method of creating a system of self-contained components that can be stacked, rearranged, and used or not used, case by case. The goal is to be able to easily change or adapt individual design patterns without altering the system as a whole, making marketing more manageable. Adopting modular design and reusable patterns into an email design workflow can easily improve the quality and consistency of your communications while speeding up your daily output. ### **Modular Templates** - Enhances the brand experience - Facilitates Engagements - Simplifies the campaign production process - Minimizes errors - Boost efficiency - Improves rendering across multiple email clients - Delivers contents on user's terms ![Image1](https://blog.shawscott.com/hs-fs/hubfs/20200611_Modular_Design/Image1.png?width=1026&name=Image1.png) Think of a modular template as a set of Legos®. These bricks (self-contained components) are designed and coded to be removed, rearranged, and repeated, seamlessly, enabling a client to build a nearly infinite number of emails with speed and ease. ![Combined_Module_image2](https://blog.shawscott.com/hs-fs/hubfs/20200611_Modular_Design/Combined_Module_image2.png?width=1047&name=Combined_Module_image2.png) ### Creating a Visual Display Language - **Colors** — Common colors in a design system include 1–3 primaries that represent your brand. You may want to include a range of tints—a color mixed with white. And possibly shades—a color mixed with black. This will give your designers a few more options to work with. - **Typography** — Most design systems include just two fonts: 1 font for both headings and body copy, and a monospace font for code. Keep it simple to avoid overloading and confusing your user. This is not only a best practice of typographic design; it also prevents performance issues caused by excessive use of web fonts. - **Sizing and spacing** — The system you use for spacing and sizing looks best when you have rhythm and balance. A 4-based scale is growing in popularity as the recommended scale due to its use in iOS and Android standards, ICO size formats, and even the standard browser font size. - **Imagery** — The key to success with imagery in your visual design language is having a plan and sticking to it. Set guidelines for illustrations and icons and use the best image format for the situation. These are just a few of the ways you can help implement modular-based email templates. Our Design and Development team have created many more examples that we can show you that, with some slight customization, perfectly represent your brand, and in turn, help lighten your workload. To learn more about how you can successfully integrate modular email design into your email marketing program, or to request additional examples of guidelines, please [reach out](http://shawscott.com/contact/) to our expert team at Shaw/Scott. Are you following us on [Facebook](https://www.facebook.com/shawscottagency), [LinkedIn](https://www.linkedin.com/company/shaw---scott/), [Twitter](https://twitter.com/ShawScott), and [Instagram](https://www.instagram.com/_shawscott/)? [![New call-to-action](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/2199416/a03d5c83-2876-4775-9547-3e0bfb6a3b9d.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/2199416/a03d5c83-2876-4775-9547-3e0bfb6a3b9d) ![](https://www.facebook.com/tr?id=236173477774357&ev=PageView&noscript=1) ![](https://px.ads.linkedin.com/collect/?pid=120675&conversionId=1947194&fmt=gif)![Modular Templates](https://blog.shawscott.com/hs-fs/hubfs/20200611_Modular_Design/modular%20design-hero.png?width=2280&name=modular%20design-hero.png) Tags: [Email Marketing](https://blog.shawscott.com/topic/email-marketing), [Responsive Email Design](https://blog.shawscott.com/topic/responsive-email-design), [Marketing Strategy](https://blog.shawscott.com/topic/marketing-strategy), [EMEA](https://blog.shawscott.com/topic/emea), [Remote Working](https://blog.shawscott.com/topic/remote-working), [Marketing](https://blog.shawscott.com/topic/marketing), [Adapting During Disruption](https://blog.shawscott.com/topic/adapting-during-disruption), [Modular Templates](https://blog.shawscott.com/topic/modular-templates) Director, Technical Delivery Management, Shaw/Scott (Chicago) Edgar is on our Leadership Team and has over 15 years of experience in program and project management. Edgar is proficient in multiplatform cloud service integrations, and API custom enablement across ESPs, CDPs, POSs, and Mobile. He's worked with many of Shaw/Scott's most recognized clients, such as; Frontier Airlines, New York Times, JOANN Fabrics, Scotiabank, Pet Supplies Plus and Hugo Boss. [Previous PostPartner Spotlight – Cordial](https://blog.shawscott.com/partner-spotlight-cordial) [Next Post Mobile Messaging: From Business Monologue to Customer Dialogue](https://blog.shawscott.com/mobile-messaging) ### Subscribe Here! - - facebook - - twitter - - linkedin Copyright © 2020 Shaw/Scott. All rights reserved.