Graphic Tips and Solutions

HTML Email Resources, Tips and Tricks

HTML Editing Guide

HTML editing for emails is a bit different than editing websites.
With emails, most things are structured within a table and often use in-line CSS rather than CSS style sheets. There are restrictions to what tags can be used and what email clients will accept.

While Higher Logic provides templates for your use, and has an intuitive drag and drop editor with the ability to create custom layouts, sometimes there will be a need or desire to use your own HTML template, for example, provided by a 3^rd party, created in a program like Dreamweaver or designed by your own team in-house.

While we are here to answer generic questions or assist with the set up and sending of an HTML message, we are not authorized to make edits or changes to any third party HTML messages and it is up to the author of the code to make any changes or troubleshoot errors.

General Code Resources:

Higher Logic Resources:

Basic HTML tag elements used in messages:
HTML Tag	Description
<!--…--!>	A comment, anything inside will not display
<div>	Defines a section in the message
<table>	Defines the Start of a Table
<img>	Defines an Image
<a>	Link to external content, create and connect to anchors/bookmarks within the same page
Complete HTML tag list available at w3Schools.com

Responsive Design in Email

As the internet and technology have grown, there is now no “standard” for a screen size. This adds an extra layer of thought needed when designing in code.

An email formatted for desktop will not look good on a tiny mobile phone screen and an email created for the size of a mobile screen will look very strange on a desktop view.
To resolve this, coders have developed a standard set of codes to apply to allow screen and message resizing depending on the device accessing the email.
Using these codes, you can set specific font colors, sizes and restrictions based on the device and even hide or show particular items depending on the viewing device.

Media Query and Mobile Responsive CSS

Media Queries tell the email client a few very important things:

width and height of the message
width and height of the message based on the device being used to view the message
What items in the message to resize and how to resize them

Using media queries is a popular technique for delivering a responsive design to desktops, laptops, tablets, and mobile phones.

This code tells the email client that at a screen size smaller than 650px:

The <table> tags should be full width, but no wider than the typical device screen width.
The <td> tags use classes to determine what is an outer and inner container and how each should appear on a mobile device.
The <img> tags should be up to 100% wide
- if the image is smaller than full width or 650px, the "auto" part of the code tells the email client that the image should not be wider than the container is coded and to keep the image proportionate to the message design.

Basic Media Query Code Sample:
Please note, while this is valid CSS code, this is only a snippet and is not meant to be copied into a message.

@media only screen and (max-width: 475px) {
  .outer-width {
    max-width: 475px !important;
    min-width: 1px !important;
    width: 100% !important;
  }
.outer-width.stack-on-mobile {
    display: block !important;
  }
.imagecaption {
    width: 100% !important;
  }
.inner-width.stack-on-mobile {
    max-width: 620px !important;
    width: 100% !important;
    display: block !important;
  }
td.inner-width {
    padding: 0 !important;
  }
tbody {
    width: 100% !important;
    display: table !important;
  }
img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }

 .preheader {
    padding: 0 !important;
  }
}

Please see W3Schools Media Query Guide for more in-depth information about how to write your own CSS codes, code practice and samples

MA: Professional HTML Email Basics

Our "From HTML" messages are made for pasting in HTML code from an outside source such as third-party code, HTML templates or your own written HTML code.

While we do have an "HTML content item" within a standard message, this is NOT made to support full message HTML.

The "HTML content item" block is:

Made to contain small snippets of code that are basic in nature.
- Example use cases:
  - Using custom color bullet points that are different from your set theme
  - Using alternate styling on your text from the Theme and pre-set items in the "Text" toolbar (line height, character spacing, font sizes larger than 50px)
  - Items using Personalization within URLs
Does not support:
- Style tags
- Script tags
- Meta tags
- Mobile responsive CSS

If you choose to use an HTML content item within a template for your third party HTML, it is against our recommendation and we cannot fix any issues related to display. Our only advise will to be to use the "From HTML" option instead.

Please keep in mind of the following:

From HTML messages do not autosave and a text version is not automatically created.
- There is a "Generate Text Version" button to make this easy. If you make any changes to the content, don't forget to re-generate or add the additional content in!
There is no mobile responsive code built in to the template and your message will not resize automatically unless there is code within your message to do so.
If you have issues in display, please go back to the provider or your code with the errors produced by the HTML editor for further assistance.

General HTML Email Tips

Your email must be contained in a <html> and <body> tag. Only 1 body tag should be used per message.

Build your email using <table> tags

All content sections should be contained within <td> tags and all content must be contained with a div, paragraph, heading or span tag.

Your email MUST have an unsubscribe link or it will not send

If using CSS styling, the <style> tags must be placed within the <head> tag and before your first <table> tag

If using inline CSS, this will override styling done in the CSS <style> tags

HTML Email FAQ

When working with HTML messages, there are some common issues related to coding, graphics and display. To help resolve those issues, please see our Frequently Asked Questions Below:

Why is my HTML message displaying differently on Gmail and Yahoo than it does on Outlook?

This will be due to the code developer using MSO/VML to code your message. This code is specific to Outlook so if a change is made to the design of the HTML, the MSO/VML will no longer match in some cases. The best option is to send the code back to the developer and ask to use less Microsoft specific codes. Higher Logic does not support troubleshooting MSO/VML.

I placed my HTML message in an HTML Content Item and now the message does not display correctly, help!

MA: Professional has a specific editor to use with HTML only messages. Our standard Message Designer 2.0 templates and HTML Content Items are not made to support full CSS code or script codes.

Why do I have extra characters and spaces in my message when it's delivered that aren't there in the message designer?

When information is copied from an external source, there is often pre-formatted text information like the font color, size and decoration (like underlines or bold text) and this can paste into the HTML editor with your text. It is best to copy and paste HTML from a code editor like VS Code, Dreamweaver, etc. or from a plain text editor like Notepad or TextEdit. HTML code should not be saved and sent using a Rich Text editor like Microsoft Word or in the body of an email message.

How to Create a "From HTML" Message

First, go to the Messages > List and click the button to Create a new message.
Click into the dropdown and change the selection from "Mailing Designer" to "From HTML"
The "From HTML" editor has a left and right side. The left side is where you place your code while the right side is there to display a message preview. To place your code, first delete the existing sample code and then paste in the code from your third party. Press "Preview" to render the code. If there are no errors in the message, the code will display as expected.
If there are any issues, there will be a box that appears instead of the email design and it will provide the line in the code where the error is and a summary of what the error is.
Some examples of common errors: There is a opening tag missing Solution - go to the line and determine if the closing tag is needed or if an opening tag needs to be added in. There is a closing tag missing Solution - go to the line and determine if the opening tag is needed or if a closing tag needs to be added in. There is a special character that needs to be "escaped" This can happen if a & is used in a message on occasion. click right before it and click enter on your keyboard and click right after it and hit enter again so the character is on it's own line
After all errors are resolved, press "Preview" and "Save" to save your message.
Next, ensure there is an Unsubscribe link. This can be generated using the "Hyperlink tool" at the top of the code editor. Copy the Markup provided from the textbox and place this in your third party code before the end of the message body.

Add your Template Footer to a Third Party Message

A common request and question that is asked is how to add a footer or banner image from a Message Designer template to a third party HTML message since the HTML content item cannot be used for this application.

This can be a difficult task and the full process depends on:

How the third party code is written
The user's level of experience with code
The complexity of the footer's build in the Message Designer Template

The steps below are a loose guide with general steps to follow and should help point you in the right direction.

First, create a new "dummy" message and select your desired template. This message will be the source of the code we need.

Now, Add a text item to your message and write something like "Content Here" or "Message Body". This will help with finding where the footer code starts and ends.

Optional:

If you would like to add a banner image to your Third Party HTML, you can add it to the message as well.

Now, to obtain the HTML code we need, click the "Save as HTML" button in the top right corner.

This will open the same message in the "From HTML" editor.

From here there are a few options:

Provide this code to your third party so they can add their code to it (Best Option)
Copy the section of the footer (and or banner image) code that you need and then add this to your third party HTML (Second Best Option)
Add the third party's HTML to this message's body

Each option has it's advantages and disadvantages:

Provide Code to Third Party:

Pros:

You no longer are responsible for the addition of the code
Once returned, your message can simply be placed in the "From HTML" editor and it's ready to use
The unsubscribe link is in the message's HTML already so there is no additional edits needed to ensure this is present

Cons:

Not all third parties can do this method
If they make any errors and you are not familiar with HTML structure, it can be difficult to fix.

Copy the Footer Code and add this to the Third Party HTML

Pros:

You can place your code wherever you would like so it is more flexible
In most cases, the footer can be added easily
Most third party providers will have a placeholder area built in for your footer content to be added.
Once you have pulled the footer code once, you can save and reuse this code in the future.

Cons:

If you are not familiar with HTML or Email code structure, it can be difficult to know what to pull from the HTML message and where to place it into the third party HTML
Not all HTML messages are built the same. If your third party uses an unexpected structure, it can be hard to place the code.
Since you are adding something to the third party's code, they may not be available or open to assisting with troubleshooting issues.

Add the Third Party HTML to the Message's Body

Pros:

Does not require the use of any external code editors
You do not need to "hunt" down the code for the footer section since you are not removing anything

Cons:

This method requires the third party's CSS Style code, responsive code and any codes within the head tag to be combined with the existing CSS.
If you do not have HTML experience, this can be VERY difficult and not advised.
The structure of the Third Party message can be difficult to add in to the existing message structure due to things like width and padding.

Option 1: Provide the Code to Your Third Party

Copy and paste the HTML from your "Dummy Message" into a Notepad or TextEdit (Plain text) file.
Save this to your computer
Send this file to your Third Party and advise them to place their code and send it back once completed.
Once received, create a new message and click "From HTML"
Paste your new code into the "From HTML" editor
Click "Preview" to render your code and check for errors
Resolve any issues and then send a test message.

Option 2: Copy the Footer Code and add this to the Third Party HTML

Copy the "Dummy" message HTML and open a code editor that allows you to "tidy" or format HTML code
- A web-based option is liveweave.com
- A free Desktop application option is VS Code
- A premium Desktop application option is Adobe Dreamweaver
Once the code has been formatted, it will be easier to read the sections. Using the HTML "Dummy" message search the code (F3 on keyboard) to find the "Content Here" section we created earlier.
Find the end of the table that contains that section of code and then the end of the table that contains that section of the message
- If your footer has a background color, that will make it easier to find.
Once you find the new table tag that contains the footer, make a note of the line number and then scroll down to find the end of the footer's table code.
- Most code editors will have a line that goes down the outside to show where a tag starts and ends. This makes copying content very easy.
- To help find the end, look for the the "unsubscribe" link
- Footers can vary in how many lines of code there are. The more content your footer contains and the more complex it is will add more code.
Once you have selected all of your footer's HTML, copy this and paste it into a Notepad file for safe keeping.
Now you can delete all the code from your "Dummy" message on the editor you are using and paste in your Third Party's HTML
Find the footer area of this HTML or the end of the message if they did not provide an area to place a footer.
Paste in your Footer HTML
- This may take a couple of tries.
- It is best to use a editor with a preview panel, like liveweave so you can see how this code application impacts the sponsor code.
Once you have ironed out the code, copy it and then create a new "From HTML" message in MA: Professional. Paste in your newly created HTML and click "Preview" to render the message and check for errors.
If there are any errors, resolve them and then send a test message.

Option 3: Add the Third Party HTML to the Message's Body

Copy the "Dummy" message HTML and open a code editor that allows you to "tidy" or format HTML code
- A web-based option is liveweave.com
- A free Desktop application option is VS Code
- A premium Desktop application option is Adobe Dreamweaver
Once the code has been formatted, it will be easier to read the sections. Using the HTML "Dummy" message search the code (F3 on keyboard) to find the "Content Here" section we created earlier.
In this section, we will want to place the body content of the sponsored message. You will want to copy everything inside of the body tags, but not including them, then paste this into the <td> tags replacing the paragraph tag that contains the words "content here"
- In some cases, you will need to keep the styling and settings applied within those body tags. In that case, turn them into a div with the class name "bodycontent"
- If using the above suggestion, remember to update any CSS targeting "body" in the sponsor code to target .bodycontent instead.
Now, we need to add the style code and anything within the head tags to the message.
1. You'll want to copy anything within the style tags and add it to the existing CSS from the original HTML message.
2. If there is code that targets the same things (ex. 2 sections that target p tags) you'll want to add a class to the css for the third party content to prevent it from breaking your original message.
In some cases, the width of this content may break the width of the original message. If this is the case, you will need to make some updates to the code of the third party content to update it OR remove some padding from the original code from your HTML based message. I updated the width from 650px to 610px in the example shown with the red outline. There are also cases, like in the orange section of the example, that there is extra code brought in that adds a background color around the content inside of the template. This can also be removed with small HTML adjustments to remove a bg-color or background-color property from the table or td tags.
- Each HTML message is a case by case basis and may require different adjustments and changes to get things looking as expected.
Once all of your edits have been made to the message in the editor and look good in the preview, recopy the code and then place it in a "from HTML" message in MA: Professional.
Click preview to render the code and check for errors.
After any errors are resolved, save your message and send a test.

Important Notes:

Every HTML message is different in how it is written. HTML is a language and every developer or third party uses it's own structure and choices when writing. This can make editing and troubleshooting each message a bit of a different process each time.
- The more you work with HTML and CSS, the more you will pick up on how everything functions and what to expect when editing.
If the message contains MSO/VML code, this is code that is specific to Outlook based email clients (Outlook Web, Outlook Desktop, Outlook Mobile app, etc.). If there are major changes to the content of your third party message, this code may need editing as well. We do not troubleshoot MSO/VML and will advise you to work with the third party for further assistance.

Images In An HTML Message Are Missing Or Broken When Delivered

There are a few key elements to keep in mind when a customer reports their HTML based message did not test or send correctly. Below is a full guide on what common issues are reported and what to look out for. This guide can also be used as a way to familiarize yourself with HTML messages, accepted assets and more as a whole.

Files:

File types you may see or receive from a third party:

HTML (ex. sponsoredemail.html)
- Full email code files, these must be opened via a text editor or code editor to access the code before copying and pasting into Informz
Image Files
- Acceptable types of image files:
  - JPG - Best
  - PNG - Good, Best for transparent images
  - GIF - used for images with motion, some email clients may only display the first frame
- Sometimes accepted but not advised:
  - SVG - may not appear consistently across email clients, best to use PNG in place of SVG images
    - Some clients use these since they can be coded to use a different background color and are a vector based file. Vector files resize well but are better for websites than for emails.
- Not Accepted:
  - PSD - Adobe Photoshop files
  - TIF - Very large layered files similar to a PSD
  - AI - Adobe Illustrator files
  - PDF - This is a document file type so cannot be used in place of an image
    - Documents can be linked to messages and uploaded to the asset manager but cannot be displayed within message code
CSS Style Sheet
- Must be linked to an email by using the appropriate code
  - Options: @import within the message's CSS or <link> tag pasted within the <head> code of an email message
- If a linked style sheet is not applying or was sent locally to the client, the file must be uploaded to a public source before placing within the email's code
  - Our Asset Manager does not accept CSS files and this must be uploaded externally using another source option.
  - It is best to avoid linking to external CSS when possible and instead, only place CSS code needed within the style tags of the email's HTML

Files can be found in 2 places:

Locally (on your computer)
- Ex. Of a locally sourced image file code:
  <img src="C:\Users\Pictures\Sandbox-OC\Asset-1connect-dark.png">
- You can tell this is a path rather than a URL since there is no .com, .org, or .net and you can see a slash that "links" to the folder where the image is located and the file name.
- When this is in a message, the HTML file will show the image correctly only to the user who has a copy of the folder, not to any other recipients.
Online (via a public URL such as a Drive, website asset manager or sharing platform)
- Example of a correctly uploaded, online sourced image file:
  <img src="https://cscullin.informz.net/cscullin/data/images/3465571_burger_drink_fastfood_food_meal_icon.png?cb=931301">
Sometimes image URLS will be from external websites such as dropbox, box, Sharepoint, or the sponsors website.
- They will be fine in most cases and work as expected.
- In some cases, there are additional permissions or settings on the source's website that prevent the image from sending to external recipients, if this is the case, replace with a Higher Logic Asset Manager sourced URL.
  - You can tell when this occurs because a broken image URL will appear rather than the image itself.
  - This is common with SharePoint, Dropbox and Drive due to how the image is shared and any security settings in place.

Message when image is linked correctly

Message when linked incorrectly

Code:

Delivered Message:

Code Via Path:

Code Via a non-public URL:

Delivered Message:

Having Display issues?

When using the files, they must be uploaded to a public site to be accessible in a sent message.

If they are sent to the client locally, they must be uploaded to Higher Logic's Asset Manager before sending the message
- This happens often by sending a zip file of the HTML and assets and requires the customer to edit the code before placing into a message
- We cannot do this on your behalf but here are the steps below:

How To Get URLs from Images Uploaded to the Asset Manager:

Create a Dummy message
Add Image content item
Choose images or upload needed images for your HTML email
Right click on each image and "Open in New Tab"
Open a Notepad file
Copy the URL for each image and paste into the Notepad file to refer back to
Replace the src="URL OR IMAGE PATH" for each image in the HTML message with the copied new image URL

Graphic Tips and Solutions

Contents:

HTML Email Resources, Tips and Tricks

HTML Editing Guide

General Code Resources:

Higher Logic Resources:

Basic HTML tag elements used in messages:

Responsive Design in Email

As the internet and technology have grown, there is now no “standard” for a screen size. This adds an extra layer of thought needed when designing in code.

Media Query and Mobile Responsive CSS

MA: Professional HTML Email Basics

General HTML Email Tips

HTML Email FAQ

Why is my HTML message displaying differently on Gmail and Yahoo than it does on Outlook?

I placed my HTML message in an HTML Content Item and now the message does not display correctly, help!

Why do I have extra characters and spaces in my message when it's delivered that aren't there in the message designer?

How to Create a "From HTML" Message

Add your Template Footer to a Third Party Message

From here there are a few options:

Each option has it's advantages and disadvantages:

Provide Code to Third Party:

Copy the Footer Code and add this to the Third Party HTML

Add the Third Party HTML to the Message's Body

Option 1: Provide the Code to Your Third Party

Option 2: Copy the Footer Code and add this to the Third Party HTML

Option 3: Add the Third Party HTML to the Message's Body

Important Notes:

Images In An HTML Message Are Missing Or Broken When Delivered

Files:

File types you may see or receive from a third party:

Files can be found in 2 places:

Message when image is linked correctly

Message when linked incorrectly

Having Display issues?

Contact Us

Resources

Privacy & Terms