Development & Design

We ask that project sponsors work with their respective communications team for email headers, footers and/or videos/animations. Part of the email request process involves uploading these materials to the Advancement project management system.

Design

When working with content, our development team considers many aspects before sending back a layout for approval.

• Responsiveness – What does the content look like in multiple interfaces? In some cases, your email may be received on a one inch wearable or viewed on a 90 inch monitor.
• Mode compatibility – Does the email uphold design and branding standards in dark and light mode?
• Precise messaging – If images are turned off, is the message lost or easy to find, clear, and accessible?
• Readability – Is the layout functional and easy to read?

Format

To maintain a responsive and consistent layout, Advancement uses the 600px industry standard width for email design. Anything beyond 600px wide will display in a light grey color as shown in the illustration below. When the email is reduced for mobile, however, those negative spaces disappear and the format shifts to a different layout. Keep this in mind when your content is submitted.

Images

Clear and compelling images add interest and draw your audience to the email’s call-to-action. There are a few things to keep in mind when designing for email:

• Size: Use optimal image size and quality. Your images should be about two times the size of your email design’s width. If your email is between 600 pixels (px) wide at 72 dots per inch (dpi), your images should be submitted at 1200px wide at 72dpi. If the image is half the size of your email and will render at 300px wide or smaller, then it should be submitted at 600px wide at 72dpi. Remember that an image can be sized down for clarity, but when it is sized up, it becomes blurry.
• Image weight (file size): Your overall image weight (file size) for the entire email should not exceed 50-100 kilobytes (KB). This is important because browsers such as Gmail clip emails that are heavier than 102KB. We recommend keeping your images under 80KB where possible to support deliverability and fast loading.  This Litmus blog post has more details.
• Text inside images: Thin text in a 600px wide image is legible, but when resized to a smaller viewport it may become difficult to read. When this happens, is your message lost? If so, then consider a different font, or a larger size. To test, shrink the image to 25 percent. If you can still read the text then it will render on all devices.
• Contrast: color contrast is tricky, as it isn’t just what you see as designing the graphic. Designers forget to test their image’s contrast against a dark mode interface. Remember to think about what your images look like with a light background as well as a dark background so that the images render properly and don’t fall flat or disappear against multiple background colors.

If you have any questions regarding the quality of your images, please reach out to Tonya Gibbs, the digital marketing manager, in Advancement.

Dark Mode

What is dark mode? Dark mode is a setting that shifts an interface’s color palette to display content in high contrast using dark background and light foreground colors. Ultimately, dark mode is used to minimize blue light and enhance readability to reduce eye strain. When dark mode is turned on, it’s not always just the email application’s interface that changes. An entire email’s design, specifically the colors used, may be affected. This makes it difficult to navigate branding standards in marketing campaigns. Testing is an important step to determine if the branded message is still readable and properly received when the mode shifts from light to dark.

Templates (Wireframes)

There are countless ways to assemble your email components. However, based on best practices and high performing emails, the following templates, or wireframes, provide a starting point for how your content and graphics can work together. Each section, or content block, is modular and can be customized to best serve your campaign.

• Litmus Blog: email marketing trends, reports and tips
• Really Good Emails: email inspiration curated by a community of email experts
• Litmus Blog: Guide to Email File size & Load time