Forum Posts

hremon716
Feb 27, 2022
In General Discussions
There's a lot that can go into an email design system, from graphics and brand assets to code and copy included in emails. But most successful design systems are created using a well-tested series of steps. Here's how you can create your own email design system. 1. Commit to building a design system The first step is to determine if you need an email design system and then commit as a team to creating one. Ask yourself a few questions: Does creating email campaigns take a long time? Do we frequently encounter errors during the QA process or after hitting send? Are there a lot of people helping with email marketing, design, and development? Do we feel embarrassed by our current email production process? If you answered yes, it makes sense to create your own email design system. Discuss the challenges your team faces with stakeholders, outline the many benefits of a design system to gain buy-in, then set aside time and resources to get the job done. Crystal Ledesma “Design systems keep companies on brand and allow teams large and small to build seamlessly. » Crystal Ledesma, Engineering Manager, Design Systems at Zillow 2. Audit your existing email marketing program The next step Image Masking Service is to audit your existing emails (both marketing and transactional) and identify what should be included in your email design system. Similar to how you would break an email into a modular model, the purpose of your audit is to determine which components are common to all emails (or are unique and should be considered) so you know what you actually need to build and the standards you need to write to use those components. Spreadsheets are very useful for performing audits. Open one and start documenting every email you send, the different types of content, images, buttons, headers, footers, disclaimers, etc. email design modules And be sure to include sample screenshots or links to live emails where possible. These will serve as a good reference point when it comes to actually building your components. 3. Discuss and document design decisions Then comes the fun part: discussing together how to implement your design system. Host meetings, work together in collaborative design tools like Figma, or start typing a shared document to make the important decisions about what should be included in the design system and how it should be implemented. The important part here is to document the process and reasoning behind decisions so everyone is clear about the what, why, and how behind your design system.
0
0
4
hremon716
Feb 27, 2022
In General Discussions
Email marketers, and especially designers who create campaigns, are constantly looking for ways to improve the production process. Whether it's embracing automated insights and quality assurance (QA) tools, or looking for faster ways to code emails, efficiency is key. Combined with the need for speed is the need to evolve. Especially with the onset of COVID-19 and people working and shopping from home, businesses are sending more emails than ever. 54% have increased email volume since before the pandemic, according to our 2020 State of Email, Fall Edition. And the teams are struggling to cope with the increase in demand while being innovative and maintaining high quality standards. One tool we've found increasingly useful — and others have adopted with great success — is an email design system. Design systems in general are built for two reasons: efficiency and consistency. But what are email design systems and how can they be used to improve your team's performance? What is an email design system? An email design system is a set of reusable components and E-Commerce Photo Editing Service standards that teams use to guide their work and create error-free on-brand emails faster and more consistently. components + standards = design system The components of an email design system typically consist of: Brand colors and elements like logos, icons and images Email modules (like snippets and partials) used to create emails Complete email templates that can be reused across campaigns Standards often dictate the use of these components and may include: Kick-off meetings and ongoing training on the use of the design system HTML usage comments included in modules and templates Documentation such as the logic behind design and implementation decisions Combined, the two elements form a system that can enable teams to increase their email marketing output even in the face of challenges such as an ongoing global pandemic. In our webinar, How Design Systems Empower Email Teams Everywhere, email experts shared their personal experiences and insights. Ted Goas “Stack Overflow's design system allows all of us to contribute to it and use it, even if it's not our full-time job. » Ted Goas, Senior Product Designer (formerly at Stack Overflow)
0
0
1
hremon716
Feb 27, 2022
In General Discussions
Advantages and disadvantages of a VML-based button Benefits: There is excellent support in most email clients (see table below). The entire button itself is clickable. Rounded corners are retained in Outlook. The inconvenients: It relies on the use of an unknown language, VML, proprietary to the Microsoft Office suite, which makes creating new bulletproof buttons and updating existing ones time-consuming and frustrating. The width and height of the bulletproof button must be declared, so any changes to the copy of the CTA would require changes to the dimensions of the button. More complex versions of the VML button require two URLs that must be modified. And some ESPs don't follow the URL in the VML section. VML requires a fixed height and width, so this button doesn't work very well for templates where the length of the copy in the CTA may vary. If you don't want to know the ins and outs of VML (and honestly, who does?), Campaign Monitor offers a free online tool to create traditional bulletproof buttons. Buttons.cm makes it easy to create new CTA buttons that will look great and work well on most email clients. This was my go-to style for button coding when working on pharmaceutical emails. The biggest advantage is its ability to retain rounded corners in Outlook, which was necessary for this highly Image Masking Service regulated industry. 3. Fill-Based Buttons padding button This method uses a simple HTML table for the button. It relies on padding at the table cell level to structure the button as well as HTML and CSS attributes to style the button. It works well on most email clients (see table below). It uses code that email designers are familiar with (HTML and CSS), making it easy to create new bulletproof buttons and update existing ones. The inconvenients: The entire button isn't clickable, which can lead to friction with subscribers who think they've clicked or pressed a button. Outlook does not support rounded corners. 4. Border-Based Buttons border button Border-based buttons take a similar approach to the previous method. By using simple HTML and CSS, you can structure and style your calls to action. However, instead of relying on padding at the table cell level for structure, add thick borders to the link itself to create your CTA.
0
0
2
H

hremon716

More actions