Features from Meantime IT
You have mail - but can you read it?
Although Microsoft's Outlook may be dominant in offices, it’s by no means the standard email client. Ways of accessing mail are ever-expanding, with webmail, cloud services, companies with their own bespoke systems and apps such as the new Mailbox mobile system for iPhone and iPad.
Each has its own ways of displaying the email you send, and if you’re trying to impress with eye-catching images or fancy fonts, there are several things you need to bear in mind. If you’re html-savvy but need a few extra tips, Meantime’s designer Lou can help you not to get caught in the email trap.
Considerations for webmail services
Many recipients will be checking their email in their web browser, e.g. Yahoo!Mail, Hotmail or Gmail. Browsers will strip out your HTML, HEAD, and BODY tags in order to keep your code from interfering with their web pages. This means:- Any background colours you specify in your BODY tag could be lost. Wrapping the entire email inside a larger, 100% wide table and setting a background colour in addition to the body tag will enable the display without the tag.
- Any CSS that you place inside the HEAD tags could be lost, so use inline CSS. Check the email with the head tag removed to make sure the layout doesn’t break.
- There is no way to guarantee a font throughout the entire email or a style for links, so each section of text and each link will need its own inline style (where possible).
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
CSS in HTML email
Divs won’t work, so it's tables or nothing. Stay away from CSS positioning, padding or margins - all positioning should be done by table cells.Only use CSS for simple font formatting and colours and use spans to specify CSS for individual text areas. CSS can also be applied to strong tags, h1 tags etc. If you are going to use h1, h2 etc, you must specify margin:0 in the style. Most email clients ignore margin so use table cells for space, but it’s better to remove it for the one or two that will accept it.
Unfortunately paragraph (p) tags are out, so use a double line breaks (br) instead. Line height is also a no-no, so all spacing is done with line breaks (br) or table rows. If you’re using 4.01 transitional don’t use self-closing tags.
General layout
Emails should be built to a maximum width of 600px as most people view their emails in the preview window. This is also the optimum width for mobile devices.Each table must have a fixed width declared. To guarantee your email keeps its shape each table row and cell should have a width specified and, where possible, a height. Avoid percentages unless it's an overall table set at 100% to create the email background.
Nested tables are necessary if you don’t want your design to break. Use a table for the overall layout and a nested table for each section of the email.
Remove all instances of, these can break the layout. Use explicit heights and widths on the table cells to space, or double line breaks (br) within text.
Images
Background images are not fully supported, so splicing up the images will enable them in most email clients. Don't use transparency or transparent graphics (except transparent spacer gifs), but keep images and image sizes to a minimum.To stop gaps forming between sliced graphics put style="display:block;" on each image. I find it’s better to put this on every image just in case. Spacer images will guarantee your table won’t break and you’ll keep your lovely spacing.
All images must have an alt tag, for spacer images or images just for display use alt=""
Again, with 4.01 transitional html, no self-closing image tags should be used.
