HTML Emails: Adding & Styling Text

In Part 4 of our video series on creating HTML emails we show you how to add text to the email using tables and also style the text using inline CSS.

We’ve included the code here so that you can copy it and use it to make your own HTML emails:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
</head>
 
<body>
    <table width="100%" style="max-width: 600px;">
        <tr>
            <td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Hi Anne,</td>
        </tr>
        <tr>
            <td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae feugiat ex. Donec eleifend viverra justo. Nam velit arcu, imperdiet sed ante sed, bibendum finibus erat. Maecenas ut elementum odio.</td>
        </tr>
        <tr>
            <td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris est lectus, fermentum nec turpis at, dictum eleifend dolor.</td>
        </tr>
        <tr>
            <td style="font-family: 'Trebuchet MS', sans-serif; font-size: 20px; color: #f26012; padding-top: 10px; float: left; width: 45%;">Heading 1</td>
            <td style="font-family: 'Trebuchet MS', sans-serif; font-size: 20px; color: #f26012; padding-top: 10px; float: right; width: 45%;">Heading 2</td>
        </tr>
        <tr>
            <td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px; float: left; width: 45%;">Pellentesque dui magna, maximus ut diam eu, aliquam vehicula sapien. Suspendisse sed auctor libero. Integer id velit consectetur.</td>
            <td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px; float: right; width: 45%;">Sed in euismod odio. Mauris pulvinar sem erat, vitae suscipit nisl tincidunt a. Vivamus sed tempus metus, at dignissim ligula.</td>
        </tr>
        <tr>
            <td width="100%" style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 10px;">Best regards,</td>
        </tr>
        <tr>
            <td width="100%" style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px;">John Doe</td>
        </tr>
    </table>
</body>
 
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>

<body>
	<table width="100%" style="max-width: 600px;">
		<tr>
			<td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Hi Anne,</td>
		</tr>
		<tr>
			<td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae feugiat ex. Donec eleifend viverra justo. Nam velit arcu, imperdiet sed ante sed, bibendum finibus erat. Maecenas ut elementum odio.</td>
		</tr>
		<tr>
			<td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris est lectus, fermentum nec turpis at, dictum eleifend dolor.</td>
		</tr>
		<tr>
			<td style="font-family: 'Trebuchet MS', sans-serif; font-size: 20px; color: #f26012; padding-top: 10px; float: left; width: 45%;">Heading 1</td>
			<td style="font-family: 'Trebuchet MS', sans-serif; font-size: 20px; color: #f26012; padding-top: 10px; float: right; width: 45%;">Heading 2</td>
		</tr>
		<tr>
			<td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px; float: left; width: 45%;">Pellentesque dui magna, maximus ut diam eu, aliquam vehicula sapien. Suspendisse sed auctor libero. Integer id velit consectetur.</td>
			<td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px; float: right; width: 45%;">Sed in euismod odio. Mauris pulvinar sem erat, vitae suscipit nisl tincidunt a. Vivamus sed tempus metus, at dignissim ligula.</td>
		</tr>
		<tr>
			<td width="100%" style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 10px;">Best regards,</td>
		</tr>
		<tr>
			<td width="100%" style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px;">John Doe</td>
		</tr>
	</table>
</body>

</html>

Tables

All the content of the email is contained within a table with each paragraph of text being placed in its own table row:

1
<tr></tr>
<tr></tr>

Where text is in two columns the table row contains two table data cells:

1
<td></td>
<td></td>

Each cell contains the column’s text. The columns are given a width of 45% and floated left and right – note that a width of 50% wouldn’t give any spacing between the columns and therefore a smaller width is used.

Styling

Inline CSS is used throughout – CSS stylesheets are never used for HTML emails.

The table width is set to 100% and the max-width is also set to 600 pixels. This allows the email to be responsive – on large screens the email will be 600 pixels wide while on small screens such as smart phones the email will adjust to fill the width of the screen.

The text is styled to make it look good – the font-family, font-size, text colour and padding are all set using inline styles. These styles are applied to all table data cells.

For a full explanation please see this short video:

HTML Emails: Doctype, Metadata & Structure

We are in the process of making a short video series: ‘How To Create HTML Emails’. Part 3 of the series takes you through the HTML which can be used as a starting point when writing the code. We’ve included the code here so that you can copy and paste it if you want to get started making an HTML email quickly:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
</head>
 
<body>
<!-- EMAIL CONTENT GOES HERE -->
</body>
 
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>

<body>
<!-- EMAIL CONTENT GOES HERE -->
</body>

</html>

Coding an HTML email is actually quite straightforward, despite the reputation that it has being difficult. There are a few things that are different from creating an HTML webpage though…

Doctype

If you are writing HTML for a webpage in 2015 it’s likely that you’ll use HTML5. For HTML emails this is not the case – you’re coding for a large variety of email clients, many of which are outdated. It has been found that HTML 1.0 Transitional is the most reliable doctype to use.

Note that different email clients treat the doctype in different ways. Some strip out the doctype completely (including the Gmail Android App and Outlook 2010). Others respect the doctype that you set (iPad and iPhone Gmail Apps, Outlook Express and Thunderbird 6). Others strip out the doctype and replace it with XHTML 1.0 Strict (Gmail and Hotmail). This has a implications for testing which will be discussed at the end of the series – for now it is enough to know that XHTML 1.0 Transitional is the most reliable doctype.

Note that when we are working with XHTML we need to include an xmlns attribute in the opening html tag. We have also specified the language type here as it can be useful for screen readers and the sight-impaired.

Meta Data

We have included meta ‘Content Type’ so that we can set the character set as UTF8 – specifying as much as possible can be a good thing when writing code for the whole range of email clients.

Meta ‘Viewport’ as seen above sets the viewable area to the width of the device screen – this is essential if you want your email to be responsive. If your email is intended solely for desktop users then don’t include this line of code.

The final bit of meta data to set is the title tag - this is worth including because it is used by Outlook when people use the ‘View in Browser’ function and it can also appear in email preview snippets in some versions of Hotmail.

So that is all you need to know to get started making an HTML email – we’ll bet that it’s not as tricky as you thought. For full details see the 3 minute video:

 

 

 

 

Make Sure Real Emails Don’t Get Sent To Spam – Gmail 2015

All modern email clients come with a spam filter, including Gmail. This is generally a good thing because it prevents your inbox filling up with spam emails – instead spam emails get sent straight to your spam folder and don’t ever make it to your inbox.

Even though spam management in Gmail is very sophisticated it is still not foolproof – some spam still gets through to your inbox and sometimes real emails get sent to your spam folder by accident. If you receive a spam email in your inbox it’s not the end of the world – it’s pretty simple to delete it, or mark it as spam and move on. However, if you miss an important email that accidentally gets sent to your spam folder it can be a real nightmare.

filter

Whitelist The Email Address

Here we’ll show you how override Gmail’s spam filter for specific email addresses so that you will be sure emails from that address don’t accidentally get sent to spam… or if you’re reading this because you’ve missed an important email recently we’ll show you how to make sure it doesn’t happen again: you simply tell Gmail to whitelist an email address…

How To Whitelist An Email Address In Gmail

First login and select ‘Settings’:gmail1

Next navigate to ‘Filters’ and select ‘Create a new filter’:gmail2

Type the email address that you want to whitelist in the from field and select ‘Create filter with this search’:gmail3

Check the ‘Never send it to Spam’ checkbox and select ‘Create Filter’:gmail4

You’ll be taken back to settings where you can view the filter that you have set up – you can easily edit or delete the filter or add another:gmail5In the next few blog posts we’ll show you how to whitelist email addresses in other popular email clients such as Yahoo and Outlook.

New Feature – Take a Break

Some of our customers have requested a feature where members can take a break from receiving list emails rather than completely unsubscribe. We could see that this feature would be useful in a lot of situations…

For example, it’s fairly common for clubs or societies have an email list for their members – but membership of clubs and societies is rarely static – members come and go it’s not uncommon for some members sometimes leave a club and then rejoin at a later date. Rather than unsubscribe the member completely – it is possible to pause the delivery of their emails. If they rejoin at a later date you can resume the delivery of their emails in one click, rather than going through the subscription process again.

Human relationship with  computer communication timeout conceptWith this in mind we’ve listened to our customers and implemented a ‘take a break’ feature for list members. We’ve made it very easy to activate for both list managers and list members…

List Managers

Login to your Simplelists account, navigate to ‘list members’, select a member from the address book and tick the ‘pause delivery’ check-box. To restart delivery simply uncheck the box.

pause_deleivery1List Members

Visit http://archives.simplelists.com/ and if you aren’t logged in already enter your email address and you’ll be sent a confirmation email to your email address. Click on the link in the email which will take you to archives of your email lists. Simply select ‘pause delivery’ for the list that you want to take a break from. When you want to receive emails again you just click ‘resume delivery’ – simple!

pause_delivery2

Subscribe Forms – Everything You Need To Know

We’ve just completed a series of short videos on subscribe forms. These videos take you through everything that you need to know to place a subscribe or unsubscribe form on your website: adding a the form to your site, customising the form to suit your needs and styling the form to match your website perfectly…

Adding A Form To Your Website

This is very simple – just login to your simplelists account, navigate to ‘general settings’, select ‘subscriptions’ and you’ll see the code which you can copy and paste to your website.

The first short video takes you through this process step by step:

If you have a multiple list account you have a choice of different forms to use – the next video takes you through the options so that you can choose the most appropriate form for your specific needs:

Customising A Web Form

The simplelists web forms are written completely in standard HTML. This means that they are totally flexible and gives you the ability to customise the forms to suit your needs exactly. You can delete fields that aren’t needed, add new inputs and change the form from subscribe to unsubscribe – you can even write your own form entirely from scratch!

The third video shows you how to customise your form by editing the form itself:

Styling Your Form

Having a form that matches your website’s design is important when creating the image that you want. Because simplelists forms are standard HTML they can be styled using CSS which means that you have the ability to style your form any way you want. You have complete freedom to create beautiful as well as useful web forms. The final video of the series shows you how:

Moderate Your e-mail List Effectively

When your role is moderating an e-mail list, there are a few strategies you can implement to ensure that the job is done effectively. A well-moderated e-mail list will not only be free of spam and trolling but will retain and engage list members, keeping them coming back. Here are some tips for moderating an e-mail list…

Group Discussion

Customise Your List Settings

Taking the time to customise your list settings is a big time saver for moderators – if you set up your list correctly you can almost completely avoid spam and trolling. Pay particular attention to posting permissions – you can choose specific people that can post, allow anyone to post or allow only list members to post.

Open or Closed Lists?

An open list allows anyone to send messages to the list, even non-members. Open lists can be active and attract lots of messages but they also require the most moderation.

Closed lists are easier to moderate – one of the main tasks of the moderator is deciding who can post to the list. The more people you allow to post the better the conversation can be but it is also less controlled.

Each list is different and it should be clear whether an open or closed list suits your needs best.

Avoid Over Posting in Discussion Lists

A common killer of interest in moderated e-mail lists is over-posting by a moderator – even (or especially!) if the moderator is more knowledgeable about the subject matter than most of the list members. If a discussion list becomes a ‘one man show’ then it can lose the discussion factor, which is the raison d’etre after all!.

Be Quick To Remove Spam

If spam messages are left up they can give a bad impression to new members and reduce the quality of the list. Spam is not actually that common in most lists but if you see some remove it as soon as possible.

Use A Light Touch

A list with active discussion can have members with different opinions – debate can get heated but it is important not to jump in too quickly to moderate comments as it can stifle debate. Knowing the difference between a productive argument and trolling is one of the main skills of moderation. It’s important that all legitimate opinions are heard even if you have a different opinion from the person who posted.

Welcome First Time Users

It can be good to welcome first-time users when they make a post. When a new user posts for the first time a warm response can encourage them to be an active member of the email list, while a frosty or criticisive response can turn them off for good. So encourage them by thanking them for posting and welcoming them to your group.

Stoke the Fire

Use your authority as the moderator to encourage new discussions. You can post a question about a current event or a little piece of your mind regarding a specific topic to push users to participate in your moderated list.

Pay Attention To Your Regulars

You’ll notice quickly who your regular posters are. You’ll also notice that these are the people who stoke the fire when you haven’t. Be sure to encourage these users and pay attention to their posts.

Avoid Cliques

While paying attention to regulars is important, it is essential to avoid favouritism or the formation of a clique because this could make other members feel that they are not a part of the group.

Remain Objective

If you do have to step in and remove posts or members, it is important to remain impartial, objective and to put aside any personal feelings you have about those that you are moderating. If you do this well you should gain the respect of the group members.

Explain Your Actions

If you have to remove a post be sure to send the member a private message explaining why you have taken the action. This will help the member understand why their post was removed and should prevent them making a similar mistake in the future. It also makes the member feel like you are paying particular attention to them and gives them a chance to respond to you personally.

Add Other Moderators

If your list has become quite large, and you’re having a difficult time keeping up, you can appoint other moderators to help with the maintenance of your e-mail list. This can be a great time saver.

Choosing a subject line

In our last blog post, we explained that your email delivery rates might be reduced if your list members report your emails as ‘spam’. A feature of Simplelists is that we enable the members of your list to engage easily in private group discussion with one another. So, it’s important that your emails get opened and that your members don’t mark them as spam before doing so, whether accidentally or not.

Spam Folder Listing

One way to ensure that list members open your email and are sure that it is from a recognised, trustworthy source, is to make sure you have a good email subject line.

Top tips for writing a good subject line

Short is sweet. It is worth bearing in mind that the average email client can display between 38 and 47 characters in a subject line. A study carried out by Return Path in 2006 found that “click through rates for subject lines with 49 or fewer characters were 75% higher than those with 50 or more”. So, brevity is probably best.

Resonate with your readers. Content-related subject lines that ‘hit home’ with your readers will work better than something more general. You could consider using a teaser: ‘This month: Is it worth buying organic?’ might be more tempting that ‘August newsletter’.

Avoid spam ‘trigger words’. Email clients generally have inbuilt mail filters to automatically file messages in the spam folder. Words like ‘video, trial, sample, mortgage’ are examples of potentially problematic choices. You can study lists of spam words and you can also use websites like EmailSpamTest to test the likelihood of your email being filed as spam.

Avoid repetition and add a dash of intrigue. It’s always a good habit to avoid repeating a subject line you used before, even it worked really well previously. Give people a reason to open the email by focusing on something that ‘whets their appetite’. Use something memorable or funny to catch their eye.

Personalise and localise. There is always an element of ‘what’s in it for me’ when ruthlessly scanning an inbox full of messages. A study carried out by Experian in 2013 found that personalising emails by using words like ‘you’ and ‘your’ in subject lines may help to boost open rates. Mentioning a place can also help to focus people’s attention.

Finally, make it clear who you are in the ‘From’ line. With Simplelists, you can send your email from your own email account , directly to the list address. Check that your name/company name is displayed clearly so that your members will immediately remember who you are and why they subscribed to the list in the first place.

Using a Subdomain for List Emails

We’ve recently produced some videos with instructions on how to use your own domain with your email lists. The main advantage to using your own domain is that you can brand the entire Simplelists system as your own.

Mailing List Puzzle Showing Email Marketing Lists Online

You can include your logo, branded landing pages and use your domain as the list email address – you’ll completely replace all the Simplelists branding. This will create a professional image and strengthen your brand.

Domain or Subdomain?

An important point to note when setting things up is that you can only use a domain for email with one host. If you don’t already use your domain for emails then you can go ahead and use it for your Simplelists email without a problem.

However, if you already use your domain for emails with your web host (e.g. for personal or business emails) then you can’t use it for Simplelists at the same time. You could use another domain with Simplelists but this wouldn’t be good for branding – strong branding relies on consistency so using different domains will weaken it.

A good solution in this case is to set up a subdomain with your web host and use that as your Simplelists emails. For example…

Your domain is owndomain.com and you already use it for business emails like yourname@owndomain.com, info@owndomain.com

To brand your Simplelists system and also keep your business emails running set up a subdomain with your web host such as lists.owndomain.com, chat.owndomain.com or discussions.owndomain.com. You can usually set up several different subdomains with your web host at no extra cost.

Then use the subdomain for your Simplelists emails – remember that you can have as many lists as you like: managers@lists.owndomain.com, employees@lists.owndomain.com and customers@lists.owndomain.com are some examples.

For full instructions on using your own domain with Simplelists see these two short videos.