Best Design/HTML CSS practice for emailers that are compatible for maximum email clients
Ideal width : The ideal email width is 600px wide to render properly on all devices and browsers.
Handheld first : Approx 65% of emails are now opened on mobile devices. This means that you can no longer ignore the idea of designing for mobile devices.
Use entity code for special characters : On the off chance that your email service provider utilizes an alternate sort of encoding from the thoughtful you chose for your email, it might cause your exceptional characters (like ©) to show up inaccurately, regularly as a square or junk characters. This can influence quotes and punctuations, too. To maintain a strategic distance from this issue, utilize a character entity code.
Minimal images : On the off chance that a subscriber has turned off images, your entire email might be lost. In the event that you should utilize styled alt text to ensure your message gets across if the picture doesn’t load. Use a combination of colors & fonts to design your emailer, use images only for important and unavoidable components. Keep images crisp but optimize for load time with a resolution of 72 dpi.
Email-safe fonts : Every inbox will render fonts differently, hence use the Email-safe Fonts, these fonts come preloaded on most computers and render consistently over 90% of the time. At minimum, use 13 or 14 pixels for the text and 20–22 for the titles. This will make your email much more readable on a medium to small screen. Some of the email-safe fonts :
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Use Old School HTML coding method: The most important guideline for HTML emails is that CSS layout just doesn’t work. The major email clients either offer no support at all, or mess up in frustratingly different ways. Tables are the most reliable way to achieve a consistent layout. They also allow you to replicate something that many email clients otherwise don’t allow. With tables, you can take advantage of the align attribute, which was the predecessor of modern CSS floats. There are some problems using tables, too, as learned the hard way. Here are a few tips for dealing with tables in an email.
Create a structure that is flexible enough. The main table should be divided into 3 sections, mainly header, content and footer. Each section should have its own table to design further this way; differences in structure of either of the components will not impact others.
Use properties of HTML tags to apply theme/design to the content, using this native code helps email to be compatible on most of the email clients, especially Outlook which renders html with Microsoft Word: the word processor in all it’s Windows Desktop apps.
Set widths in every cell instead of on the table :
<table cellspacing=”0" cellpadding=”0" border=”0">
<tr>
<td width=”310"></td>
<td width=”290"></td>
</tr>
</table>
Most of the email clients render HTML differently when it comes to width td cells, so it’s better to us pixel units for width as it is most reliable.
Use nested tables for all three sections as explained above (a), this will help for consistency and better formatting. It’s old school, but it’s tried-and-true.
Avoid using advanced css, use as much as possible HTML tag properties, eg if you want to give color to background inside a section which in laid in the Table, use bgcolor=”#000”. Use inline css wherever applicable, some of the email clients remove/ignore <style> tags.
