Top 5 Do's and Don'ts of Email Design

This article covers some best practice tips when building email campaigns. These tips are not specific to the mail2 product; they are general tips when building campaigns and working with HTML.

Do:

1. Test

The preview provided directly in the mail2 dashboard is available for a quick visual reference. This does not indicate how your email will render across various web-based and desktop email clients. Each follow their own unique standard for rendering HTML / CSS and vary their treatment (or lackthereof) for certain elements. For example, web-based clients such as Gmail and outlook.com may ignore certain margin or padding elements, while certain desktop based Outlook versions may fully support them.

Always test before sending a campaign to ensure your email will render as designed in various desktop and web based email clients / browsers.

By sending tests of your campaigns, you can ensure your email design looks great across all clients!

2. Images

Use a smaller image sizes so once it hits a patron’s inbox, it won’t take a while to load. The ideal file size of an image in your email should not exceed 50k to 70k. If you have a lot of images included within your email design, you want to be sure that image file sizes are kept small so there aren’t any odd load delays when a patron is opening your email.
You also want to be sure that you are using image dimensions that match the image region in your template design. For example, if you have an image that is 1000px wide, intended for a position in your email at 600px wide, you’ll want to scale the image down to a “true” 600px wide.

The best approach is to design and scale an image to the correct dimensions before uploading into your mail2 media library, or you can simply use the mail2 image editor in your dashboard to officially re-scale any image in your library. By not doing so, this can sometimes results in stretching or mis-rendering of images that are either too big or too small. Certain email clients can potentially ignore the newly added width/height attributes that were applied in the HTML. As a result, this could also affect other areas of the email creating strange margins and spaces. By using images that match the final desired size, you can ensure no interference with your image or email design.

3. Spacing Issues? Hard Return vs. Soft Return

A hard return is simply pressing 'return' or 'enter'. A soft return is Shift+Return.

The difference between the two returns is that a hard return will insert a <p> tag in the HTML. Depending on the CSS in your template design, <p> tags can have various style elements which in return will inline upon send. Additionally, some email clients have their own styling definitions for <p> tags, which could create inconsistent spacing across various clients.

To avoid any inconsistencies, utilizing a soft return (Shift+Return) will always insert a true line break <br /> in your HTML.

4. Smart Email Builder Content Regions, How Can I Use Them Appropriately?

Smart Email Builder templates function best when they are used as designed. Another words, set image regions are strictly for image use and should match the suggested width (see Tip #2 above). Text content regions are intended for, well, just that. While you can insert images in text areas, this does create potential for unexpected design interference, which as a result may need to be resolved by applying additional edits directly in the HTML. This is also why it is important to test. If your template is mobile optimized, this further adds potential to interfere with the mobile responsiveness with the newly added image in question.

5. Text to Image Ratio

A balanced approach to text and image content is the best way to ensure readability across email clients and platforms. Additionally, this ensures that even the strictest SPAM filters permit your email through to the inbox. We recommend about a 60/40 text/image ratio.

Bonus Tip
What is the best approach to designing my email and gathering content?

The goal is to engage your patron through your email, and drive them to your website or relevant media content, right? With that being said, always keep in mind that short is sweet is always best. Clean sleek graphics and layouts can lead to positive results as you are not “losing” your patron in text heavy or overwhelming email designs. Using a less complex email design also helps you reduce the potential of design inconsistencies across various email clients / web browsers. A clear call to action, alt text, “sneaky” subject line preview text, keeping eye catching and relevant information “above the fold”, clever subject lines (ideally 55 characters or less), etc. are all important factors to your email content and design.

Most importantly, always ensure that you have a functioning Unsubscribe link as your patrons should have a clear and easy action to opt-out. A Manage Preference link, while not required for CAN-SPAM compliance, can be just as important as it helps you manage and continue the relationship with your patrons, rather than forcing them to choose between hearing from you or not.

Don’t:

1.Have spaces in your image or folder names in the media library

When storing files on the internet, mail2 or anywhere else, it is best practice to never have spaces in file or folder names. URLs will encode an empty space to %20 and that does not exactly match your filename, meaning it could possibly break the link, and therefore break the image. By using an underscore or a dash, you can easily create spacing for readability while also ensuring an exact character match, wherever your image ends up.

DONT: My Newsletter Image.jpg
DO: My_Newsletter_Image.jpg

2.Use javascript within your email campaign

Javascript will prevent an email from sending. Most SPAM filters do not allow emails into the inbox with javascript. Additionally, it is best to avoid embedding video as support for this varies across platforms and email clients. It is best to insert an image with a play icon placed over the image to encourage contacts to click on the video, linking to your video host in a browser or app, which will be more widely-supported than within the email client.

3.Create tables within the Smart Email Builder

The Smart Email Builder is intended for basic use for text and image content. The structure of the HTML is not intended to support building tables within content areas. It may work for one email client and even look good in the editor, however this is the exception rather than the rule and you risk design interference on other email clients. If you know how to build tables and are wanting more flexibility in design, it is best to consider using the Full Email Editor.

4. Use custom fonts

Custom fonts are not widely supported across email clients. Often email clients will simply replace your custom font with a basic font of their preference (not yours), so it is best to select a standard font to ensure this is the font your recipients will see when viewing your email communications. If you need to use a certain font for branding or consistency, you can easily place the text within an image, however, keep in mind Do Tip #5.

5. Use single-images as your entire email

While tempting, single-images for your email is the best way to get flagged as SPAM. Additionally, if a contact has images set to not display, he/she will not see the image. By using a single image, you are missing out on the dynamicity and flexibility that a balanced multi-image, multi-text area email offers. It is always best to balance text with images to ensure readability as well as engagement.

Bonus Tip
We said it before, and we’ll say it again, short is sweet.

Try to avoid text heavy and complex email designs. The use of bright color schemes can appear too “busy” to the eye and should also be avoided. Do not use extremely small font sizes (less than 10px) that may be hard for some to read. If you are using a more complex email layout, for example a 1:3 column template, be sure that your text is balanced across each column to prevent a lopsided design (again, short is sweet).