The Unrevealed secrets of the perfect HTML newsletter

In this video I give you some information about where to find free HTML email templates.

Bear in mind that you should inspire on these examples and try to do your own in order to be original.

In this video I will show you how to structure your Newsletter skeleton.

On this basis we will develop our templates and HTML emails later own.

Developing an HTML newsletter is quite different than developing a web page.

I will show you what of web development you can use to develop an HTML email and what you cannot or is not recommended to use.

In this video I will go through a presentation to show you which HTML elements you have to use and what is recommended or impossible to use in an HTML email.

The problem is, it is not a browser which will render your newsletters but an email client which is a different software tool.

In this video I show some examples of HTML emails from big names.

You should inspire on these examples in order to develop your newsletters.

This is the most popular and stable format to use for an HTML email.

I will show you this basic structure and its components.

It is very interesting to pay attention to this video as in the next videos we will do many things based on this knowledge.

The DOCTYPE is critical for a web page.

Is it the same for an HTML email? Do email clients need a DOCTYPE or they will ignore it?

I will show if you need a DOCTYPE for your newsletter, in which conditions and how to define it.

META elements contain important information for the structure of a web page.

Is this valid also for an HTML email?

If so which META elements are needed?

After the recommendations we got before about what is allowed and what not when developing an HTML email we will see how to set the styles of HTML elements in an HTML email.

In this lesson we will see if it possible to make an HTML email responsive, if this can be done in every email client and how we can make a newsletter responsive.

Before starting developing our HTML emails there are some recommendations to follow before setting the layout of your newsletter and of its components.

We will see in this lesson these recommendations.

We continue to see other recommendations about the setup of the layout of an HTML email.

We will start building our newsletter and we will understand how to build our basic blocks.

Every element is defined between an HTML element which has the border, cellpadding and cellspacing attributes set to 0.

Empty lines are table rows whose height is defined in the attribute height of a td element of the HTML table container.

We will create a first line where we set the information on how and where to view the newsletter if it is not displayed correctly. This is above the header of the message.

The header of a newsletter is where you need to attract the attention of your subscribers.

I will show you how you can define the layout of your header.

In the header of your newsletter you have to include a piece of text where you deliver your selling preposition.

In this video I will show you how to define the layout and format of this piece of text and the call to action.

In this video we will see the results of the implementation of the header of our newsletter and how it shows up on a mobile phone (we verify the responsiveness).

In this first video I will show you how to build the basic components to use in your HTML newsletter.

Basically how to create blocks containing text, images and mix components.

I will show you how to create a content part containing 2 columns each containing an image and a block of text.

I will show you how to set the layout to make it appear good from the look & feel point of view and how to prepare it to be responsive.

I will explain you how and why the columns we created before are responsive and what you need to keep in mind when you want to create other responsive blocks in your HTML emails.

The secrets of an HTML email is in the HTML tables.

But you need to know how to make a table responsive and there are some tips and tricks to know in order to implement this.

I will show you how to create an HTML email with 4 columns containing 2 text blocks and 2 images and then I will show you how to make them look good on mobile and responsive.

WIidgets are an important tool to make your newsletter look very professional and attractive.

Unfortunately with the limited possibilities due to the way the email clients render your layout you are almost unable to include special widgets in your newsletter.

I will show you some tips and tricks to develop nice widgets for your newsletters.

We will see how our widget developed in the previous lecture is rendered responsive and look good on mobile phones.

The footer of an HTML email should be a separate block and you need to define the block containing the footer information.

Based on what we learnt before about how to build block elements we will design a special one to contain the content in the footer.

As a separate block the footer should have its own style.

I will give you some recommendations to make your footer relevant but also not distracting the visitor from the marketing content contained in the body section.

The footer should be used to contain information about your business and some other legal information which will prevent you to make your message not credible or even be sent to the SPAM folder.

I will show which information you should include in the footer and how.

We will build the footer of our newsletter based on the knowledge we acquired so far about the footer and how to build blocks for HTML emails.

In this section we will start preparing our work to be delivered and published correctly when live.

First of all I will show you how to prepare your email structure and layout in case your images are switched off.

You may want to avoid that your newsletter look bad if your images are not displayed.

You have always to have the online version of your newsletter.

In this video I will show you how to create your online version and all the steps to develop and upload your components to your server.

When you deliver your newsletter using an email marketing tool, somehow the information about the name of the receiver, the pesonalized unsubscribe link and the link for the online version should be included.

In the static version of your HTML email it is not possible to include this information. You do your email once for every subscriber. It is then the email marketing tool which will personalize your newsletter for each subscriber/receiver.

To do this you need to include some TAGs that the email marketing tool when parsing your newsletter content will replace for each subscriber with each personalize information (e.g. first name, unsubscribe link with the user id, etc.).

I will show you how to include TAGs in your HTML email and where to find the information to understand the format of the needed TAGs.

It is vital that you setup the testing process when you want to verify your newsletter.

This is a very complex process. I will show you how and when you need to test your HTML newsletter.

I will show you an example of test of an HTML newsletter using GetResponse as email marketing tool.

Releasing a valid HTML email is vital to have your newsletter not to be sent to the SPAM folder and also to be rendered well on any email client.

Using FireBug is a good way to investigate in advance your code and also the code which is generated by the email client once your newsletter is rendered. You may discover many surprises e.g. which addional elements and styles the email client will append or add to your HTML email and then do the necessary actions to override undesired styles.

Before sending your HTML email you have to be sure that you reduce the SPAM rate possibility of it.

This relies not only on the content but also on the layout of your HTML email.

I will show you the recommendations and how to check that your newsletter has not a considerable SPAM rate.

Some email marketing tool allows you also to send the text version, at least for those users who prefer this solution.

I will show you how you can create your text version from your HTML email and make it even effective!

Gmail is a complicated service for those developing HTML emails.

Many of the settings are stripped out, ignored or overriden by Gmail on the Desktop and Mobile version.

I will give you the list of the most important and popular ones in order for you to take the proper countermeasures.

Yahoo also is a complicated service for those developing HTML emails.

Many of the settings are stripped out, ignored or overriden by Yahoo on the Desktop and Mobile version.

I will give you the list of the most important and popular ones in order for you to take the proper countermeasures.

Outlook.com (previously Hotmail.com) is a nightmare for those developing HTML emails.

Many of the settings are stripped out, ignored or overriden by this service on the Desktop and Mobile version.

I will give you the list of the most important and popular ones in order for you to take the proper countermeasures.

Microsoft Outlook is the most popular desktop email client and each of its version has a lot of issues when rendering HTML emails. But it is crucial that you have your HTML emails displayed properly on Microsoft Outlook. You may lose at least 40% of your market target!

Many of the settings are stripped out, ignored or overriden by Microsoft Outlook (in its version 2007, 2010, ...).

I will give you the list of the most important and popular ones in order for you to take the proper countermeasures.

Similar issues are present on the mobile version of Windows for Windows phones.

I will show the most popular ones and how to fix/avoid them.

Users of iPad and iPhone may also not see your newsletter properly if you do not take into considerations some of the issues on those devices and on Apple computers.

I will give you the list of the most important and popular ones in order for you to take the proper countermeasures.

This is an overview and recap of the main issues that your HTML emails encounter when displayed on the several different email clients.

I will give you also the recommendations to prevent them.

You need to create an HTML template/example where the content is composed of rows containing:

• 1 image on the left

• 1 block of text and a call to action on the right

The text and the call to action are aligned vertically.

In the mobile and tablet version the image is displayed above the text and CTA.

The starting file is ex_01_base.html and the solution is the file ex_01_solution.html. Both files are in the resources.

ps. Pay attention to the media queries as well!!!

Good Luck

Please watch the video first!

You need to create an HTML template/example where the content is composed of rows containing 3 columns and each column contains:

• 1 image on the top

• 1 block of text in the middle

• 1 call to action on the bottom

The 3 elements are aligned vertically.

In the tablet version the 2 first columns do not change but occupy 50% of the total width image, while the third column is displayed in the following row.

In the mobile version the 3 columns become 3 rows.

The starting file is ex_02_base.html and the solution is the file ex_02_solution.html. Both files are in the resources.

ps. Pay attention to the media queries as well!!!

Good Luck

Please watch the video first!

You need to create an HTML template/example where the content is composed of one header containing:

• 1 column with a headline, a text paragraph and a call to action

• 1 sidebar containing an image, a list of text and a call to action

The 2 elements are aligned horizontally.

In the tablet and mobile versions the 2 columns do not change but the internal styles may change to fit to the changed layout/size.The starting file is ex_03_base.html and the solution is the file ex_03_solution.html. Both files are in the resources.

ps. Pay attention to the media queries as well!!!

Good Luck

This is the closing lecture of this course.

I will inspire you with recommendations and guidelines to continue improving your knowledge and expertise in developing your own HTML emails and satisfy your customers as fast as possible!