HTML Email

MAIN OBJECTIVE

In this tutorial we will learn about what HTML emails are and how to impliment them. We will learn how to properly code an email using tables and a few useful internet resources. We will also learn how to properly style an HTML email so that it displays the way you want it to in the recipient's email client.

SUB OBJECTIVES

• What is HTML Email?
• Designing an HTML Email
• Important Design Elements
• Setting up and Coding an HTML Email
• Styling your HTML Email

PREREQUISITES

Before beginning this tutorial you should already have a strong understanding of HTML fundamentals and how to apply them to your web page. You will need a basic understanding of coding with HTML tables. You should also have a strong foundation in CSS and know how to apply inline styles. You will also need a general grasp of PHP fundamentals.

WHAT IS HTML EMAIL?

We've all seen the emails from companies or reatilers that look like an interactive print advertisement, or a scaled down version of a web page. These are created using the same HTML that one would use to create a web page. While HTML emails are very attractive and a useful tool, they are difficult to create. Because of the multitude of different email clients and inconsistancy in their CSS support HTML email's need to be coded using outdated techniques like table layout and inline CSS styling.

EMAIL CLIENTS

Because of the differences in HTML/CSS rendering through email clients, using modern coding techniques can turn out to be a mess in a lot of email clients. They just don't render HTML in the same way as browsers do. Normal things like floats, background images, and even margins aren't going to work very well for you in emails. I know that right about now you're asking yourself, "If I can't use standard coding techniques, what can I do?" The answer to that question is to code like you forgot that it's 2015. Tables, Cellpadding, cellspacing, colspan, and all of those things you probably never use, and people tell you not to ever use in your pages. Tables are the only way to get consistent email layouts, so it's time to embrace the tables.

DESIGNING HTML EMAIL

There are a few cardinal rules when creating an HTML email. You want to make sure you keep things simple, Minimize the use of images, keep your email thin in overall width and responsive whenever possible, be consistent, a plan everything before executing.

K.I.S.S. ( KEEP IT SIMPLE ST*#@D )

When designing an HTML email, keep things simple. Consider sticking to simple layouts like two columns when coding your emails. You'll find that you will save yourself a lot of headaches if you do.

MINIMIZE THE USE OF IMAGES

Try not get too fancy with your designs since some email clients don't support background images. Depending on your client's needs, do your best to keep the design practical while still keeping it stylish.

You can use background images and other images for decorative reasons, but make sure the email makes sense without them. For example, if you want to add a gradient to your header, or a decorative image somewhere on the page make sure that the email still makes sense if they don't show up.

THINNER IS BETTER, RESPONSIVE IS BEST

Because most email preview windows are usually a fraction of the screen width, you generally want to keep your design at or under 600px. Horizontal scroll bars are The Devil!

With that being said, try to keep your designs responsive whenever possible. With all of the different mobile devices out there now, and more people than ever checking their emails on said devices, there's now way for you to be able to create a static email that is going to show perfectly across all screens. I personally hate haveing to pinch and zoom to see things on my phone. Responsive design assures that your email will display the way you intend it to regardless of what it's being viewed on.

BE CONSISTENT

We're going to be using very inflexible properties like cellpadding and cellspacing for laying out email out and spacing out our elements. It's important to try and keep the spacing between elements consistent and uniform.

PLAN TWICE, CODE ONCE

As with any project that you undertake it is always good to have a well planned and well though out process. Coding with HTML tables can get complicated quickly. It's best to have a detailed design that you can work from in order to keep things organized. Plan out things like how much cellpadding and cellspacing you want in your design, how many columns you have, and what kind of information you need to display. You will save yourself time and headaches in the long run if you work through projects this way.

IMPORTANT DESIGN ELEMENTS

There are a few important elements that we should touch on before proceeding on to coding the email. Learn these elements and what they do in order to make your coding experience more "agreeable".

Coding HTML Email

We can start coding our email. When you begin to code you will build the structure and style it inline as you're doing it. Start with the layout and be sure to include all the spacing and padding, and background colours. After you get the basic layout then you can worry about the typography and other CSS stuff later on. Making sure you have a strong foundation will make things easier.

Here is the HTML we used.

    	
	
        	
List Item One
            
List Item Two
            
List Item Three
            
List Item Four
        
        
        
	
        	
List Item One
            
List Item Two
            
List Item Three
            
List Item Four
        
        

Here is the CSS we used to make this happen

.parent_1 li:nth-child(3){ /* Here we are selecting the 3rd child in each parent*/
	padding-left:30px;
	font-style:italic;
	color:#FFF;
	background-color:#39ae6f;
} 

Nth of type allows you to choose the first type of tag that you want and get specific about which ones. You can choose by a specific number or you can choose multiples by selecting even and odd. Below we will select only the odd numbers.

Here is the HTML we used.

    	
	
        	
List Item One
            
List Item Two
            
List Item Three
            
List Item Four
        
        
        
	
        	
List Item One
            
List Item Two
            
List Item Three
            
List Item Four
        
        

Here is the CSS we used to make this happen

.parent_2 li:nth-child(odd){
	font-style:italic;
	color:#FFF;
	background-color:#39ae6f;
}  

These come in very useful when styleing tables or large lists that you want to break up stylistically.

Not

The not selector allows you to assign a specific element of a parent and then it chooses and styles everything else within the parent except for what you have assigned the not selector to. Think of it as using masking tape on a canvas. You put the tape where you don't want paint and then you paint the rest of the canvas leaving the masked area blank.

Here is the code that we used to make this happen

    
This is a heading
                  
    
The first paragraph.
    
The second paragraph.
    
The third paragraph.
    
The fourth paragraph.

.deuce p:not(.the_first){
	background-color:#333;
	color:#FFF;
}

Before, After, & Content

The before and after selectors allow you to place content before or after an element on your page using only CSS which means that you wouldn't have to go back through your HTML to place an image or text as long as you know which element you would like to place it in. This can come in handy if you have repetative content that you would like to place an image text or special character with. Content is just that. It works along with before and after and specifies the content that you are placing before or after and element.

Here is the HTML that we used.

 

    
This is a heading
    
The first paragraph.
    
The second paragraph.
    
The third paragraph.
    
The fourth paragraph.
 
    

Here is the CSS that we used to make this happen

.parent_3 p:before{
	content:"This is ";	
}
	
.parent_3 p:after{
	content:" Division Fifteen Education is the best!";
}

POP QUIZ HOT SHOT!