Email Marketing Development & Design

Advancement Toolkit Email Marketing Email Marketing Development & Design

The UF Advancement Digital Communications team supports your email needs by consulting on email development and design best practices. Consider the following to guide your graphic designer or developer:

  • The overwhelming majority of emails are being viewed on mobile. Consider your layout and how images and content shift on smaller screens.
  • In general, it’s best to avoid image-only emails as they aren’t necessarily downloaded by email servers.
  • Please use alt text for all images to improve audience accessibility.
  • Reserve underlining for linked text only as rule of thumb.
  • Consider the age of your target audience when selecting colors and text sizes.

Please contact Tonya Gibbs, digital communications manager, for a consultation on email design or with any email programming/coding questions.

Design & Development Components

Development reminders for successful email marketing.

Development reminders for successful email marketing.

Design Considerations

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 in. wearable or viewed on a 90 in. 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

While internal emails are mostly read in MS Outlook at 1024px wide screen, the average web based browser’s viewable area is 600 pixels wide. Most emails today are read on a mobile device at 300-320px wide, or a tablet at 480px wide. To maintain a responsive and consistent layout, Advancement uses the 600px Industry standard for email design. Anything outside of the boundaries of 600px wide will display in a light grey color as shown in the illustration below. However, notice when the email is reduced for mobile, those negative spaces disappear, and the format shifts to a different layout. Keep this in mind when your content is submitted. If you have a preference to which stories should be read first, please let us know.
 

Responsive Email Design

 

Images

Images are important to an email as they tell the visual narrative of the composition. They add interest and draw your audience in to the call-to-action. However, they can go wrong. Below is a list of good practices, when designing your visual assets.
 

  • Size: Use optimal image size and quality. Your images should be about two times the size of your email design’s width. So, if your email is between 600px wide at 72dpi, 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: Your overall image weight for the entire email should not exceed 50-100kb. This is important because Web Based browsers such as G-mail clip emails that are heavier 102kb. In some cases, sending an email over 100KB may impact deliverability, but it may not be due to the size alone. Rather, it could be the result of the poor customer experience and engagement issues. Generally, keeping emails under 80KB where possible will help decrease some of these issues. To read more on image size and deliverability, please visit this Litmus blog post.
  • 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%, 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.

Email Wireframe Starters

Resources