.png){kind=logo}
The Fluttermail Guide to Email Design
One of the key factors of the success of Fluttermail campaigns is e-mail design. Unlike website design, using too much HTML and too many sophisticated CSS rules to design an e-mail can lead to problems for your subscribers when viewing it in their browser. E-mail design is also much easier than building a website because you do not need to pay attention to the same formalities, such as adhering to W3C standards. As such, we've put together this guide to remind you of the fundamentals of e-mail design, with tips on how to make any e-mail accessible to your subscribers, regardless of which browser they are using.
Layout
Width: The width of your e-mail should not exceed 650px. This ensures that your e-mail will display properly in the majority of browsers.Simplicity: If you have a complicated design you are likely to be confronted with technical problems so try to keep your design as simple as possible. In most cases, a skilled user could probably fix any issues that may arise with a complex e-mail design but it would require numerous 'trial and error' tests.
Using HTML Tables: E-mail design requires the use of standard HTML tables because CSS rules, such as floating, will not be applied correctly in certain browsers.
Using colspans="X": This HTML element is not supported by all browsers so it may not be a good idea to use it in formatting your e-mail design.
Table Cell Padding: You should be aware that Outlook has a tendency to distort your design if you have cells in the same row with different cell padding. Outlook may take the cell padding from one row and then apply it to all of the other rows. As such, you should either apply the same cell padding to all of the rows or you should insert an inner div or table with it's own cell padding into the the desired cell.
CSS
External Style Sheets: These will not work for the vast majority of your subscribers so it is recommended that you do not use external style sheets. Instead, your CSS should be inline with your HTML.
CSS Classes: Again, these tend not to work. As an alternative to declaring CSS classes, you should use inline CSS, such as <divstyle=" color:#cccccc;">content</div> rather than <div>content</div>.
Avoid CSS Shortcuts: Grouping CSS properties simply doesn't work for e-mails in the same way it does for websites. Therefore, properties should be set out individually. That means style= ”font: 14px, Arial” should be written as style=”font-size:14px; font-family:Arial”.
Floating and Positioning with CSS: As stated earlier, this is likely to cause problems when your subscribers open your message in their browsers, so you should use HTML tables instead.
Images & Videos
Image Source URLs: It is incredibly important that every image has an absolute image source URL. That means that instead of showing <img src=”img.gif”> the HTML will show up as <img src=”http://site.com/img.gif”>.
Using Alt Tags: Most e-mail clients will disable all images until the recipient confirms that you are not a spammer. As such, every image must have an alt tag, otherwise the recipient will only see white boxes. In your HTML an alt tag will look like this - <img src=”http://site.com/img.gif” alt=”Company Name”>.
Embedding Videos and Flash: It is recommended that you do not embed videos or flash into your e-mails. Apart from making the overall file size too large, a lot of e-mail clients won't support flash or videos. Instead, you should take a screenshot from your video/flash and embed the image with a link to the video/flash so that it opens in a new tab or window.
Animated GIFs: Whilst the majority of e-mail clients do support animated GIFs, Outlook 2007 does not. Where animated GIFs are not supported, the first image of the sequence will show as a static image. Therefore, only use animated GIFs if they are absolutely necessary.
Spliced Images: When you want to include a large image in your e-mail it can be tempting to splice that image and place the various sections in cells alongside each other. You should be aware that some e-mail clients tend to add extra space between images, meaning the large image won't show as desired. As a result, e-mails with spliced images should be tested carefully.
Using Images to Adjust Layout: As above, the most obvious layout tricks don't always work out as planned. Some users place tiny images (about 2px in size) to correct their layout but this can cause problems. Some e-mail clients will take these tiny boxes as a sign of spam, and your e-mail will be sent directly to the recipient's spam folder.
File Size: The larger the file size of your e-mail, the longer it will take to downloads onto the recipient's screen. Like websites, slow speeds in downloading e-mails can be very off putting and often means the recipient won't bother reading it. Keep your file size as low as possible.
Test: The golden rule of e-mail design is that you should always test your e-mail thoroughly before sending it to all of your subscribers.
Background
Background Images: These don't always show up in e-mails as not all e-mail clients support the use of background images. However, if you do use them then you should do so with HTML rather than by applying CSS rules.
Background Color: If you want to apply a background color to the main body of your e-mail, you should be aware that not all e-mail clients will show it. Consequently, you may wish to also wrap the main body in a div with the same background color. This means that if the e-mail client doesn't show your main body with a background color, it will still have a colored border, which can often be a reasonable compromise.
Other
Javascript: Unfortunately, e-mail clients tend to interpret javascript code as being dangerous, meaning that your e-mail gets marked as spam and your recipient won't ever see it. Do not include javascript in your e-mail.
Microsoft Office: Whilst Microsoft Office may have a huge amount of fantastic uses, e-mail design isn't one of them. The likelihood is that the HTML generated from a Microsoft Office file will cause problems with Fluttermail and e-mail clients alike.
HTML Comments: These are sometimes interpreted as spam by e-mail clients, so try not to include too many HTML comments.
The Opening <body> Tag: This is the start of your e-mail so don't ever place anything above the opening <body> tag. If you do, the content won't show with the majority of e-mail clients.