Tips and Tricks
- HTML Coding Tips for Email
- Prioritized Sending: Ensure contacts Do Not Get Bombarded by Emails
- Using Symbols in Subject Lines
- Personalize your Emails the Right Way
- Copying Text Formating in the Template Editor
- Targeting your New Subscribers
- Dynamic editing of Envelope section
- Exporting CSV files from Microsoft Access 2007/2010
- Create a Meeting File for your Messages
- Landing Pages and iFrames
- Styling your Web Forms or Unsubscribe Page
- What are Content Rules and how to use them?
- What are content blocks?
HTML Coding Tips for Email
Coding HTML for email might sound easy, but there are a lot of industry best practices that you might want to know before you begin.
General
- Do not use <div> tags
- Do not use <p> tags
- Do not use padding anywhere
- All content must be tabled
- Do not use javascripting
- Do not rely on any content in the <header>
- Do not use external style sheets, or styling in the header
- Use spacer images to define blank space, or where possible slice the white space into the images
- Do not use border attribute – if you need a 1px border is must be created by nesting a centered table inside another table that is 2px wider, that has a background of the border you want. The top and bottom parts of the border must be created using images.
- Avoid rowspan, and use colspans sparingly.
Text
- All text must be wrapped in a <span> that defines the color, font-family, font-size and font-weight (if bold)
- Do not rely on font styling put into the header, table or td
- Text alignment must be defined in the td
- Text should be either arial or verdana
- Avoid use of lists (either <ul> or <ol>). Instead use bullets, either text or images. Ideally table the bullet and text in separate <td>s
- Text size should not be less than 11px
Images
- Define height and width of all images
- Image "display" should always be defined (block or inline)
- Images with text should ALWAYS have alt tags
- Do not rely on aligned images. Always place the content in a table and align left or right
- White space should be sliced into the images (rather than relying on spacer images)
- No image (including spacer images) should have a height or width of less than 5px
- Do not use image maps
Links
- All links but mailtos should be targeted to a blank or new page
- Link color and text-decoration (if not underlined) should be defined in the <a> tag, and again in a <span> tag inside the <a> that wraps the linked text
Prioritized Sending: Ensure contacts Do Not Get Bombarded by Emails
There are plenty of times where marketers wish to send out several different deployments around the same time as each other. The biggest issue that arrives with this tactic is that the deployment lists/segments being used in the deployments, often have overlap between each other. Therefore, those recipients receive multiple deployments within a very short period of time. This creates a negative experience with your contacts and they are more likely to unsubscribe. Below is a way for you to help ensure that your contacts aren't being bombarded by emails.
1. Determine your Sending Priority
- Before deploying, you want to choose the message you want recipients to receive above all others. This might mean planning out your deployments as far ahead as two weeks.
- For example, if you are sending out three offers (25%, 15% and 10% off) and you want to ensure that a specific group of contacts receives the 25% off discount, you would place that message at the highest priority.
- This prioritized list determines the order in which you will send out your deployments.
2. Setting up your Segments or Lists
- This part is easy. All you need to do is ensure that you have a list/segment for each deployment.
- This means, if you are sending to an entire subscription for one of the deployments, you want to have a segment that has the criteria "Subscription equals X".
- You will use these lists/segments to not only deploy, but ensure that contacts only receive one message.
3. Setting up your Deployments
- This step is where you put your prioritized list of deployments to use. You will begin at the top of your list. The first deployment you will set-up like any other. Choose your message, your list/segment and deploy. The important step lies in the subsequent deployments.
- For the next deployment, you will select your message and select the list/segment for that deployment. The difference in this deployment is that, you will select the list/segment you chose for the first deployment, as a "Suppression" for this deployment. This means that anyone sent to in the first deployment, will be removed from this deployment.
- Once you have sent the second deployment, if you have another deployment, you will suppress the first AND second deployment's list/segment from the third deployment. Continue this process for all subsequent deployments.
- EXAMPLE: Emma first set's up a deployment sending out a message containing a 25% off discount to her newsletter subscribers (10,000 contacts) for being loyal to her email program. Then she decides she wants to send out a 15% off discount to her Promotional email subscribers (2500 contacts). She sets up the deployment by choosing her message and then select her "Promotional Subscribers" segment. Then as part of the set-up, she chooses the "Newsletter Subscribers" segment as a "Suppression". This removes 1000 contacts whom are both in her Newsletter and Promotional subscriptions. Therefore, she has a final deployment list of 1500 potential recipients. Finally, she wants to send a 10% off discount to her eFlyer subscribers (1000), so she sets up her deployment by choosing her message and selects her "eFlyer subscribers" segment. Then she selects the "Newsletter Subscribers" and "Promotional Subscribers" segments as suppressions. This removes 250 contacts whom are either in both the eFlyer and Newsletter subscriptions or in both the eFlyer and Promotional subscriptions. This gives her a final deployment list of 750 potential recipients.
Using Symbols in Subject Lines
Recently, you might have seen some interesting symbols appearing in your inbox. Unicode Symbols have started to make an appearance in subject lines and Digital marketers are using them to their benefit to get noticed in a sea of text based subject lines. We tested the symbols below in different email clients on both PC and Mobile.
If you would like to use any of the symbols below, you can copy and paste them into your subject line inside CONNECT.
If you are looking for other symbols, click here for a great search engine that will find symbols based on words.
| Symbol | Description | Unicode | Outlook (2003+)  |
Thunderbird  |
iMail 4  |
Webmail *  |
iPhone (iOS 5)  |
Android 2.2  |
Android 4.0  |
Blackberry (OS 7.1)  |
| â™ | Spade | U+2660 |  |
|
|
|
|
|
|
|
| ♣ | Clover | U+2663 | |
|
|
|
|
|
|
|
| ♦ | Diamond | U+2666 | |
|
|
|
|
|
|
|
| ♥ | Heart | U+2665 | |
|
|
|
|
|
|
|
| ? | Male Symbol | U+2642 | |
|
|
|
|
|
|
|
| ? | Female Symbol | U+2640 | |
|
|
|
|
|
|
|
| ¤ | Sun | U+263C | |
|
|
|
|
 |
|
|
| ? | Black Smiley | U+263B | |
|
|
|
|
|
|
|
| ? | White Smiley | U+263A | |
|
|
|
|
|
|
|
| â—Š | Lozenge | U+25CA | |
|
|
|
|
|
|
|
| ? | Left Arrow | U+25C4 | |
|
|
|
|
|
|
|
| ? | Down Arrow | U+25BC | |
|
|
|
|
|
|
|
| ? | Right Arrow | U+25BA | |
|
|
|
|
|
|
|
| ? | Up Arrow | U+25B2 | |
|
|
|
|
|
|
|
| ? | Single Music Note | U+266A | |
|
|
|
|
|
|
|
| ? | Double Music Note | U+266B | |
|
|
|
|
|
|
|
| ? | Sharp | U+266F | |
|
|
|
|
|
|
|
| ? | Clear Bullet | U+25CB | |
|
|
|
|
|
|
|
| ? | Black Bullet | U+25CF | |
|
|
|
|
|
|
|
| ® | Registered Symbol | U+00AE | |
|
|
|
|
|
|
|
| â„¢ | Trademark Symbol | U+2122 | |
|
|
|
|
|
|
|
| © | Copyright Symbol | U+00A9 | |
|
|
|
|
|
|
|
Personalize your Emails the Right Way
Personalization is a great way to engage your subscribers.
Do it right and your subscribers will feel that you know and care about them. We can help you do it the right way.
1. Create a New Segment with the definition "First Name is empty" and Save
- This segment will target all contacts in your database that do not have a value entered in for the "First Name" field.
- This step will also help determine if it will be worth creating a secondary "Non-Personalized" version of your email.
- If the count for this segment is very low or 0 then you might not want to proceed with this tutorial.
Create a Personalized Email using Dynamic Variables
- In this example, we have used our own variable for "First Name".
- The variable you use must match the field name currently in your datamart.
- You can view your field names by navigating to the "Target" tab and then clicking on "DataMart fields",
Create a Duplicate of your Message by clicking "Save as..."
Edit the New Version to be "Non-Personalized" and Save
For the first deployment, select the "Non-Personalized" message and the segment that was built in the first step
For the second deployment, select the "Personalized" message and as an additional step, add the segment as a suppression
- By adding the segment as a suppression, you will remove anyone who doesn't have a value for the "First Name" field, from the deployment.
Copying Text Formating in the Template Editor
When using the template editor, you might come across situations where you want to use the same text formatting (color, size, font, etc.) in another part of your email.
This quick tutorial will show you the best way to copy text formatting from other parts of your email template.
1. In the editor, highlight and copy a middle block of text at least 2 characters long (without spaces)
2. Paste that into the location you would like to use it
3. Place the cursor in the middle of the block you have created
4. Type in the text you wish to use
5. Delete the text you copied, from each end
- Alert: Make sure you do not press the delete key more then is necessary to delete the excess text.
- Over deleting could cause you to lose the formatting.
Targeting your New Subscribers
When building your email program, you might find the need to target "New Subscribers" for use in your Welcome Program.
Using the CONNECT segmentation tool, you have the ability to segment on your subscriptions which allows you capture your new subscribers for use in a Welcome program.
The following tutorial will help you accomplish that.
1. Create a New Segment
2. Drag and release the Subscription you would like to Collect New Subscribers For
- Note: Ensure that the operator is set to "equals".
3. Name your Segment and click the "Save and Export to .CSV" button
- CONNECT should trigger a download in your browser.
- Save the file to your computer and descriptively name it (ie. Current Subscribers_01012013.csv).
- The file will contain all current subscribers for the subscription you selected earlier.
4. Upload the File you Downloaded
- If you are unsure how to upload a file, click here.
5. Navigate back to the Segment you Created Earlier
6. Drag and Release the "List Upload" Source over the Existing Criteria.
- This will create an AND statement
7. Select the list you recently uploaded from the drop down
8. Change the Operator from "equals" to "does not equal".
9. Click Save when finished. This should result in a segment count of 0.
Dynamic editing of Envelope section
- CONNECT allows users to enter dynamic or static from and reply-to addresses in the envelope section.
- Go to Compose > Envelope.
- Here, you will see the following screen:
- Let’s start off with From address and From name.
- Select
next to the Form address text area. - This will display a pop-up like the one shown below.
- Now, select the
symbol next to the From address text area to insert a dynamic variable. - ASIDE:
means that options with
must be filled in with appropriate values. - The selection of the
displays another pop up: Insert a dynamic variable. (shown below)
- Here select the appropriate field and personalize it by selecting a format of your choice.
- A default value is required so enter one. For example, if the user selected the format option “First letter capitalized�. Then the default value has to have the first letter in Uppercase.
- Once all the options have been selected. Click insert to insert the dynamic variable.
- NOTE: Since, an email address is always followed by a domain name (for example - @gmail.com). In our case we must have a working domain name (setup by yourself or tech support team) entered at the end of our dynamic variable code.
- Also, for From address please take special care that there are no records in the field that does not follow the correct syntax of an email address mailbox name.
- Once the values have been inserted, finish the setup and follow the same steps for reply-to address or you could make a static one.
- In case of From name, follow the same steps as the one mentioned above.
Exporting CSV files from Microsoft Access 2007/2010
If you have an external database located in Microsoft Access 2007/2010, there is a special set of instructions you must follow in order to create a list (CSV File) that will upload properly into CONNECT.
1. With your Database open in Access, right click on the Table name on the left and select "Export - - Text File".
2. Click "Browse" to select which folder you would like to save to and change the ".txt" in the file name to ".csv". Click OK when finished.
3. Make sure "Delimited" is selected and click the "Advanced" button at the bottom left.
4. Select "Unicode (UTF-8)" from the "Code Page" drop down and click OK when finished. Click "Next" to move forward.
5. Make sure "Comma" is selected as the delimiter. Check "Include Field Names on First Row" and then click "Next" to move forward.
6. Click "Finish" to export your file.
7. OPTIONAL: Check "Save export steps" to save the steps you followed in this tutorial so you can quickly repeat this type of export without the wizard.
8. OPTIONAL: To re-use your saved steps, navigate to the "External Data" tab and click "Saved Exports". Select the saved steps and click "Run".
Create a Meeting File for your Messages
When creating an Event notification to send out to your subscriber list, a create addition is to have a Meeting Invite file that users can use to automatically place the date in their digital calendars, whether it be on their smartphone or their computer. This quick tutorial shows you how to create one of these files.
One requirement for this is that you will have to have a way to host the file and create a URL to link to within the tool.
1. Navigate to www.pratie.tomodea.dev/lab/icalendar/default.asp and fill in the details of your event
- This tool is a 3rd party tool that we have found for you to use. CONNECT has no association with this tool.
2. Right click on the "Add Event To Your Calendar" link and click "Save Target As" (IE) or "Save Link As" (Firefox/Chrome)
3. Once the file you saved has been hosted and you have a URL, Navigate to CONNECT and the Event message you are creating
4. Highlight the Text/Image you wish to link and click the "Insert Link" button
5. Paste in the URL for the Calendar File and Change Target to "New Window"
Landing Pages and iFrames
Landing Pages within CONNECT provides users with the opportunity to create hosted HTML pages that can be used in a variety of situations.
One use is iFrames within a website. This gives the user the ability to use the hosted content within CONNECT on their website.
One use that is very common is to use iFrames to load in a CONNECT Web Form onto a user's site so that they get to keep the look and feel of the website around the Web Form.
This tutorial goes over a few points in using iFrames with CONNECT Landing pages.
What are iFrames?
- iFrames are "containers" that you can place in a webpage that allow you to load a URL (web page or any other hosted item) and display them in the container.
- The example to the left shows inboxmarketer.com loaded in an iFrame within the CONNECT Support site. This container can also be given other properties. including width and height.
- If you are unfamiliar with HTML coding, please have your IT department or CONNECT support help you with setting up your iFrame.
Web Forms
- CONNECT gives each user the ability to create web forms within the tool to collect information from their customers and have it directly feed into their DataMart.
- However, web forms must be placed within a landing page, in order for them to appear in a live environment.
- This is where iFrames become very handy.
- If you would like to load a CONNECT web form within your website, you can place and style the webform within a landing page within CONNECT and then load it in an iframe in your website (see " How to create a Web Form" ).
- The example here is an unstyled webform placed in the CONNECT Support site.
Style Sheets
- If you are creating a web form or any other type of landing page within your website, you will most likely want it to match the website it's being placed within.
- In order for this to work, you must place an "embedded style sheet" in the <head> tag, inside the landing page you wish to load.
- Again, this requires a more advanced knowledge of HTML Coding and you might need to consult your IT department or CONNECT Support for help.
Styling your Web Forms or Unsubscribe Page
If you would like to be able to style your web forms or Unsubscribe page buttons and give it the look and feel of your branding and landing page design, you can use the CSS classes below in an embedded stylesheet within your CONNECT hosted landing page to alter the design.
The Web Form code
.UmpireWebForm - The entire web form generated by CONNECT within the landing page is housed within a <form> tag which can be used to reference other tags in the form that might not have a class, such as the <table> tag..UmpireWebFormFieldLabel - Use this class to alter the labels adjacent to each form field..UmpireWebFormRequiredLabel - Use this class to alter the "Required" label adjacent to any form field that is required..UmpireWebFormField - Use this class to alter the form fields themselves..UmpireSubmitButton - Use this class to alter the Button used to submit the form entry. You can also use .UmpireSubmitButton:hover as a seperate entry to alter the button's look when a user is hovering over it..UmpireWebFormSubscriptionCheckBox - Use this class to alter the checkbox located next to additional opt-in types.
-
kBox - Use this class to alter the checkbox located next to additional opt-in types.
- Note: These classes remain the same regardless of the name you give the landing page or web form.
Sample CSS
- Please copy and paste the code below into the <head> tag of your CONNECT landing page and see the difference a little CSS can make.
HTML<style> .UmpireWebForm table{ font-size:14px; } .UmpireWebFormFieldLabel { margin-right:15px; font-size:14px; } .UmpireWebFormRequiredLabel { display:inline-block; font-size:9px; color:red; vertical-align: top; } .UmpireWebFormField { width:192px; border:1px solid #ddd; background:#fff; padding:3px; } .UmpireSubmitButton { font-size: 14px; color: #ffffff; font-weight:bold; background-color: #000000; padding: 10px; border: 0; margin-right:25px; margin-top:20px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .UmpireWebFormSubscriptionCheckBox { margin-bottom:25px; margin-top:20px; margin-right:15px; } .UmpireSubmitButton:hover { text-decoration:none; background-color:#be100f; } </style>
The Unsubscribe Form Code
When building an unsubscribe landing page, you use a tag to place a button within the page that when clicked, will unsubscribe the user. In HTML code, form code is generated, very similar to how web forms are generated. To style the button that is created, you will want to select the following class in your CSS:
.unsubscribe - The entire web form generated by CONNECT within the landing page is housed within a <form> tag which can be used to reference other tags in the form that might not have a class, such as the <table> tag.
HTML<form action='{URL}' method='post'> <input class='unsubscribe' type='submit' value='Unsubscribe'> <input type='hidden' id='trackingCode' name='trackingCode' value='{CODE]'> <input type='hidden' id='unsubscribe' name='unsubscribe' value='true'> <input type='hidden' id='ConfirmationMsg' name='ConfirmationMsg' value='{CODE]'> </form>
Sample CSS
- Please copy and paste the code below into the <head> tag of your CONNECT landing page and see the difference a little CSS can make.
HTML<style> .unsubscribe { font-size: 14px; color: #ffffff; font-weight:bold; background-color: #000000; padding: 10px; border: 0; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .unsubscribe:hover { background-color:#be100f; text-decoration:none; } </style>
What are Content Rules and how to use them?
Content rules allow users to add dynamic content to email messages by mapping it relative to the recipient information from the Datamart.
What is the difference between Content Rule and Content block?
- The immediate difference is the way these two types of variables are displayed on the HTML document.
- ##Variable## (content rule variable)
- ###Variable### (content block variable)
- A Content Rule applies to the whole email and allows for 1 conditional rule to affect multiple variables in the message. A Content Block is a single condition and a single variable affecting a single block or object in the message.
*I will explain the entire process by creation of a new email message with content rules applied
- Go to Compose > Email Message > Create new message > Standard > Details.
- In Details tab, click yes for Content Rules label. (This will turn on adding content rules properties to email).
- Add all other information needed for email message and click
. - Since, this document primarily focuses on content rules, we will jump straight to the HTML tab.
- Here, the user could add their own HTML code with a small addition (Very important):
- Since, content rules map code snippets to dynamic variable, we will create a dynamic variable. For example: ##offer_header##
- Look at the example below for usage:
Here, three highlighted dynamic variables will be used to add specific code snippets according to recipient information stored under corresponding fields.
- Save the HTML code and generate a Text version.
- Click on Content Rules tab.
- At the bottom of page, following buttons are displayed:
Users can build rules manually or select a value quotes .csv file with content rules for corresponding dynamic variables
- We will go over building rules manually first.
- Select Build rules manually button.
- Important: the email message must have dynamic variables which could be used for content rules. Otherwise, a warning message will be displayed. User will not be allowed to access this property.
After selection of Build rules manually, the window is displayed (shown above).
- Edit criteria as text: This provides users the freedom to write the rules from scratch for content rules. On the other hand edit as builder provides an interface for users to simply select the values and hides all the coding technicality. Example:
Think of criteria as an IF/ELSE statement which results in application of underlying expression.- Define criteria: Clicking on this option will allow us to create a new criteria for defining content rules for data.
- Default rules: When none of the criteria matches with the record in the Datamart then this final rule will be applied.
Edit criteria as Builder:
Edit criteria as text:
- Variable Name: This provides a list of all the dynamic variables we created in our HTML document. The Content section provides us with a text area to add code snippet/ text/ images etc. based on the users preference which will be displayed in the final email message according to the criteria selected.
- Copy Criteria from Rule: CONNECT makes it easier for using previously defined criteria as a template to create new ones.
- Cancel: If the user is not satisfied with the criteria defined, by simply clicking this option it will discard that specific content rule.
- Done: Clicking this option will create the content rule.
After content rules are defined, the User will be brought back to this screen:
CONNECT allows users to remove all the rules by simply clicking on the Clear rules button. Also, the rules could be exported as a value quoted .csv file for future use.
"Criteria","header1","body1","image1"
"(field[Division] equals "Food Services")","15% Off All Gloves","We have a wide selection of gloves for the food services industry. FDA approved. wrist and elbow length.","<a href="https://www.uline.ca/Grp_367/Vinyl-Poly-Gloves?keywords=Poly+Food+Service+Gloves" target="_blank" title="Glove Sale"><img src="https://portal.umpiredigital.com/Message/Image/Load/9" width="188" height="36" alt="gloves" style="display:block" border="0"></a>"
"(field[Division] equals "Cleaning Services")","15% Off All Mops","Check out our new line of microfiber mops! Wet mops, dry mops, dust mops. We have everything in stock","<a href="https://www.uline.ca/Grp_123/Mops-Squeegees-Carts?keywords=mop"><img src="https://portal.umpiredigital.com/Message/Image/Load/10" width="188" height="36" alt="sale" style="display:block" border="0"></a>"
"_Default","15% Off Sale!","For the largest selection of cleaning supplies at unbeatable pricing check our monthly flyer for the best deals.","<a href="https://www.uline.ca/Promotion/Specials"><img src="https://portal.umpiredigital.com/Message/Image/Load/11" width="188" height="36" alt="sale" style="display:block" border="0"></a>"Once the content rules are defined, we can test them in the preview section. A complete example from step 1 is shown below:
Add dynamic variables to HTML code map add content rules:
After defining the content rules:
In the preview tab.
When no input is provided in email:
When Division is equal to “Food Services�:
When Division equals “Cleaning Services�:
When none of the criteria match we use the rules defined in default section:
What are content blocks?
Content blocks allow users to insert dynamic content in their email by creating a dynamic variable that displays information relative to the information retrieved for a specific record type in Datamart. These variables are user created and defined.
What is the difference between a Content Rule and Content block?
- The immediate difference is the way these two types of variables are displayed on the HTML document.
- ##Variable## (content rule variable)
- ###Variable### (content block variable)
- A Content Rule applies to the whole email and allows for 1 conditional rule to affect multiple variables in the message. A Content Block is a single condition and a single variable affecting a single block or object in the message.
How to use Content Blocks?
- Go to Compose > Email Message > Create new message > Standard > HTML.
- Since, this article primarily focuses on Content Blocks, we will deal with HTML, Preview and Test tab.
- In the HTML tab, select Insert Dynamic Content button.
- A window will display like one shown below:
This helps users in customizing how the content will be displayed by the content block variable.
1. Name: Provide a name to dynamic variable. This will be inserted into the HTML section (Image shown below - highlighted by yellow border).
2. CONNECT allows users to program the entire logic by switching to HTML mode from Design mode. (Example shown below)
Design mode:
HTML mode:
3. Copy: New content blocks can be created from previously created ones simply by selecting the drop down list next to the Copy option.
- Important: When copying previous variable logic, current logic will be discarded. Also, name the content block different than the parent block.
Insert: Click this button to insert the dynamic variable in the email message.
Cancel: Click this button to discard current dynamic variable creation.
Now, we have to add the logic for the insertion of content. This is done using if/else statements.
- If a record has the field Division equivalent to “Food Services� then “Gloves on Sale!� will be displayed in the email.
Result in preview tab
- Else if Division is equal to “Cleaning� then “New Microfiber Mops� will be displayed.
Result in preview tab:
- Finally, an else statement which means if none of the above statement applies, then the following text is displayed: “15% Off Select Items�.
Result in preview tab:
- Also, the else if, or else statement, could be removed by clicking
Dynamic content block variables also support image, text and blocks of code.
To insert an image:
To insert a block:
User could further edit the Block by selecting Edit button. The following window will be displayed:
- User has the option to test their block using Preview or by creating a test deployment.