Doctype, <html>, <meta> and <title> boilerplate:
Notes: Set to 'xhtml1-strict' as this is what GMail automatically uses so we'll have better results if we restrict out HTML development to it.. with a few exceptions.
Using meta tags to set the 'content type' doesn't really have any effect, as clients use the content type that is set in the email's header by the email server. Best bet is to replace any special characters with the HTML entity.
The 'format-detection' meta tag turns off iOS devices automatically detecting phone numbers and turning them into URLs. This is preferable as it will keep the text in the desired style, rather than turning it bright blue with an underline. iOS will also do this with 'dates' and with 'postal addresses', but there is no meta tag to switch off this feature. Instead you must turn them into a non-functional link:
<body>
Should not have any styles applied to it directly, as styles on this tag are technically not allowed in xhtml1-strict, they are ignored by some clients and other clients remove this tag all together. Use embedded CSS (see below) to apply styles to the <body>.
CSS
Other than this use Inline CSS, no External Stylesheets. You can develop and email using Internal Styles and then run it through http://premailer.dialect.ca/ to convert them to Inline. Copy any Embedded CSS to the bottom of the email as well, inserting it before the </body> tag so that Yahoo in IE7/IE8 will pick them up.
Avoid using CSS shorthand.
CSS support of email clients that we support:
| Text & Fonts | font font-family font-style font-variant font-size* font-weight letter-spacing line-height** text-align text-decoration text-indent text-transform |
| Color & Background | color background-color HSL Colors (CSS3) |
| Box Model | border margin*** padding**** width**** |
| Tables | border-collapse table-layout |
* iOS devices will auto-resize copy to a minimum size of 13px. To stop this:
** Outlook may not support; add 'mso-line-height-rule:exactly' before 'line-height'. For Outlook '07 the line-height must be no smaller than the font-size, or the text will not render at all!
*** Hotmail doesn't support 'margin' or 'margin-top'
**** Outlook '07/'10 doesn't support padding in <p> or <div>
Use web safe fonts.
If there is copy in the email layout which does not use web safe fonts, it will have to be displayed in the email using image files or require a design revision.
Is there a web-safe Helvetica Neue CSS font-family stack?
JavaScript
No.
Use tables for layout, not styled divs or spans. Usually you'll want to set the padding, spacing and borders of the table to zero and collapse the borders of the table and it's td.
Use a table to set a colour 'behind' the email's content.
The content table should be set to 600px wide and centered.
Set widths within <td>, rather than an overall width for the <table>. Specify as much of the layout's characteristics as you can, only use absolute pixel values, this helps get everything lined up as required by the design. Use 'spacer.gif' images within the td, to ensure sizes are pushed out to where you want them. Overkill on coding the positions and sizes of elements within the layout is better than not getting things where you want them. "spacer.gif" is a 1px x 1px transparent GIF that you specify whatever width and height you require, and it stretches to fill it.
Nest tables to achieve left and right padding. This is more reliable than using CSS margins or padding.
Avoid unnecessary whitespace in <td>. Some email clients add additional padding above or below the <td>'s content, breaking the design.
When using Photoshop "Slice" to create tables, [ I'll be rewriting this section ]
<img> styles boilerplate:
Always spec the 'alt' and 'title' for any images - including the spacers, which should have it set as a 'null' value.
Using 'display:block' to avoid unwanted white space around images means that if you want side-by-side images - for example buttons in a menu - you will have to use a table to position them.
Don't use background images. Except perhaps for subtle gradients behind text inside of <td>'s, in which case you need to also specify a solid colour which is a near enough substitution that it won't cause a drastic change in the visual impact of the email for clients which do not render bg images.
Don't use shorthand hex for colours. Use #ffffff instead of #fff.
Use as much text, rather than images, as possible. While your alt & title tags help, they are less acceptable to spam detection than actual text. An email that is mostly or entirely images will have a much higher spam score than one which relies on text for it's content.
Not using bg images and using as much text as possible may require co-ordination between developer and designer.
Android's auto word-wrap can be avoided by using "white-space:nowrap"
Yahoo's online email app likes to apply it's own styles to links in an email. To avoid this put a <span></span> inside of the <a></a> tags and use inline styles. You can't style the mouse interaction states of a link, the best you can do is define a static colour and if there is an underline or not.
iOS devices have a sub-pixel rendering issue which can cause borders to appear around images which are inside of tables. You can 'fix' this by setting the initial zoom of the viewport, but if the user zooms the page at all the lines will appear. The only other fix is to nest the table inside of another table with a colour that will conceal the lines set as it's background colour.. though this may not always be possible.
Super & Subscript
sub, sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup {top:-0.5em;}
sub {bottom: -0.25em;}
Web Page Version
Remove "view online as a webpage", "add this email address to your spam filter" and "unsubscribe" links. Maybe change the "unsubscribe" to a "subscribe" link.
Send to a Friend Version
Remove any "unsubscribe" links - maybe change them to a "subscribe" link. Make sure none of the lines in the code are crazy long! This can cause code issues when the PHP email script sends the email out.. strange characters inserted into the code = broken code. >.<
>
Don't use this inside of the alt and title tags of an image, as it will break in Yahoo Mail.
Office 365 Outlook
There is a stylesheet added on the server-side which adds a 5px gap between table rows. Currently there is no fix.
Remove Unwanted Gaps Between Tables in Outlook 2007 and 2010
If using align=right or align=left in the tables, wrap the content of the first <td> in a paragraph tag. Style that paragraph tag using the following: mso-table-lspace:0;mso-table-rspace:0;margin:0
This fix will also work for fixing vertical gaps in <td> in Outlook Web App but it causes a wide variety of other clients (Apple, Gmail, etc.) to break by adding in a 3 px width margin to the image. To fix this <img src="img.jpg" style="margin:0" />
Useful Online Resources
http://www.campaignmonitor.com
http://htmlemailboilerplate.com/
http://www.emailology.org
http://premailer.dialect.ca/
http://validator.w3.org/
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
http://www.emailonacid.com/
No comments:
Post a Comment