General design for the viewport
When you design for an e-mail-program, you will experience some limitations when working with the viewport - the screen display you first see in the e-mail in. In most e-mail program the viewport is around 150 - 200 pixel high and have a resolution on 1024 x 768 pixel, which gives you a limited frame to show the newsletter to the subscriber in.
When the subscriber is interested in reading the newsletter, many will open the newsletter in a bigger window, but to get the reader so far in the process, is it important that the area the subscriber sees first, captures his/her interest. Have that in your mind when you design. Be aware of big logos and web banners, it takes the focus away and subscribers can loose interest.
Furthermore you need to consider how the newsletter will look outside of the frame. Normally there will be a plain background around the content. Newsletters do not end outside of the normal 600 pixel width, keep this in mind when you design.
Design elements
Some design elements can be difficult to handle in the conventional e-mail-program. Here is a short introduction of these:
Pictures Most of all e-mail-programs block pictures, when the e-mail is being showed. The subscriber have to actively load the pictures.
Content should therefore be presented neatly and clearly, even when images not are loaded. And importantly, elements such as headers should not be inserted as images but as pure text.
Sections E-mail-programs nearly never interprets the <p> tag the same way. In some e-mail-programs it is possible to remove the build-in margin with CSS. It is because of this that the distances between the sections do not match perfectly, if you use the <p> tag.
Background pictures Outlook 2007, Outlook 2010 and GMail does not support background pictures like other e-mail-programs and web browsers generally. Here it is only the background picture that is supported on the body- element. Therefor you can only set up a background behind the content not behind the elements in the content. Additionally the background has to be repeated infinitely in width plus and in height, because the repeat-attribute does not work correctly.
Fonts The font has to be installed on the readers computer before fonts will be correctly loaded, just like when you design to a browser. In the browser it is possible to load special fonts with technical support, this is not possible in an e-mail-program. Please be aware of the standard fonts that you will find here.
Dynamic content
There is a very limited support for dynamic content in e-mails, which is why Javascript, Flash and iframes will not work. Video support is also limited. (Only available in Mail.app for Mac and on iPhone/iPad). The best solution is linking to your video on Youtube, Vimeo etc, instead of directly embedding it in the e-mail. Animated GIFs is supported, but in Outlook 2007 and Outlook 2010 its only the first picture in the animation. Is is therefore important that a web banner animated as a GIF has the message of the banner in the first picture.
Please contact us if you have further questions about design and Ubivox in general at support@ubivox.com
