We all want our emails to look great, however, there are some challenges when sending HTML emails because email clients do not support HTML in the same way and never don't support the full range of HTML styles. So while you have full access to HTML formatting in SchoolAdmin, not all email clients will render it the same.
Research by leading marketing companies, like Hubspot, have also found that highly formatted emails with lots of HTML, color, and images reduce engagement by 25% on average and click through rates of 51%. For more information, visit this blog post by Hubspot.
HTML Email rendering issues in Microsoft Outlook
Templates are designed to look great across all email clients. However, versions of Outlook from Outlook 2007 to present use Microsoft Word to render HTML email, which can cause problems with email display.
Microsoft Word is meant for documents and its attempts to render HTML rarely match web design standards.
Some common issues with rendering in Microsoft Outlook:
Image isn't the right size.
Outlook doesn't recognize the HTML that constrains images. This means that if you use HTML to resize an image uploaded to a campaign or template, it may display at the original size in Outlook. Be sure to resize your images before you upload them.
Image alignment is being ignored
Outlook doesn't recognize image alignment. You can work around this by adding a table and then inserting the image in the cell that is aligned to the left or right.
Image padding is off
Outlook will ignore set padding and margins around images. As a result, your wrapped text will be pushed against the image. To fix this, you may have to add padding within the image itself.
Excess white space
Because Outlook renders HTML using Microsoft Word, white space is sometimes inserted above an image. This occurs because Outlook renders email on a computer screen similarly to how print preview shows how the email will look on a printed page. If the image falls between what Outlook sees as two separate pages for that particular section, extra space is inserted above the image to force the image down to the next page. While email is a single, continuously scrolling page, Outlook renders portions of the email as though they are meant to be printed onto separate sheets of paper.
Eliminating the extra white space requires reorganizing your content.
When reorganizing your content, you ultimately want to determine where Outlook is marking the page break in your content. If there is an image below the white space, try to move the image to another area in your layout and send a test email to see if this fixed the issue. Continue reorganizing and testing your campaign until the white space is eliminated.
Email content v. Web HTML
Safe to use
Widely supported by most email clients
• static, table-based layouts
• HTML tables and nested tables
• template width of 600px
• simple, inline CSS
• web-safe fonts
Use with caution
Limited support from most email clients
• background images
• custom web fonts
• wide layouts
• image maps
• embedded CSS
Do not use
Not supported by most email clients
• embedded audio
• embedded video
• <div> layering
Use with Caution
SchoolAdmins Email Editor allows you to use standard fonts and a select number of custom web fonts. If an email client doesn’t support a web font used in your campaign, the email client will fallback to its default font.
Your subscribers often open campaigns on mobile devices or in the preview pane of desktop email clients. Email viewing panes are narrow, so they’ll cut off your message if it’s wider than 600-800px. SchoolAdmin automatically limits all emails to 600px wide.
Do Not Use
The elements below are blocked by nearly all major email clients. Support is either extremely limited, or nonexistent.
An <iframe> (inline frame) is an HTML element that embeds content from one website into another. Inline frames are often used to insert advertisements, video, audio, or forms in other websites. Iframes often contain scripts, so most email clients block them.
Instead, link to the content you want to display in your campaign.
Flash displays animations and graphics on websites, but email clients will block it. Adobe has announced the end-of-life of Flash support so all Flash content on your websites should be migrated to open standards such as HTML5.
Instead, try gifs to make your content more engaging.
Autoplay and click-to-play media won’t play in an inbox unless your subscriber’s email client supports HTML5 <video> and <audio> tags. Only one major email client, Apple Mail, supports these tags, so it’s best to avoid embedded media and consider an alternative.
Instead, insert a text link to your video or audio.