Text Over Images and Responsive Do's and Don'ts
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?
- 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
- 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?
- 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
- 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.