I recently bumped in to a really popular article – from designers to designers – about the 50 best email designs. I have to admit that most of the mentioned designs are really beautiful, but there’s a common problem with all of them. Background images!

background images in email designimage source: Canva.com

We all love beautiful photos, illustrations, especially if they are crafted by talented designers, who can do nice tricks with Photoshop. The problem is usually that they simply don’t know the limitations of email coding, and create a really beautiful email design which is hard to handle from a coding perspective. I’ll tell you why!

In Outlook only one background image works!

Actually that one is the main background image, which is used on the body-tag. Who wants to learn more about the coding part, can check out this thread on Stackoverflow. This is the reason why image slicing is a really common workaround for us, email coders.

Any time we get a design like any of the above, we have to figure out how to make these designs work in email. With image slicing, it’s quite easy to make these design look great in desktop email clients – if images are enabled to display and also if you managed to avoid SPAM folder since your text to image ratio is too low. But *how will these email designs look on mobile? *

*Far from ideal. *What may happen with them on mobile?

  • Option A: Full width (content/foreground) images will scale down to mobile width: Making the text written on them hardly readable.
  • Option B: Smaller images (in a multi-column) will reorder into one column on mobile (by default in EDMdesigner). This reordering can be manually switched off though, so you may end up with Option A.
  • Option C: You may use the “hide on mobile” function – it’s available for EDMdesigner users, but generally not available in most web based email editors – to hide some of the images from mobile users. Please note that the hide on mobile doesn’t work in Gmail App (just like responsive email designs, because the lack of CSS media query support).
  • Option D: With the combination of hide on mobile / hide on desktop functions (coming soon) you can use totally different content on mobile and desktop as well. The biggest problem with this technique is that your email HTML will be super complicated and larger in size as well.

Best practice: Use text, images and buttons separately – Avoid overlaying!

We know that it’s challenging to deliver something beautiful without images, but check out for example Litmus newsletters. They are beautiful and are designed in line with best practices and also in some cases with the freshest email coding tricks. But there are also great examples in the original article from Canva, so there’s still hope for us email coders!

background images in email design best practiceimage source: Canva.com

Author
Roland Pokornyik

Roland Pokornyik

CEO / Co-founder @ Chamaileon.io & EDMdesigner.com

  • Beginner's Guide to Using Sass in Email Coding Beginner's Guide to Using Sass in Email Coding

    Do you repeat bits of CSS code across email template projects? Learn to use the Sass preprocessor language to change that and design reusable components.

    Read more
  • Open Source Email HTML Modification Tools for Email Developers Open Source Email HTML Modification Tools for Email Developers

    Grab these free & open-source HTML code modification tools created by EDMdesigner specifically for email coders.

    Read more
  • Managing Full-time Employees at a Growing SaaS Company Managing Full-time Employees at a Growing SaaS Company

    In this article you can read about how an early-stage startup can overcome management difficulties with the SCRUM methodology and the pomodoro technique.

    Read more