Every week the Splash Digital team will be blogging their Email Tips and Tricks to share with the world. Because they love emails, I mean really, really love emails!
Last week Adam picked 4 of his best CSS fixes he has in his toolbox, this week he’s back with Digital Designer Nathan, with 4 more fixes. This time white space management and character encoding are in their sights.
1. The shim gif
Campaign Monitor advises against the use of these spacer images with the reasoning that most clients have image blocking on as standard. Interestingly Mail Chimp advises for using them, and Sitepoint has no mention of the little blighters! From our own experience here at Splash we highly recommend using these one pixel transparent GIFs and we think they are one of the most important tools within an e-mail developers arsenal. Whilst it is true that most email clients have image blocking on as default, we can’t see what the problem is having a fixed transparent gif there if you can’t see it anyway (you can read Campaign Monitors own design guidelines here, we thoroughly encourage it!). Having said that, we also urge you to back up your fixed dimension shim.gif by placing it within a fixed width <td>, for ‘just in case’ scenarios. This double combo we have tested and now have no issues in the spacing department.
Another advantage of the spacer image is fixing your height. For example, say you are having issues with line-height making your fluid email layout too small. By adding a fixed height shim.gif your text may shrink but your design will stay at your desired height.
For any padding, spacing or alignment this is the most reliable and robust way of making sure the email holds together as expected.
Hard spacers of <p> and <br /> are fine in some clients but are also pretty fluid in others resulting in an exploding layout.
2. Character encoding
Ever received an email in your inbox and it has random characters popping up such as ‘â’ or ‘•’? This is due to special characters like ‘&’, ‘*’ and ‘%’ not being encoded correctly. Whereas some email distribution and marketing companies do recognize these characters as being different and encode them automatically, some ignore them. So to be on the safe side encode your specials correctly.
Use this table and bookmark the site, it can save you a lot of embarrassment: http://www.ascii.cl/htmlcodes.htm
3. Nest dem’ Tables
Nesting, together with spacer images (see shim.gif point), are a more reliable method of positioning than adding padding and adjusting the margin. The standard amount of nested tables tends towards 15 deep before your design starts to look a bit funky (with the exception of those Adonis’ of email clients Lotus Notes 6.5 and 7, which nest only up to 8).
Be careful, even though this has been tried and tested by CM and ourselves, we have heard Urban Legends of email designs being hacked apart after 10 deep tables. As with anything in email development make sure you do your own testing with reliable software and archive those screenshots. If in doubt test, test and test again!
4. Spanning the ages
Nesting tables leads neatly on to our next subject of ‘colspans’ and ‘rowspans’ There is always a debate about something in the email design/development community, and colspans are one of them. Our advice: don’t use them. They cause more hassle than they’re worth and Outlook 2007 doesn’t recognize them (because its HTML rendering engine uses Word 2007. Talk about one step forwards two steps back!).
Again nested tables are your saviour here, reliable, robust and, above all, supported!
Thanks for reading!