Discover helpful tips to improve your HTML email notifications so they display beautifully and consistently across different email clients.
Learn tips on how to set up HTML email notifications, including using CSS and adding images.
New to Email Notifications? Read the first article in this series for an introduction to the Email Notifications feature.
Accessing the features mentioned in this article
Where can I find this feature using the top menu?
- Manage > Notifications > Email > Email Notification
What more do I need to use this feature?
-
Admin or restricted permissions to Manage Notifications.
Which Checkfront version supports this feature - classic items, classic products, or both?
- This feature is available in both our classic items version (Inventory > Items) and our classic products version (Inventory > Products). → Learn more about products
Sending HTML email tips
Creating notifications and emails that render consistently across all email platforms can be tricky, since each email client has its own rules. That said, a finely tuned HTML email can organize your notifications and receipts in ways not possible with plain text.
Here are some tips!
Keeping it simple
You aren't building a web page. An overly complex HTML email can cause delivery and formatting issues. Use the minimum formatting to achieve an attractive, functional layout.
Using a Table Structure
Many platforms don't support absolute positioning (float, margin, padding), so tables work much better as the framework for your design.
Using Inline CSS
Inline CSS is more reliable than using CSS in the header. Gmail, for instance, strips CSS from all emails. If you use inline CSS, your style won't get lost for those Gmail recipients.
Adding images to email notifications
|
Adding images to content |
Hosting images online
Images and documents must be hosted online, such as on your website. Hosting online can be accomplished using the full, absolute link to the location where your image or document is hosted, such as:
https://cdn-production.checkfront.com/wp-content/uploads/2022/06/About-header2-720x456.png
Google Drive and Dropbox do not support hosting for third-party sites, so they do not work for hosting.
Avoiding image-only email
Avoid sending an email that contains images only. This practice is a BIG Spam flag, and your email will likely end up in the Junk folder.
Avoiding background images
Many email clients don't support this, so your recipient may not see the image.
Using ALT tags
Images with ALT tags improve SEO and display descriptive text if the image can't be displayed.
Please ensure your images are correctly sized to the specified dimensions before including them in your email.
If you don't specify the height and width, some email clients may set the image size, which could alter your email design.
Testing your email
Send tests to the most popular platforms and check out what it looks like for yourself.
Often, emails look fine in Gmail, Yahoo, Hotmail, etc., but they look entirely different in Outlook.
Frequently Asked Questions
-
How do I prevent email notifications from getting caught in junk folders?
You may need to add an SPF record to your domain to authorize Checkfront to send it to you.
Next Steps
In the following article, we look at editing columns within the Notifications list.
< Translating email notifications | Editing columns within the Notifications list >