The following guide is based on our own experience and knowledge.If we are mistaken about anything, please do not hesitate to write to us at bartos@incomaker.com; we are always happy to learn something new.
Design Summary
- No Overlapping Elements: Design elements cannot overlap, as email clients do not support this functionality. Overlapping effects can only be achieved by creating them as a single, flat image that is then inserted into the email.
- Web-Safe Fonts: The fonts that will display correctly almost everywhere, and which should form the foundation of your design, are: Arial, Verdana, Helvetica, Georgia, Tahoma, Lucida, Trebuchet, Times New Roman, Courier, Courier New, and Geneva. Any other font will fail to display in 99% of email clients.
- Element Alignment: For maximum compatibility and predictable rendering, the best choice is a simple, often centered, alignment that works reliably on both desktop and mobile. If you are designing a more complex multi-column layout, you must account for how the elements will reflow and realign on mobile devices (typically stacking vertically).
- Image and GIF Dimensions: Images and GIFs should dimensionally match the block they will be placed in (e.g., do not insert a 150px wide image into a 200px wide block. It would either fail to fill the block, or if stretched, it would become distorted and lose quality). Supported formats: .jpeg, .gif, .png.
- Image File Size: Although there is no direct penalty for image file size, it is crucial to keep it as low as possible. Large images (in MB) can cause problems: they significantly slow down email loading, consume the recipient’s mobile data, and can even cause some email clients (like Gmail for messages over 102 KB) to clip the email or trigger spam filters. Always strive to optimize images for the web before uploading.
- Background Images: Design background images without relying on precise positioning of elements over them. Their support is inconsistent across email clients, and many will not display them at all. Always specify a solid fallback color.
- Font Sizes: A good standard is 14px for body text on desktop and 16px on mobile. Heading sizes are a matter of design choice.
- Email Body Width: The default email body width in Incomaker is set to 640px, and our product blocks are designed for this width. Using a narrower email body may result in product elements not aligning correctly on the same row.
- Video in Emails: Video can only be included as a linked image or GIF. Incomaker’s template editor includes a tool to automatically generate a thumbnail from a YouTube video, which links directly to it.
Design Requirements
- Create your design in an application like Affinity Designer, Photoshop, or another vector editor, or a web-based equivalent like Canva.
- The design should be at a 1:1 scale, with all dimensions in pixels.
- Export and send all graphical assets (images, icons, etc.) separately from the main design file, in .png format with a transparent background.
- If you wish to import an existing email template, please send it (as an attachment, not a forwarded email) to bartos@incomaker.com or provide us with access to the editor where the template is located.
Design Explained
1. Fonts
As stated above, fonts other than the standard web-safe list (Arial, Verdana, etc.) will not display in the vast majority of email clients. If you need to use a custom font, the only reliable method is to create an image and place the text with the desired font onto that image in a program like Photoshop.
2. “Mobile-First” Design
The more complex a template is, the greater the chance it will render incorrectly or inconsistently across different clients. It is universally recommended to design templates with a “mobile-first” approach, prioritizing simplicity and a clear hierarchy.
3. Multiple Elements on a Single Line
If you place multiple elements on one line (e.g., text-logo-text), it is best practice to have them occupy equal width within the row and be centered consistently with the rest of the template.
4. Dimensions
Email Width: The email body width is set to 640px in Incomaker. This is crucial for our product blocks to render correctly. A narrower design may break the layout of these blocks.
Image Sizes: Image sizes do not have to be exactly 1:1 with their container, as they can be adjusted with HTML/CSS. However, if an image or element appears at a different size or alignment in one client versus another, it requires testing and fine-tuning. This can be caused by various factors, and layouts can “break” from time to time due to updates in email clients. Ideally, all images in the same row should have the same width or height, or both.
Font Sizes: Font sizes and line heights are up to your discretion and testing. The general recommendations are:
- 14px for standard body text on desktop.
- 16px for standard body text on mobile.
- Heading sizes are purely a design decision.
- Be aware that font rendering can vary slightly across different devices and clients.
Background Images: Background images do not render in some email clients, and it is very difficult to ensure precise placement of foreground elements on top of them. A safe approach is to use a background image for the main email body with a texture or pattern that does not require exact positioning. Always include a solid fallback background color for clients that do not support background images.
Padding: Padding is a design choice. However, the rule of simplicity applies here as well. If you center most of your content, you often don’t have to worry about complex left and right padding adjustments for different clients.
GIF Dimensions: The dimensions of a GIF should roughly correspond to the width of the container it will be placed in.
Video: Video is added to emails as a link. This is typically done by using a static image or a short, looping GIF as a preview that links to the full video on YouTube, your e-shop, or your website. The video file itself cannot be embedded. Incomaker provides a tool to automatically create these linked thumbnails from YouTube videos.