Background images and newsletter email html rendering
Today we’ll discussing about a pain in the ass we, web developers, are often assigned to: newsletters email development.
Nothing on the web will be a pain forever, and how we’ve seen beautiful scripts like html5shiv.js and respond.js come to life to achieve retro-compatibility. Today I’ve got some tweaks that will achieve a almost perfect background-fix for emails (since background handling is one of the hardest topics on email design and the solution is really handy).
In most of the cases you would prefer to have your background image not listed in the image attachment list. Maybe you are designing a template for mailchimp so background images should be uploaded in an absolute URL, like a separate folder on the agency website. This is a common practice, don’t worry if it seems tedious, it would be the best for the latter.
But background images are not always supported, take Outlook in account!
That is not completly true, you could achieve almost perfect email integration using this service: emailbg.net
Emailbg offers us some simple conditionals for outlook and a background syntax for tables for the others. My results were almost perfect on gmail and outlook, since i had many difficulties I felt like recommend this to anyone. This is really well done.
What are those conditionals?
<!--[if gte mso 9]>
Since we just now learnt that outlook uses microsoft word rendering engine this conditionals are similar to internet explorer ones (i’m sure you already noticed it) and they can be used for anything, not only for this background case, so i suggest you to make a large and dirty use of them.
Remember that when you design an email template you should avoid using css in the head, so don’t try to place this conditional there, you silly boy 😉