Tech tips: Keeping your webcam secure

Most of the devices we use on a daily basis these days have webcams installed as standard. While this makes keeping in touch with friends and family very easy, it is important to be aware of the potential associated security risks. There have been several stories in the news recently about people who have had their webcams ‘hacked’ and the implications for how this affects personal privacy are significant. In the first of a short series of ‘tech tips’ posts, we explain how webcams can be accessed and suggest some things you can do to avoid someone looking in on you, unwanted.

Webcam security

How can webcams be accessed?

Most hackers use a so-called ‘Trojan horse’ attack to access webcams. By erroneously clicking on an email attachment or downloading a piece of music or video that is infected with malware, the hacker may be able to control your device remotely.

Another technique, known as ‘clickjacking’ occurs when a website is manipulated so that the permission prompt for Flash becomes invisible. In this can, an invisible prompt can be placed over a commonly used area of the page (for example, the ‘Play’ button on a video) so that when you watch the video you inadvertently give permission to Flash to start recording images on your camera. The type of webcam you use may also be an issue, although this is now less common. Nonetheless, a recent article about security risks associated with baby monitors with in-built cameras suggests that there are still vulnerabilities in certain models.

What can you do to protect against this?

There are several things that you can do to avoid your webcam being attacked. The most obvious, and perhaps easiest, is to cover your webcam when it is not in use. However, it is possible that a hacker could still access the device’s audio feed, which is also pretty undesirable.

Make sure your hardware and software are up-to-date. The webcam itself, like most standalone devices, is controlled by its firmware and this is where any vulnerabilities are most likely to occur. Try to stay up-to-date with any firmware updates from the device’s manufacturer. Similarly, make sure your computer virus protection is current. You should run routine malware scans (malware is a popular way for hackers to access your device in other ways as well), and make sure you use a firewall to protect against attacks. A common way for malware to enter your computer is via email attachments so make sure that you don’t click on any suspicious ones. You can also make sure your wireless connection is secure by using a unique password on it, rather than the default one that comes with the router.

If you still wish to do more, there are some programs out there now that offer webcam protection. They work in the background and notify you when your webcam is being used. You can also keep an eye on the indicator light on the webcam, if you have one.

‘Good news’ technology stories

The past month has been an active and not always very positive one on the news front. At times when politics and events around the world can seem to be broadly negative, it can be nice to remind ourselves of ‘good news’ going on in the background. Over the past few months, we have shared quite a lot of positive technological advances on our Twitter and Google+ feeds. In this blog post, we have included some of our favourites for you to enjoy.

 Positive technology news

 

1. Using solar power for air conditioning

A large shopping centre in Victoria, Australia was in the news recently as its owners are using solar-concetrating thermal technology to power the centre’s air conditioning system. The innovative system heats and cools air within the building, without having to introduce external air, using drying wheels to act as dehumidifiers and remove moisture from the air. Heat is captured in the winter to hear the centre’s ambient air, and provides power to cool the centre in the summer. Researchers testing the system believe that it will drastically reduce electricity requirements, while also being about 40% smaller than a comparable air conditioning system.

2. Using lasers to uncover our past

Airborne laser scanners have recently been used to reveal several undiscovered cities hidden in jungles in Cambodia. Using a helicopter equipped with state-of-the-art Lidar technology to survey the landscape, it was possible to generate images of the ground which filter out surface vegetation and reveal hidden details on the surface. In this case, the technology allowed researchers to make great advances in our knowledge of Angkorian civilisation.

3. Transforming disabled people’s lives

Advances have been made in ‘assistive technology‘, which enables disabled people to do things that would have previously not been possible. Recent examples include ‘EyeGaze technology’, which allows people to control the movement of a mouse on a computer screen using just their eyes. Other versions allow users to control the mouse with their head, knee, foot or mouth. Verbal communication technology such as ‘Liberator’ also allows disabled people to communicate verbally using just eye movements to send commands to a computer.

4. Helping female refugees

Recognising that half of refugees are women, a groups of coders, designers, NGOs and academics have been working to develop technology that can help to educate and provide information to female refugees. The development of apps is a key activity, with individual projects linked to NGOs to ensure delivery. Hababy, an app that provides prenatal and postnatal information for refugee women, is one example.

5. Driving on solar-powered roadways

An idea initially mooted a while ago, the notion of ‘solar roadways‘ is starting to become a reality. It was announced this month that the Missouri Department of Transportation in the USA plans to become the first US public highway department to test the technology. By collecting the substantial solar energy that hits surfaces such as roads, the idea would give roads a dual purpose: both a part of modern transport infrastructure and a ‘smart’ power grid.

Why is an email footer important?

When you send emails for marketing purposes, there are several things you should do to ensure that your email has the most impact possible, and that you comply with the law on email and spam. Although at the end of your email, a well thought-out and well-designed footer can ensure that you do both of these things, as well as provide valuable information to your readers. It can also help to ensure that your email doesn’t get marked as spam. In this post, we look at five ‘best practices’ for email footers.

Email footers

1. Prioritise the legal stuff

It is a legal requirement that there is a clear and visible ‘unsubscribe’ link in your footer so that recipients can remove themselves quickly and easily from your mailing list, should they wish to do so (or update their subscription preferences). You should also include your contact information in the footer: full name and address of your company, and tax identification numbers or other relevant legal information that you might like to show.

2. Invite people to visit your social media links

If you are building a following on social media and use sites like Facebook, Twitter and Google+ to promote your business/work, or share relevant content, the footer is a great place to pop the links to these sites. This makes it very easy for people to go directly to your page(s). You could include text links or, if you have the time and skills, include small social media icons that people can click on.

3. Remind people why they are receiving your email

It is important that your footer tells people why they are receiving the email. This reminds people that they ‘opted-in’ to receiving your emails. However, avoid an impersonal reminder like: “You are receiving this newsletter because you registered with your email address”. Instead, let them know when and where they subscribed, in case they want to double check.

4. Make it look good, and provide links to more information

You might like to include links to your own privacy policy (if you have one). This is particularly recommended as having a privacy policy helps your email to be ‘whitelisted’ (avoid the spam folder). You could also include any information about copyright and/or ownership of the content you are sending. Including links to other news items on your website and/or previous newsletters is also an option, but take care not to overcrowd things. You could include a logo in your footer and, if you are designing an eye-catching email, use a similar overall design in the footer.

5. Don’t weaken the sign-off

It is advisable not to include statements like: “This newsletter was generated automatically – do not reply as your message will not be read”. This can end the communication on a ‘bad’ note, setting a precedent that your email is ‘one-way’ and that your readers cannot (and perhaps should not) reply or interact with you about the content they have just read. This is a wasted opportunity to engage with your clients/list members so try to ensure that people can comment/reply if they wish.

 

Keeping email marketing out of spam

A recent study carried out by ReturnPath estimated that only 79% of emails sent by legitimate email marketers (i.e. emails sent to people who signed up to your list) reach the inbox. Spam filters are becoming more and more sensitive, to ensure that non-legitimate, spam emails don’t get delivered. It is important to follow a simple set of rules to ensure that your list members receive the emails they have signed up for.

Email spam

Build a good email list

The most important thing you can do to ensure that your emails get delivered to the inbox is to ensure that the people that you are emailing want to hear from you. It is not advised to buy or rent email lists that you can’t trust the source of, and it’s important that your list members have opted-in to receive your list. The most common way to opt-in is to subscribe to a particular mailing list, either via a website or a social media link. If people visit your website (regardless of whether they purchase something), they tend to be interested in the information you are providing. You can include an email sign-up box on all pages, allowing users to join your list. A ‘soft opt-in’ is is when a customer has bought something from you and, on this basis, you assume that they might like to receive information about other products/services. They might also have opted in ‘softly’ if they have been given the option to refuse to receive communications from you and they chose not to select this option.

Ask your recipients to add you to their contact list

Getting emails delivered to the inbox is pretty much guaranteed if your list members have added you to their address book/contact list. You can ask them to add you to their contacts in the first welcome email that you send them when they sign up to receive your messages. It’s also a good idea to remind them in the body of other emails that you send.

Take care with your subject line

The subject line of your email will also affect the likelihood of your email making it to the inbox.  We have considered how to write a good subject line in a previous post – the key message here is that your subject line should not be significantly longer than 35 to 50 characters because the longer it is, the more likely it is that it will go to the spam folder.

Make it easy for them to unsubscribe

This might sound like a strange one but making the unsubscribe link prominent can actually help overall deliverability to your list. It is much better if your recipients choose to unsubscribe, rather than marking your email as spam. Email service providers such as Gmail, Hotmail and others keep track of spam complaints and may penalise you for it, affecting how many of your other emails get delivered. By making it easy for your list members to unsubscribe, you minimise the risk of the email service provider blocking all the emails you send.

Finally, it is important to understand that there are laws governing the sending of emails to a list – you can read more about email spam and the law in one of our earlier posts.

Why email is still alive and kicking

Email marketing campaigns are used by the majority of companies to advertise their products, share their news, or invite their subscribers to take part in activities/events. A campaign is a ‘call to action’ with varying objectives and, recently, there have been several questions raised about the effectiveness of email as a method for engaging and motivating your contacts.

In this post, we look at why, despite the rise of social media, email marketing remains an important and effective marketing tool.

Blue keyboard key Contact us, web business background

People tend to prefer email

More than 200 million emails are sent every minute. It is perhaps no surprise that email is still a very heavily used means of communication for consumers and organisations alike. It allows you to open your mail at your leisure, rather than receiving a phone call or text, and direct mailings can often be thrown straight in the bin if not immediately relevant. A 2015 study carried out in the US found that 72% of American adults say that they prefer companies to communicate with them by email, rather than by other means. A high percentage (91%) of respondents also said that they like to receive promotional emails from organisations that they already do business with.

It has advantages over social media

Email marketing allows you to send relevant and insightful content to a group of people who have knowingly and willingly subscribed to your list. Over-enthusiastic marketing using social media can lead to you losing followers, especially if you bombard them with too many posts/adverts. With social media, you are relying on your followers to see your posts, yet if they only access their accounts at certain times of the day, you may get missed in their already-busy feed. It is also hard to target your marketing on social media when all your followers see all your posts. An email can be opened when it suits the recipient. In addition, most users of the internet are also email account holders, whereas only 70% have a social media account.

It is an easy way to reach mobile customers

Email marketing remains an easy way for organisations to reach their list members on mobile devices, without having to invest in new technology and/or software. A 2014 study carried out by shop.org found that just under 50% of retail email messages were opened by customers on their smartphones, and about 20% on tablet devices.

You can target your list to get better results

Simply building a list of email contacts can be a waste of time. Instead, it is worth investing your efforts in segmenting and targeting your list so that you have engaged readers who want to open your email and read what you have written. For example, you do not want to send information about the latest sale in women’s clothing to your male subscribers. If you don’t target your emails well, you are likely to see high ‘unsubscribe’ rates.

 

Email marketing tips for beginners

In this post, we share some basic tips for those of you who are just starting out in email marketing. You might be about to launch a regular email newsletter to raise awareness of your work and/or invite your readers to sign up to a product or list (responding to a ‘call to action’ or COA).

While email marketing has been described as ‘one of the oldest digital marketing techniques’, it remains highly effective. Conversion rates from marketing emails tend to be about three times higher than from social media.

Email Marketing

Here are our top five tips to bear in mind:

1. Personalise your emails

An email that reads like a generic message sent to hundreds of list members is much less likely to be read and acted on. By starting your email with your list member’s name, you are more likely to catch their attention. With Simplelists, you can add a member’s name into your emails (see how here). You might also want to think about more imaginative ways to customise the content of your email to match with the reader’s age, gender, location etc. Little details like this are likely to give you email a more ‘human touch’ and help the email to feel more relevant to the recipient.

2. Get to the point and keep it relevant

Recipients like to receive messages that are relevant to them so it’s not a good idea to try to sell or promote something that they didn’t sign up for in the first place. Communicate key messages at the top of your email content, especially as many email clients do not automatically show the whole email. Therefore, the top content needs to motivate recipients to scroll down. It is also a good idea to keep the subject line short and concise. You should try to avoid words that might be seen as ‘junk’ by spam filters (e.g. ‘free’ or ‘cheap’). You can read more about how to write a good subject line in an earlier post on our blog.

3. Use visuals

Today, we access our emails on a variety of devices at different times of the day. We can be at our desk, on the move, commuting, or relaxing at home. So, visuals can be an essential tool for sending an email that is more engaging than your competitors’, catching the eye of the recipient and encouraging them to read it. Images are processed much faster than text by the brain and, as we all know, our attention span is short in an age where emails and other notifications bombard our devices 24 hours a day. Some good ideas to try include: charts/diagrams, graphs, icons, videos (or a thumbnail link to a video), headers and emojis. Every audience is different though, so make sure the visuals you use are suitable for your recipient group.

4. Target/segment the recipients

It is important to remember that the goal of most email marketing campaigns isn’t simply to deliver a message. It can be to raise awareness of an organisation’s work, sell a product, fill in a form, etc. Ultimately, you are prompting a COA (call to action). While following tips 1-3 above will ensure that your email is relevant and engaging, it is also worth thinking about further targeting, or separating your contacts into different groups, depending on certain characteristics/activities. You can then personalise your emails for each group. With Simplelists, you can do this by using multiple lists to manage your contacts.

5. Measure success

At the end of the day, it is not worth putting all of this work in if you do not have a sense of the results that you are achieving. It is a good idea to decide what you would like your ‘key performance indicators’ to be. Examples might be:

  • open rate (how many people opened your email);
  • click-through rate (how many people clicked on links in your email);
  • click-to-open rate (the number of unique clicks/number of unique opens);
  • bounce rate (how many emails didn’t get delivered);
  • delivery rate (emails sent, measured against bounces);
  • unsubscribe rate (how many people unsubscribed from your list);
  • referral rate (how many people sent the email on to someone else); and/or
  • number, or proportion of, spam complaints.

 

Timing your email newsletters

There is lots of information out there about when is the best time of the day/week to send email newsletters, ensuring that as many people as possible open (and read) your message. We’ve already written about how to come up with a good subject line to increase your open rates and in this post we’ll look at the variety of data that analyses the best time to send your email.

Timing your email newsletters

Time of day

An analysis of more than a billion emails was recently conducted by a major email newsletter company to identify trends in the best time to send marketing emails/newsletters. The results showed that the number of ‘email opens’ increased after 12pm, with the optimum period being between 2pm and 5pm. This suggests that people prefer to read newsletters or other marketing emails once they have cleared the more urgent emails in the morning. It goes without saying that you should aim to send your email within working hours, otherwise they are likely to be deleted in the morning ‘clear out’ of the inbox. If some of your contacts are in a different time zone, you’ll need to take this into account as well.

Time of week

The same study also revealed that Tuesdays and Thursdays are the busiest days for the average person/worker in terms of email volume. With that in mind, it might be advisable to aim for other days of the week (although Mondays are not recommended as ‘back to work blues’ may get in the way), to help your email ‘stand out from the crowd’, or you may wish to stick with these two days as they have been shown to be successful for many marketers. Sending marketing emails at the weekends is not advised, although this may be a good time for you, if your audience dictates.

Know your audience

Your audience is likely to have certain habits, depending on their interests and the information that you are sending to them. These habits might render some of the more established statistics about ‘when is a good time’ somewhat less useful. For example, if you are communicating with a young, technologically-motivated demographic, evening emails may work just as well as ones sent during the day. If your email requires a response, evenings may also generate higher engagement, especially if your email isn’t directly work-related. Similarly, Fridays (which are often not recommended as the weekend is a distraction) may work better if your email is about entertainment and the weekend is about to start.

What about the device?

A lot of the points above are not necessarily applicable to mobile users. A lot of the research tends to focus on desktop users who open emails at work. Mobile users continue to be active into the evening and at weekends. In 2013, a study found that 55% of consumers open their emails on desktops, while only 25% opened emails on mobile devices. With the ever-growing use of (and reliance on) mobile devices, this number is now likely to be much higher. Making emails more ‘mobile friendly’ and responsive will also affect the user’s experience of the content that you send.

So, there doesn’t seem to be a ‘right’ time to send your emails but being aware of these points will help you to choose the best time for your content/audience.

HTML Emails – Complete Series

We have just completed the final video in our HTML emails series which takes you through everything from designing your email, to writing the code for responsive emails and finally to testing and sending the email. Here are all six parts of the series:

Part 1: Overview

Part 2: Design

Part3: Doctype, Structure & Metadata

Part 4: Adding & Styling Text

Part 5: Adding Images

Part 6: Sending & Testing

HTML Emails: Adding Images

In Part 5 in our video series on creating HTML emails we show you how to add images to the email.

We’ve included a copy of the full code here so that you can use it:

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
40
41
42
43
44
45
46
47
48
<!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><img src="http://demowebsite1.co.uk/email-images/call_to_action.png"></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>
        <tr>
            <td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/company_logo.png"></td>
            <td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/facebook.png"></td>
            <td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/google_plus.png"></td>
            <td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/twitter.png"></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><img src="http://demowebsite1.co.uk/email-images/call_to_action.png"></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>
		<tr>
			<td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/company_logo.png"></td>
			<td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/facebook.png"></td>
			<td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/google_plus.png"></td>
			<td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/twitter.png"></td>
		</tr>
	</table>
</body>

</html>

Images Must Be Placed On A Server

If you want your email to contain images the first step is to place the images on your server. When you do this also record the path of the image so that you can point the image source to it in the email.

Put the image in a table data cell

In the email put the image in it’s own table cell and make sure that the path is correct and points to the images on the server.

For full details on how to add images to your HTML email watch this short video:

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: