StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Background images</strong></p> <p>Basically, background images aren't an option at all, if you need support for a wide variety of email readers. It mostly affects Outlook 2007 and later, as well as Hotmail (haven't tested Outlook.com yet).</p> <p>If the PSD has a large area with a bg image but no text on top of it, you can cut that part of the email as a foreground image.</p> <p>If the same area has text content, there are 3 options:</p> <ol> <li>Skip the bg image altogether.</li> <li>Implement the bg image with inline CSS and aim for graceful degradation (accepting that the email won't look as good in some email readers).</li> <li>Cut that part of the email as a single foreground image (with the text in the image). The risk of cutting text in an image is that it impacts usability (many email readers block external images by default), it hurts accessibility, and, most importantly, if the ratio of text to images becomes too low, that will trigger spam filters. So it's a good idea to do as little as possible of this (cutting text as images). But a little now and then is usually safe.</li> </ol> <p>Before choosing either option 1 or 2, you'll probably need to clear it with the design team. And before doing a large amount of option 3, it would be wise to test it in a variety of spam filters.</p> <p>The impact of bg images in HTML emails, and the need to minimize the use of them, should be communicated to designers early and often, as the issues with it are not common knowledge among them, even among the very best of them.</p> <p><strong>Rounded corners</strong></p> <p>As @samanthasquared mentioned, rounded corners aren't well supported in email readers. They'll need to either be implemented as images (or, as with background images, alternately skip them or choose graceful degradation, if that's acceptable to the design team).</p> <p>You can reduce the total number of images the user has to download if you cut a single image for the entire top portion, and a single image for the entire bottom portion, rather than cutting separate images for each individual corner. Fewer images means faster loading and less risk of triggering spam filters.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload