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