Designing Emails with HTML

Our HTML editor allows you to create highly stylized and branded emails, allowing you to control every aspect of your email design for both mobile and desktop.

To form great HTML emails, we recommend the following:

• Ensure yourself, or a team member are experienced with using HTML and can produce great responsive HTML emails that work across device types
• Host your images somewhere that is publicly accessible, such as your website, AWS or similar.

Getting Started

In order to begin creating your HTML email, select the HTML Editor.

By selecting HTML Editor you’ll now see a split screen view where you can write code on one side, with the email preview showing on the corresponding side of the page.

Using the HTML Editor

Enter your code on the left hand side of the screen and click to Send Test Emails to ensure your email renders correctly on mobile and browser.

Functionality with the HTML Editor

1. Click Support

We automatically track when someone clicks through from a CTA within your HTML email.

2. Automatic Unsubscribe Link

We automatically add an unsubscribe link into your the initial HTML default template for you to customize. Unsubscribe links are required on all emails at this time.

See Unsubscribe Links & Email Subscriptions for more details.

3. Import your Own Templates

If you already have HTML Email templates from elsewhere, you can copy and paste them into our editor to get started.

Best Practices of HTML Emails

1. Use Inline CSS

Email clients are unpredictable. Even today many clients strip styles that are not inlined, so it is important to inline your CSS before sending. Don't risk your transactional emails or marketing campaigns falling apart. We recommend you use this Responsive Email CSS Inliner to help.

2. Add Alt Tags to Images

To ensure your email is accessible, add alt tags to all images. An alt tag ensures that there is some text visible if an email client is unable to render the image. This can occur on older email clients, the user has disabled images from rendering or when there is a lack of internet access.

Source: Litmus Email Client Support

3. Name and Format your HTML

It's important to ensure you correctly name HTML elements and format your HTML. This ensures the email is accessible for screen readers often used by a person who has a visual impairment or cognitive disability.

You should also correctly name and format colors in HTML.

5. Ensure there are No Broken Links

It's critical in HTML emails there are no broken links. These can reduce success of deliverability and lead some of your emails to be flagged as spam.

6. Avoid Unsupported HTML

Most email clients have limitations on the type of content they can support. Avoid the following content to ensure your emails and content are not blocked.

• JavaScript and Flash
• Embedded audio and video files
• HTML forms
• Iframes
• Text layering
  
  Hyperlinks are a great alternative to sharing the content you need with your customers while ensuring email deliverability and accessibility.

FAQ

How can I use my existing email templates?

If you have an existing email template, feel free to copy and paste into our HTML editor. Don't forget to add your Unsubscribe Link

I don't have any existing email templates. How can I get started with HTML for custom emails?

If you don't have any existing templates, you can use sites such as Really Good Emails* or similar to find responsive email templates.

Similarly it maybe useful for you to read up and learn the basics of HTML*

* OneSignal does not have any affiliation with Really Good Emails, nor Code Academy. There are alternative providers with similar services.

Can I use custom fonts in my email?

Yes, but beware that not all inbox clients (like Outlook) support custom fonts and will fallback to its supported font.