I work for a media company that produces a lot of emails for clients/advertisers. Some of them come pre-designed and others we design in-house. If they come pre-designed there's almost no telling how it'll conform to email coding best practices. We're trying to figure out our standard when it comes to allowing text over images:

Option 1: Do we allow text over images (just save it out as a flat image) and then have a separate image for mobile devices and swap them out with a media query?

Pros:

  • This approach keeps everything legible on both desktop and mobile
  • It ensures we can keep the email layout as true to it's original design as possible
  • It's often faster to code

Cons:

  • This approach feels a little hacky and maybe irresponsible, especially considering the need to keep text legible for people with images turned off and avoid higher spam scores.
  • If someone forwards an email coded with hiding/showing media query techniques, often times both images (mobile and desktop images) show at the same time

Option 2: Do we go the traditional route and be very strict about not allowing important text to be over images?

Pros:

  • This approach better ensures delivery into an inbox (lower spam score becauase less images)
  • Better reading experience for readers with images turned off
  • Less hacky
  • You don't see two versions of images (mobile and desktop) showing when forwarding the email

Cons:

  • This approach can be frustrating for clients who want their email to look very close their original layout
  • It typically takes longer to code emails with this approach, especially when intricate tables are involved.

Any advice would be very appreciated. I want to come up with a standard rule we use on all of our emails so we don't have to adjust on each one we do.

Thanks.