Designing Emails with HTML

How to Design Emails with our HTML Editor

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.

Image showing ability to select editing experience for emailImage showing ability to select editing experience for email

Image showing ability to select editing experience for email

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.

Image showing HTML editor beside the previewImage showing HTML editor beside the preview

Image showing HTML editor beside the preview

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.

Email Client

Can they block images?

Displays Alt Text

Styles Alt Text

AOL

Yes

Yes

Yes

GMail

Yes

Yes

Yes

Yahoo

Yes

Yes

Yes

Outlook

Sometimes

Yes

Yes

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.

4. Add a Pre-header (Preview Text) for Email

Preheader text or "email summary" is the text that shows up next to or below the subject line in the inbox. Read more about recommended lengths of Pre-headers in Email Best Practices.

To set this up, drag add a span to your HTML email that includes a short snippet:

<span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">
Hidden preheader text shows up in most inboxes &amp; is a great way to give more context on the email!
</span>

Replace the text between the span elements with your email summary.

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.


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.


Did this page help you?