e-Mail design: Create an HTML email template from zero

Article Introduction: build an HTML email template from scratch.

Demodownload

The best way to understand this is to start your own process from scratch. Today, all we have to do is use email design to build an HTML email template from scratch.

Pierre Borodin Offers

The fonts used are oil Can, Source Sans Pro and Mission script provided

Social media icons come from the metrize Icons.

As discussed in the previous tutorial, an HTML message requires an XHTML document type:

                        demystifying Email design      

Next we can start building the rest of the structure.

hello!

If the attribute exists in HTML, it can be used instead of the CSS style.

Now place a 600px-width table in the table container and center him. 600px is a secure maximum width, using your mail on the desktop and the Web mail client is most comfortable to display under most screen resolutions.

Use the width attribute instead of CSS to set this width. The golden rule of HTML email development is that if an attribute exists in HTML, it definitely uses the Label property instead of the CSS style .

We will use this form instead of our title "Hello!":

  
     
   

    
 
     
 hello! 
 
    
 
   
  
     
 
 
 

  
  
 
   
It might be a little dizzy here, using the table above to replace the title "Hello!" in the first table. --Desert
 
  
 
 
 
The overall code is as follows:
 

   
We have added an inline style that sets the Border-collapse property value to collapse. If we don't, a new version of Outlook will add a small space between our table and the border.
     
    

     
 
      
 
       
 
        

         
 
          
 hello! 
 
         
 
        
       
 
  
       
        
     
    
   
   
 
    

     
 
      
 
       
           &L T;td> Row 3  
         
 
        

         
 
          
 Row 1 
 
         
 
         
 
          
 Row 2 
 
         
 
         
 
        
       
 
 
     
 
    
   
 
Now set the color for them according to the design. BgColor is a valid HTML attribute, we use this property to override the CSS Background-color property to set the background color. always remember to use the full 6 full hexadecimal encoding, and it is not always valid if you use three lowercase characters .
 
     
     
      

       
 
        
 
         
 
          

           
 
            
 Row 1 
 
           
 
           
 
            
 Row 2 
 
           
 
           
 
            
 row 3 
 
           
 
          
         
 
 
       
 
      
     
     
 
 
OK, next we'll focus on the first line. We adjust the inner margin (padding) on the cell, and then insert the image we want.
  

Note: If the contents of your head are important, do not use only one image in your head. Remember, most mail clients turn off the image, so if your email is important, don't load it with pictures. In this case, our head is very redundant.
                  
 

 
Now we add a three-line table to the main content-one for the head, one for the content and two for the row. We designed the width of the table to 100% instead of using a fixed pixel value. Because it helps us to implement a responsive email. If you always set specific pixels for the width of each item, you need to overwrite more styles in the media query. If the width of your nested table is based on a percentage, when you adjust the width of the parent element, everything will adjust accordingly.
 
     

      
Now we'll add the content and add some padding (padding) to the middle cell.
         
       

        
 
         
 Row 1 
 
        
 
        
 
         
 Row 2 
 
        
 
        
 
         
 Row 3 
 
        
  
         
         
         
       
      

      
Now, we're going to add two columns to the third row. Because we want to set a margin between two cells, but everyone knows that the table does not support margin, we need to create a three-column table that places an empty cell between two columns.
Although I'd love to stick with percentages, when you have a specific size, it's hard to convert it to a percentage (in this case, a column setting of 48.1% might be confusing). For this reason, we have two 260px wide images, we will create 260px columns and create a 20px wide empty cell in the middle of the two columns. (Total is 540px, this is because our total width is 600px, minus the 30px padding on both sides). Make sure that you set your font (font-size) and row height (line-height) to 0 and insert white space characters in the spacing cell.
We will also add valign= "top" to these two cells so that the content is aligned vertically in the front. The default value for cell vertical orientation is middle.
     
       

        
 
         
 Lorem ipsum dolor sit amet! 
 
        
 
        
 
         
 lorem ipsum dolor sit amet ... 
 
        
 
        
 
         
 Row 3 
  
          
          
          
        
       
      

      
Now add images and content to these columns. We need to nest a multiple-row table because we can't use any of the colspan or rowspan tags. We'll add some padding between the image and the content and copy them to another column.
     
       

        
 
         
 Column 1 
 
         
 Column 2 
  
          
          
        
       
      
      
 
       

        
 
         
 
           & lt;tr> 
            
 
           

            
 
             
 
 
            

             
 Lorem ipsum dolor sit amet ... 
 
            
 
           
          
 
 
         
 
          
              <TD style= "padding:25px 0 0 0;" > Lorem ipsum dolor sit amet, ...  
             
 
        
 
       
      
 
Here we use the Width property of the HTML to set the image to 100% as wide as the column. Again, again, if our message is responsive, we just need to use a media query to change the width of the parent element. We will have to use pixels to write the height of the image because using style= "Height:auto" is not currently supported by all mail clients (such as Outlook). So we set them to a fixed pixel value. This also means that we have to use Heihgt:auto!important in the media query, overwriting the pixel values of the image, and we can do this by adding a class. When we set the width to a percentage, we do not need to overwrite it again. Because the fewer things need to be covered, the better.
 
  

<TD bgcolor= "#ee4c50" style= "padding:30px 30px 30px 30px;" > Row 3 
 
In this cell, we will nest a two-column table.
 

       
Next, create another small table for the social media icon. Set his parent element cell align= "right". Make sure these linked pictures are set to border= "0" (to avoid the blue border of the links) and don't forget to add display:block to the picture;.
     
        

         
 
          
 Column 1 
 
          
 Column 2 
  
           
           
          
 
 
Next we need to write a style to the footer text, and we will also organize our unsubscribe links. We also use CSS styles and HTML  tags to decorate the unsubscribe link. Using both methods is the best way to ensure that your links never appear in the default blue.
 
 
It doesn't look like it's drifting now. Finally, I added a 30px margin to the first cell to prevent our mail from suddenly stopping on certain mailbox clients (such as Apple Mail), adding 10px of the top margin, and giving us a bit of room overhead.
 
 
 
That's the way it is! You just have to do the final test.
 
  

Demodownload 
 Translator Sign Language: The entire translation is carried out in accordance with the original line, and in the translation process a slight personal understanding of the technology. If the translation has the wrong place, but also please peer friends pointing. Thank you! 
 
 If you want to reprint, please indicate the source: 
 
 English Original: http://dev.tutsplus.com/articles/ build-an-html-email-template-from-scratch--webdesign-12770 
 
 Chinese translation: http://www.w3cplus.com/css/ build-an-html-email-template-from-scratch.html 
 
 

           
Now we add text and set the width of this cell, although they have a lot of white space before, but for security purposes, set the unit to a width of 75%, and the others to 25%.
I also add inline styles to other cells to beautify the text:
It's all there, it's time to clear the border and make him look prettier. The Find/Replace feature of the editor finds the border= "1" as border= "0".
So it looks like it's floating in the white space, it's ugly, so we're going to add the first set of 600px tables:
 
            

             
 
              
   
 
              
 < IMG src=http://www.webjx.com/css/"Images/fb.gif" alt= "the Facebook" width= "height=" "style=" and "Display:block" border = "0"/>  
 
             
  
              
              
             

              
 ®someone, Somewhere 2013
  
By this, our entire cloth has been finished.
 
 
The Consortium verifier verifies that there is no problem with our code. If you have no problem with the code, it will say that you have passed the validation.
Next we test it through litmus to make sure our email is working properly. Here's a summary of my tests:
 
 
<TD style= "color: #153643; Font-family:arial, Sans-serif; font-size:24px; " > lorem ipsum dolor sit amet! 
               
              
 ®someone, somewhere 2013
 Unsubscribe to this newsletter instantly