Skip to main content

Campaign Manager help

Hi, how can we help?

Search

Cendyn CRM - Campaign Design Checklist

Creating visually appealing and highly deliverable emails is essential for successful campaigns. This checklist will guide you through the essential steps to optimize your email templates for compatibility across devices and email clients, ensure accessibility, and improve overall user engagement. By following these best practices for email structure, mobile optimization, code cleanup, fallbacks, and Dark Mode readiness, you’ll create emails that reach your audience effectively and look great on every screen.

Basic Checks

  • Hex Codes: While emails support RGB values, 6-digit hex codes are more reliable and widely supported across email clients.
  • Image Optimization: Compress images to reduce email load time without sacrificing quality. This can significantly impact deliverability and user engagement.
  • Image Source: Images are typically uploaded directly to the Cendyn CRM. Utilize optimized image formats (i.e. JPEG for photography) and check that images display correctly when rendered.
  • Image-Text Ratio: Aiming for no more than 30% image content in emails prevents deliverability issues since image-heavy emails are often flagged as spam.
  • Link Validation: All images & logos should have a working URL. Verify all links to avoid broken paths or tracking errors. This ensures a smooth user experience and better click-through rates.
  • Link Shorteners: Link shorteners like, bit.ly, should not be used in the campaign template. 
  • Test Dynamic Content: Do a test campaign to ensure that the field selection in the dynamic condition is correct.
  • Tracking Links: Confirm all hyperlinks are tagged with the proper Google Analytics parameters or other tracking IDs (i.e., UTM Tags)

NOTE: Sending a Preview in Cendyn CRM allows you to review design. The links on the preview will not work. Utilize the Send Test Campaign Feature in CCRM.

  • In-Body Unsubscribe Link Option: All marketing emails must contain an unsubscribe link / update preferences link. This is required by Anti-spam regulations. If an "update preferences" or "subscription link" is not included, the campaign will not be sent.

Mobile Optimization:

  • Column Stacking: Ensure multiple columns stack vertically on mobile devices, preventing text or images from appearing too small.
  • Tap Target Size: Buttons and links should have adequate tap targets (44px minimum) to accommodate touchscreens, minimizing user error.
  • Button Height and Font Size: Use minimum font size 16px with padding 10px on top and 10px padding on bottom to make content easily readable without zooming.

Code Cleanup:

  • Remove Unnecessary CSS: Strip out unused styles to keep the email lightweight and prevent potential compatibility issues.
  • Spacing and Padding: Consistent padding and margin ensure a polished look and readability, particularly on mobile.

Fallbacks

  • Dynamic Content and Interactivity: Include personalization elements where possible, like dynamic first names or custom recommendations, but make sure they degrade gracefully on clients that don’t support them.
  • Plain Text Version and View in Browser: Always include a plain text alternative and “View in Browser” option. This increases accessibility and ensures the message can be read even if images or HTML fails to load.

Accessibility

  • Image Alt Text: Use descriptive alt text for images so screen readers can convey visual information.
  • Good Color Contrast: Strong color contrast makes the text legible for those with visual impairments.

Dark Mode

  • Transparent .png Files: PNG files with transparency handle background shifts better in Dark Mode, preventing unwanted color clashes.
  • Text and Background Colors: Optimize these colors for readability in Dark Mode, maintaining good contrast and avoiding unintended color changes.
  • Be sure to review your campaign preview in dark mode to ensure that the content and colors render as expected.

If you add Custom HTML Elements, consider checking

  • Email <head> Code (Basic Checks): Ensure the code is clean, optimized, and well-organized to support compatibility across email clients.
  • Correct Width (700px Max / Basic Checks): A width of 600-700px is the sweet spot to ensure emails display well on both desktop and mobile without causing horizontal scrolling.
  • No External CSS (Basic Checks): Inline styles are best for email as many clients strip out external CSS, which could break your design.
  • Set Min-/Max-Width (Mobile Optimization): Use responsive design to control how content adapts on mobile. Min-width and max-width help to retain readability and usability.
  • Check Tables (Code Cleanup): Tables often provide a more consistent structure in emails across devices. Make sure tables are correctly structured with adequate spacing.
  • Font Stacks and Fallback Fonts (Fallbacks): Define font stacks with fallback options to maintain a consistent look across devices and email clients.
  • Semantic HTML (Accessibility): Utilize meaningful tags to structure the email (e.g., <header>, <footer>) to help screen readers interpret the email correctly.
  • Table Roles (Accessibility): Setting tables to role="presentation" ensures screen readers don’t misinterpret layout tables as data tables.
  • @media (prefers-color-scheme / Dark Mode): This media query allows you to detect Dark Mode and apply relevant styles.
  • [data-ogsc] for Outlook.com (Dark Mode): Utilize this attribute to create custom Dark Mode styling for Outlook.com users.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a Request

0 comments

Please sign in to leave a comment.