Best practices for email design

In this article you'll find best practices and recommendations for your email design. If you're having trouble with email design rendering, please email Support.

Email Size

1. File size should be 75 KB or less. Delivra will not prevent you from designing (or uploading) a file larger than 75 KB. However, some email clients will clip an email message that is too large. For example, Gmail will clip messages at 102 KB.
   
   
2. Recommended overall template width is 600px. We do not recommend exceeding 800px.
   
   
3. Recommended overall template height is 1500px. We do not recommend exceeding 3000px. Some email clients will clip the message at a certain height, or you may see an image being cropped if your design includes an image that the email client determines is too tall. Note: Our drag-and-drop editor does not hard code file height.
   

Image Files & Sizing

1. File size must not exceed 4MB. We recommend that you resize very large image files before upload.
2. Stick to jpg, jpeg, gif, png file types - svg, tiff, bmp, and psd files are not supported.
3. File names must not include spaces or special characters, other than dash or underscore.
4. File name character limit is 100.
5. Avoid using image maps, most email clients do not support them.
6. Maximum image height & width is 800px (drag-and-drop editor).

Image Hosting & Media Library

1. Use folders to help organize media files. You can setup organization directly in the Media Library before any files are ever uploaded.
   • If images are not uploaded to a folder initially, they cannot be moved after upload (it will break the hosted file path).
2. Mass upload image files that will be used commonly like banners, logos, etc. in the Media library directly to make organization easier.

Known Outlook Rendering Issues

1. Outlook is finicky when it comes to rendering background images. We suggest also applying a background color in the event that the background image does not display, or it does not repeat, when viewed in Outlook email clients.
   
   
2. All buttons in your design will appear square even if you applied a curved radius. This applies to the button type of content in the drag-and-drop editor.
   • Also, only the button text will be clickable, not the entire button area.
   • If you have strict brand guidelines for buttons, we recommend that you use images that look like buttons.
     
     
3. Text alignment should be set in the text editor. Using the cell style options to center, or right align will be ignored in Outlook.
   
   
4. Outlook will cap the thickness of borders and display them at a max of 10px.
   
   
5. Line spacing set in cell style will be ignored in Outlook.
   
   
6. Image alt tags/tool tips will not display in Outlook. Outlook forces the display of the URL for security reasons.

Cell Groups

1. Cell groups can help organize your design.
2. Cell groups have settings specifically for mobile behavior (i.e. cell stacking).
3. Image files used side-by-side in a cell group should be resized to the same dimensions before uploading them to the system.

Text Blocks

1. Break up long blocks of text that contain varying text formatting into separate cells. This will lessen potential for format issues in the drag-and-drop text editor.

Mobile

1. Use the mobile preview tool provided in the drag-and-drop editor.
2. At a minimum, we recommend testing all campaigns to email addresses that can be checked on mobile devices.
3. Consider using our email rendering tool for email template design.

Designing for Dark Mode

Reasons to do it

You want to work with recipients and inboxes and not against them. By incorporating elements for dark mode, you get to keep the integrity of your design without losing out on readership because your email is designed with everyone in mind.

What is Dark Mode?

Dark mode inverts your light areas and dark text to dark areas with light text. So if your email is a white background with black text, it becomes an email with a black background with white text. This affects links as well. It does not affect images.

Dark mode don’ts

1. Do not attempt to work around dark mode by incorporating a lighter background image. This doesn’t work out as you’d expect – it will still recognize the text and background as needing to be reversed, so you’ll end up with light text on a light background.
   
   
2.  Do not use all images. While this does ensure your email remains consistent regardless of the inbox or settings within, it’s not a good practice in general.

Dark mode do’s

1. If you have a transparent logo that is dark, outline it with the color of your light background. This ensures the logo remains visible even in dark mode. Repeat this process with any dark transparent pngs such as icons or glyphs.
   
   
2. With general images, keep in mind the end result. If you have a bright image that leads into a brightly colored background, if the image is not transparent, the bright background color will no longer match the image in dark mode. When possible, either make sure to have an intentional looking end point for the background of your image or make it transparent so that it can invert gracefully.
   
3. If you have a background pattern or image you’d like to use, try making it as transparent as possible so that it still looks nice whether light or dark. No background pattern should be too busy, as that can affect the readability of your email.

If your email is already dark, it will not invert with dark mode turned on

Dark mode isn’t for everybody, so it’s still good to essentially have both a light and dark version. However, you can still design specifically for dark mode if you want to ensure your email is consistent all around. 

Contrast is key

Regardless of how you continue to go about creating your emails, contrast is your best friend for best visibility and readability. Make sure your text is legible against its background, and that your CTAs are clearly visible and don’t fade into their surroundings.