Editor design guidelines
Email design is a key factor in the success of email campaigns. Well-structured, visually appealing emails help build trust, increase engagement, and avoid spam filters.
Start by establishing your email layout. You can:
- Manually build the structure using widgets in the side panel.
- Use a predefined template for a faster setup.
Drag and drop elements from the side panel to add content, then rearrange, add, or remove elements as needed.
Content
The Content tab provides elements you can use to build and customize your email campaign.
Text
The subject line is one of the most important parts of your email, as it directly influences open rates and conversions. A well-crafted subject line should be between 20 and 60 characters, use actionable and attention-grabbing language, and avoid negative terms or excessive punctuation. Capitalization can improve readability, and numbers can increase engagement. Make sure your subject line displays properly on both desktop and mobile devices.
Connect with recipients using personable language, emojis, or their first names, and make your message relevant by referencing current events, questions, or exclusive offers.
You can use attributes and placeholders in text and links to create highly personalized messages.
The body of your email contains the main text content, followed by images, videos, or other media elements, and the footer. Keep your content concise and focused to maintain reader engagement.
Default text attributes and alignment can be set in the Body tab. You can style individual text areas by selecting the component and adjusting settings in the Content tab.
Fonts
Fonts play a crucial role in the design and readability of your emails. The Email editor offers a wide selection of fonts to help you align your email’s appearance with your brand style.
Custom fonts are not supported, as all fonts used in emails must be publicly available for free and have a matching fallback in case they are not supported by the recipient’s email client.
Legal and licensing considerations
- A license is required to use web fonts online. Many web font licenses restrict redistribution, which can make including paid fonts in emails a potential violation of the End User License Agreement (EULA).
- Some paid web fonts are licensed based on the number of monthly email opens, which can become costly if a font is made available to all clients in the Email editor.
Compatibility considerations
Custom web fonts generally only work in a limited set of email clients, including:
- iOS Mail
- Apple Mail
- Android default mail client (not Gmail app)
- Outlook 2000
- Outlook.com app
- Thunderbird
For other email clients, your selected font will automatically fall back to a default font to ensure your message remains readable.
Images
Images are a key element of most email campaigns. The Email editor limits image widths to 701 px, which is optimal for screens and most email providers. Prepare your images at this size to avoid cropping or resizing issues. Image files must not exceed 10 MB.
You can include images in your email by:
- Uploading from your device directly into the editor.
- Using an image link, ensuring the URL does not require authentication to access.
Supported formats include:
- JPG/JPEG
- PNG
- GIF
You can make images clickable by using the Image Link option to link to promotions, your homepage, or other relevant pages.
Always add Alternate Text (Alt Text) to your images. Alt text ensures that people using screen readers can understand the content or purpose of an image. Keep descriptions concise but descriptive enough to convey essential information. If alt text is missing, the Audit tab will display a warning.
Best practice: Use clear, descriptive alt text for all images to improve accessibility and deliverability.
HTML
If you prefer to use a custom HTML email template, the HTML widget allows you to paste your code directly into the message. Any changes you make in the HTML are reflected in real time within the Email editor, giving you immediate visual feedback.
Buttons
Call-to-action (CTA) buttons guide recipients toward the desired landing page of your email campaign. Use buttons sparingly to avoid overwhelming or confusing readers. Focus on a minimal number of buttons that stand out and encourage clicks.
When designing buttons, ensure they are large enough to be noticeable and accommodate the text label. Adjust the width as needed so the label is fully visible.
You can customize button styling, including:
- Color: Use contrast to make the button stand out against the background.
- Font: Ensure the label is readable and aligns with your branding.
- Borders: Add visual definition without cluttering the design.
Always make sure your buttons are visually distinct from the background to maximize engagement.
Social
Add links to your business’s social media pages to engage readers and encourage them to connect through additional channels. Select the corresponding social media icon, provide the link to your page, and clicking the icon in the email will direct recipients to the specified URL.
You can reorder social networks in the side panel by dragging them to the desired position. Adjust styling options such as padding, background, and alignment to keep your layout tidy.
The editor provides a selection of 30 social media networks, and you can customize the icon style to match your design preferences.
Video
Videos are highly engaging, but most email providers do not support playing videos directly within the email. The Video widget allows you to insert a video by adding a direct URL link to the video file.
Supported video formats include:
- MOV
- MP4
- WebM
You can customize the video thumbnail to improve appearance and encourage clicks. For animated content without linking to a video, use the Image widget to insert a GIF.
Footer
The footer is the section at the bottom of your email, typically containing essential information about the sender. Include links such as the option to unsubscribe, terms and conditions, copyright notices, privacy policies, and the reason for receiving the email. Proper use of footers helps reduce spam complaints and ensures compliance with anti-spam regulations.
Mandatory footer information
All email communications must include the following details in the footer:
- Current year
- Company name of the sender
- Physical address of the sender
- Unsubscribe link
Use the Footer widget to display this information. The default footer text uses placeholders for the company name and address, which are automatically retrieved from your account:
Copyright © CURRENT_YEAR COMPANY_NAME. All rights reserved. Our mailing address is ADDRESS. Want to change how you receive these emails? You can UNSUBSCRIBE from this list.
Sending emails with footers
If you attempt to send an email without a footer, the system will prevent sending until a footer is present.
- When using the web interface, the unsubscribe URL is added automatically.
- When using the API, you must add the unsubscribe URL manually by including the following line in your request:
<a class="unsubscribe_link" href="{$unsubscribe}" style="color:#999; text-decoration:underline">Unsubscribe</a>
Infobip-generated unsubscribe links are always included and must remain present, even if hidden in Preview mode. To enable the unsubscribe feature over HTTP or SMTP API, replace the href attribute value with {$unsubscribe}.
List-unsubscribe header
Providing recipients with an easy way to unsubscribe is essential for maintaining trust and protecting your sender reputation. The list-unsubscribe header embeds a link directly in the email header, making it easy for recipients to opt out of future emails.
URLs
Links are an essential part of your email and can be added throughout the message editor and its widgets. Use the link icons or fields in each widget to attach the desired URL to the selected element. Some widgets, such as buttons and videos, require a link to function properly.
If a required link is missing, a warning appears in the Audit tab, prompting you to add the necessary URL.
Gmail promotions
The Gmail Promo widget allows you to add Gmail annotations to your emails, creating interactive and engaging content. Gmail groups and highlights annotated emails in the Promotions tab, helping recipients identify messages they are most likely to engage with. Annotations can include key information such as deals, promotion codes, and expiration dates.
Adding images to your annotations can make your messages more visually appealing and discoverable. For example, including your company logo or promotional images helps your email stand out from other messages, attracting recipient attention. Annotated emails are especially highlighted in the Gmail Promotions tab on mobile devices.
Tips for testing Gmail promotions
- Use a dedicated testing account, such as
[email protected], for faster testing. - Clear old messages to ensure the promotion displays correctly.
- Verify your sender with proper DNS settings that comply with Google guidelines.
- Ensure images have a 3:9 aspect ratio, are hosted on HTTPS, and are not GIF or WebP formats.
Kinetic features
Kinetic features allow you to add interactive content to your emails, making them more engaging and likely to increase conversion rates. These features provide a website-like experience directly within the email.
To add kinetic features, drag the desired widget into your email design and use the available settings to customize its behavior.
The basic kinetic widgets include:
- Interactive coupon
- Rain animation
- Carousel
- Hover image
- Accordion
- Hotspot
- Tabs
Each widget includes a Compatibility section to show which email clients support the animation.
Interactive coupon
The Interactive coupon widget displays clickable images that reveal discounts or offers when interacted with.
To set it up, provide two images:
- Front image: Displayed initially in the email.
- Back image: Revealed when the recipient clicks the front image, showing the coupon details.
Choose the type of animation for the image transition:
- Flip: The image turns over to reveal the back side.
- Slide: The image moves from side to side to reveal the back side.
Rain animation
The Rain animation widget adds dynamic, falling objects to your email design.
You can choose the type of objects to display, including:
- Sphere
- Image
- Text
Customize the animation by adjusting the number of objects, their size and color, and whether the objects rotate as they fall.
Carousel widget
The Carousel widget creates a sliding image gallery directly within your email.
Key features:
- Maximum of 10 images per gallery.
- Add individual captions for each image, including placeholders for personalization.
- Interactive sliding functionality to improve engagement.
Hover image
The Hover image widget uses two images to present dynamic content. When a recipient hovers over the main image, it switches to the hover image.
To set up a hover image, provide:
- Main image: Displayed initially in the email.
- Hover image: Displayed when the recipient hovers over the main image.
If the hover effect is not supported by the recipient’s email client, a fallback displays the original main image only.
Accordion
The Accordion widget is ideal for emails with a large volume of text. It allows you to create collapsible sections, displaying content in a compact and organized manner.
Each section of your message is displayed as a title in the email. Recipients can click on the title to expand the section and read the detailed content.
Hotspot
The Hotspot widget makes images and graphics interactive by adding hotspots. These interactive points can highlight product features, provide details about individual offers, or emphasize specific parts of an image.
When a recipient clicks a hotspot, a popup appears containing an image, text, and an optional call-to-action link.
You can add up to 10 hotspots per image. Each hotspot is represented by a marker, which you label and position using the Top and Left percentage settings. The associated popup displays the content you define.
If hotspots are not supported in the recipient’s email client, a fallback displays the original image with its link.
Tabs
The Tabs widget organizes content into separate sections, helping to save space and make longer messages easier to consume.
Create individual tabs by providing header text to identify each section. Enter the detailed content for each tab and format it as needed.
The widget supports up to 10 tabs, and you can use the Preview option to check how the tabs will appear in the finished email.
Recipients see the tab headers at the top of the message and can select a tab to view the corresponding content.
Blocks
The Blocks tab lets you focus on the structure of your email:
- Choose from blank column layouts or customize existing ones.
- Adjust individual columns for background color, padding, and borders.
- Use block templates for headers, content, catalogs, and footers for a richer starting point.
- Create up to 25 custom blocks to match your brand style.
Body
Use the Body tab to customize the overall appearance of your email and ensure it matches your brand. You can adjust the following settings:
- Text color: Improve readability and engagement.
- Background color: Enhance contrast and visual appeal.
- Content width: Control how your email displays on different screen sizes.
- Content alignment: Organize text and media for a balanced layout.
- Font family and weight: Maintain a consistent style throughout your email.
- Link color and underline options: Make links stand out or match your design.
These settings give you full control over your email’s presentation, ensuring it looks polished and professional on all devices.
Audit
The Audit tab displays warning notifications for outstanding design actions that must be completed to ensure your email is valid, functional, and legally compliant. These notifications guide you in completing essential email elements and help you avoid errors while creating a professional email.
Other common alerts include:
- Missing links for buttons
- Missing alt text for images
Review and resolve all audit notifications to ensure your email meets compliance and quality standards.
