- Aim for 450 too 500 pixel width if you want one template for both desktop and mobile users. Conventional emails are set to a fixed width between 550 and 600 pixels, which is ideal for average desktop computers. However, mobile screens are much smaller; the most common mobile email readers are in a range of 320 pixels.
- iPhones allow for a 300-pixel width when held vertically and a 480-pixel width in landscape format. iPhones also resize emails to fit the screen, but many other smart phones don't, so it makes sense to design for the lowest common denominator. The benefit is not only that you ensure the recipient sees as much of your email as possible, but also that it limits the aggravation of scrolling side to side when viewing on a mobile device.
- Set a minimum width for your images: Images may be resized depending on the mobile device depending on the device. This can result in images appearing much smaller than expected or intended. Avoid this by adding a minimum and maximum width to the image. The maximum width should be set to the full size image width as viewed on a desktop. The minimum width should respect the limited dimensions of mobile devices described above.
- Example: <img alt="image alt. text" height="1181" src="image location" width="1083" "min-width: 250px; max-width: 1083px;" />
- Using images and alt tags: Image to text ratio is another factor to contend with when dealing with spam filters, so a 60/40 text to image ratio should be maintained for best results. Image file sizes need to be considered because a mobile device will not load images as fast as a desktop or laptop. Not to mention, they eat up those valuable limited data plans. Try to keep the size of each image at 20k or less. The overall file size of the email should not exceed 50k to 70k. Do not use Flash or gif animations, they won't work and just add to the overall file size of the email.
- Alt tags are snippets of text related to an individual image that are commonly used in email so that before an image loads, the user has an idea of what the image is, what the offer might be, or the overall theme of the email.
- Keep important text above the "fold" area (top 200 to 250 pixels). This area is prime real estate for the 3 to 5 seconds a constituent is focused on your email message, so it needs to have useful, readable text not embedded within an image that may or may not appear.
- Use a clear call-to-action button and clickable url links above the fold. An actionable "Donate now" or Register Now" call-to-action graphic should be placed in a location high up in the email to entice your reader to advance to the next step in the giving process, but use it in conjunction with HTML text that will be visible when images are disabled. It should also appear as a text based link so it's easily clickable.
- Use one-line pre-header text to outline the offer. Pre-headers are usually 1-2 lines of HTML text at the very top of the email. They are ideal for hand held devices to highlight important information, making it the first thing constituents read before they even consider downloading images. You can opt to include a mobile friendly url link to a hosted online text version of your email that is fully optimized for mobile users with limited text and images, but really the goal is to design something for everyone.
- Avoid 'spam' trigger words that might trip filters. Spam filtering technology works to weed out unwanted and unsolicited email messages to help consumers maintain a better inbox experience. Every email passes a filter and the contents (words and phrases) are assessed to determine if the message is spam. Any and all words contained within the message and subject line are scored high or low. The higher the score, the higher the probability that the message is spam. A simple Google search can help you find listings of common spam words or characters (i.e. "Free," "risk-free," "guaranteed," "!!!").
- Avoid dark backgrounds with white knockout text. The use of darker-colored background tables will be removed by many email readers, and white knock-out text will not be visible if the colored table is stripped.
- Use email safe fonts, avoid large fonts and red font color. Stick with common fonts like A, Tahoma or Times New Roman. Use a minimum font size of 12 pt for body copy and keep headlines around 20 pt. Any larger, and the risk of landing in the junk folder increases since some filters flag larger fonts used in email as spam. Keep in mind that the larger font means you'll have to keep your content brief. You'll most likely be able to fit 10-12 lines of text on a screen. The color red is a spam trigger and should be avoided whenever possible.
- Do not program using style sheets, java script or lengthy coding. Create the HTML using a text editor such as notepad and save the file as .html. This will require knowledge of html coding, but it allows you to create a clean and fully controlled creative. If you do not have the ability to do this and require the use of an html program (such as Dreamweaver) be sure that the settings of that program have been adjusted to only code using basic html with tables—no CSS. Do not use MS Word, layers, div tags or CSS. Avoid using paragraph tags as they are not recognized the same in all email readers, instead use line break tags (<br /><br />) which render much like paragraph spacing. Using old-school, basic HTML coding and tables helps avoid spam filters and ensures the email renders correctly across multiple platforms.
- Pay special attention to your subject line. It's actually heavily weighted in spam scoring and perhaps much more important than the actual creative design.
Connect and collaborate with fellow Blackbaud users.