The Unrevealed secrets of the perfect HTML newsletter

Design, develop, test and validate HTML emails and HTML email skeletons as newsletters for email marketing campaigns.
4.1 (12 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
751 students enrolled
Instructed by Daniele Protti IT & Software / Other
$19
$80
76% off
Take This Course
  • Lectures 55
  • Length 4.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2016 English

Course Description

In my career as software architect and software developer I have noticed that any time our customers asked us to prepare and develop HTML newsletters we encountered many problems.

Developing an HTML email is not the same as developing a web page.

Moreover the available documentation is  not complete. In fact your emails have to be displayed on several email clients and each of them introduced styles or elements to your HTML emails and even strip out some of your settings.

It is hard to cover all these issues and be perfect on any email client. Moreover there are always new versions which is impossible to monitor.

There are some solutions and recommendations provided by the main email marketing tools but you will always need to rely on someone else and on their templates and schemes. But sometimes you need to be different and satisfy the requests of your customers.

In this course I will give you the guidelines and recommendations to develop the perfect HTML email.

We will be together an example based on a skeleton which we will build at the very beginning and step by step we will set it to fix the issues of the mail email cliens (e.g. Gmail, Yahoo! Mail, MS Outlook etc.).

I will show you how to make your HTML email responsive and what to do when the email clients ignore your responsive settings.

At the end you will be able to develop your own templates and HTML emails.

What are the requirements?

  • Understand HTML
  • Understand CSS
  • Understand Responsive Web Design

What am I going to get from this course?

  • Develop an HTML email Skeleton or Template
  • Develop an HTML newsletter
  • Test and Validate an HTML email
  • Recognize and fix the email client and web client issues in HTML emails
  • Develop responsive HTML emails
  • Develop responsive tables in HTML emails

What is the target audience?

  • Who has a basic knowledge of HTML and CSS
  • Who wants to do email marketing campigns
  • Who has to develop HTML emails for his/her clients

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Set up your work
01:44

In this lesson I give you an overview of my skills and professional carieer

04:26

In this video I show you how the course is structured and the process followed to achieve the goal of this course

01:38

In this lesson I show you how each lecture is structured, how to see the description and how to get the related resources (other documents and source codes).

Introduction
04:32
04:09

In this lecture we will clarify the concept of HTML email.

An HTML email is an email that is formatted like a web page, using colors, graphics, table columns and links.

Plain text email is on the other hand an email that only includes text.

HTML emails convert better than plain text emails but  there are some factors you should consider before deciding which email format to use.


01:05

In this lesson we will see which web tehcnologies you can use to develop an HTML newsletter.

Can you use HTML? If so which version?

Can you use CSS and Javascript?

These are all questions that we are going to answer here.

00:53

We will see what a Newsletter template is and why it is crucial to have a template for an HTML email.

Most of the problems in the development of an HTML email can be avoided if you define the template correctly at the very beginning.

02:37

HTML emails are a tool for Email Marketing.

It is important that you understand what is Email Marketing and how you implement it.

03:34

The process from the development to the delivery of an HTML email is quite complex and it is crucial that you understand it before you start working on your newsletters.

Verify your understanding in this section
3 questions
Section 2: Your newsletter template
03:11

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.

02:56

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.

05:44

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.

11:01

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.

05:58

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.

05:40

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.

Verify your understanding in this section
3 questions
Section 3: The HEAD of a newsletter
02:17

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.

02:15

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?

09:42

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.

04:53

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.

03:36

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.

05:41

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

Verify your understanding in this section
3 questions
Section 4: The BODY - Define The HEADER
09:46

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.


03:43

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.

06:20

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.

00:31

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).

Verify your understanding in this section
3 questions
Section 5: The BODY - Define The Content structure
10:01

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.

11:01

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.

04:12

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.

06:24

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.

05:32

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.

09:40

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.

04:06

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

Verify your understanding in this section
3 questions
Section 6: The BODY - Define The FOOTER
02:43

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.

03:26

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.

03:15

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.

07:12

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.

Verify your understanding in this section
3 questions
Section 7: Email Marketing campaign preparation
05:40

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.

04:18

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.

05:23

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.

06:32

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.

03:50

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

04:07

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.

06:23

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.

06:22

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!

Verify your understanding in this section
3 questions
Section 8: Important to know: Email Troubleshooting
06:41

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.

07:10

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.

04:21

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.

03:00

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.

01:17

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.

04:25

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.


05:19

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.

Verify your understanding in this section
3 questions
Section 9: Conclusions
Article

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

01:54

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

01:08

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

01:44

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!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Daniele Protti, Project Manager and Software Architect

I have 20+ years experience in IT project management, software development and software architecture.

I have led several teams of software developers as project manager, quality manager and as team leader in different companies and different countries in sectors e.g. telecommunication, research & development, travel business, Internet marketing and Internet business, consultancy and services.

I have been responsible to collect the requirements of projects, applications and processes, design the databases and specify the final objects.

During my career I have accumulated a lot of experiences dealing with processes of any kind and the need to define the tools to manage them and collect the information.

Most of my tools have been written in VB, VBA, C++, C#, Java, PHP, Javascript using databases e.g. Informix, Postgres, Oracle and MySql.

I have organized all my experiences in courses which are not only a list of functions and methods but contain also my practical experiences and considerations about how to cope with the different situations and which solutions to suggest.

Ready to start learning?
Take This Course