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

Source: Internet
Author: User
Tags add empty insert mail query valid all mail client

Article Introduction: build an HTML email template from scratch.


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:

    <! 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 ">     <head>         <meta http-equiv=" Content-type " Content= "text/html; Charset=utf-8 "/>         <title>demystifying Email design</title> <meta name=" viewport "         "Width=device-width, initial-scale=1.0"/>     

    Next we can start building the rest of the structure.

    <body style= "margin:0; padding:0; " > <table border= "1" cellpadding= "0" cellspacing= "0" width= "100%" > <tr> <td> hello! </td> </tr> </table> </body>

    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!":

    <table align= "Center" border= "1" cellpadding= "0" cellspacing= "0" width= "" style= "Border-collapse:collapse"; >     <tr>         <td>         hello!         </td>     </tr> </table>     

    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:

    <table border= "1" cellpadding= "0" cellspacing= "0" width= "100%" >     <tr>         <td>             <table align= "Center" border= "1" cellpadding= "0" cellspacing= 0 "width=" style= "Border-collapse:collapse"; >                 <tr>                     <td>                         hello!                     </td>                 </tr>             </table>         </td>     

    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.

    <table border= "1" cellpadding= "0" cellspacing= "0" width= "100%" > <tr> <td> <table align= "center" Border= "1" cellpadding= "0" cellspacing= "0" width= "" style= "border-collapse:collapse;" > <tr> <td> Row 1 </td> </tr> <tr> <td> Row 2 </td> </tr> <tr> &L T;td> Row 3 </td> </tr> </table> </td> </tr> </table>

    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 .

    <table border= "1" cellpadding= "0" cellspacing= "0" width= "100%" >     <tr>         <td>             <table align= "Center" border= "1" cellpadding= "0" cellspacing= 0 "width=" style= "Border-collapse:collapse"; >                 <tr>                     <td bgcolor= "#70bbd9" >                         Row 1                     </td>                 </tr>                 <tr>                     <td bgcolor= "#ffffff" >                         Row 2                     </td>                 </tr>                 <tr>                     <td bgcolor= "#ee4c50" >                         row 3                     </td >                 </tr>             </table>         </td>     </tr> </table>     

    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.

    <TR><TD style= "font-size:0; line-height:0 "height=" > </td></tr>

    Also note that using padding on the TD tag is safe, but they are more unpredictable on div or P tags.

    So we're going to use some inline CSS to add an padding to the cell. Then we'll insert our picture, add alt attribute text and style= "Display:block;" This is a commonly used to fix some email client pictures below the blank spacing. We center the image by adding align= "center" to the TD tag. We will also add an important ALT tag, because after our mail is loaded, in most cases the picture is turned off.

    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.

    <TD align= "center" bgcolor= "#70bbd9" style= "padding:40px 0 30px 0;" >     <img src=http://www.webjx.com/css/"images/h1.gif" alt= "Creating Email Magic" "Width=" height= "230" style= "Display:block"/> </td>            

    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.

    <TD bgcolor= "#ffffff" style= "padding:40px 30px 40px 30px;" >     <table border= "1" cellpadding= "0" cellspacing= "0" width= "100%" >         <tr>             <td>                 Row 1             </td>         </tr>         <tr>             <td>                 Row 2             </td>         </tr>         <tr>             <td>                 Row 3             </td>         </tr>     

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

    <table border= "1" cellpadding= "0" cellspacing= "0" width= "100%" >     <tr>         <td>             Lorem ipsum dolor sit amet!         </td>     </tr>     <tr>         <td style= "padding:20px 0 30px 0;" >             lorem ipsum dolor sit amet         ... </td>     </tr>     <tr>         <td>             Row 3         </td>     

    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.

    <table border= "1" cellpadding= "0" cellspacing= "0" width= "100%" >     <tr>         <td width= "valign=" Top ">             Column 1         </td>         <td style=" font-size:0 line-height:0; "Width=" >         </ td>         <td width= "valign=" "Top" >             Column 2         </td>     

    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.

    <table border= "1" cellpadding= "0" cellspacing= "0" width= "100%" > <tr> <td width= "valign=" to                     P "> <table border=" 1 "cellpadding=" 0 "cellspacing=" 0 "width=" 100% "> <tr> <td> <img src=http://www.webjx.com/css/"images/left.gif" alt= "width=" 100% "height=" 140 "style=" display:block; "/> </td> </tr> & lt;tr> <td style= "padding:25px 0 0 0;"             > Lorem ipsum dolor sit amet ... </td> </tr> </table> </td> <td style= "font-size:0;             "Width=" >   </td> <td width= "line-height:0" valign= "Top" >                     <table border= "1" cellpadding= "0" cellspacing= "0" width= "100%" > <tr> <td> <img src=http://www.webjx.com/css/"images/right.gif" alt= "" width= "100%" height= "140"                     style= "Display:block"/> </td> </tr> <tr> &LT;TD style= "padding:25px 0 0 0;"             > Lorem ipsum dolor sit amet, ... </td> </tr>  </table> </td> </tr> </table>

    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.

    &LT;TD bgcolor= "#ee4c50" style= "padding:30px 30px 30px 30px;" > Row 3 </td>

    In this cell, we will nest a two-column table.

    <table border= "1" cellpadding= "0" cellspacing= "0" width= "100%" >     <tr>         <td>             Column 1         </td>         <td>             Column 2         </td>     

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

    <TD align= "Right" >     <table border= "0" cellpadding= "0" cellspacing= "0" >         <tr>             <td >                 <a href= "http://www.twitter.com/" >                     <img src=http://www.webjx.com/css/"Images/tw.gif" Twitter "width=" height= "style=" Display:block; "border=" 0 "/>                 </a>             </td>             <td Style= "font-size:0; line-height:0 "Width=" > </td>             <td>                 <a href= "http://www.twitter.com/" >                     < IMG src=http://www.webjx.com/css/"Images/fb.gif" alt= "the Facebook" width= "height=" "style=" and "Display:block" border = "0"/>                 </a>             </td>         </tr>     

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

    <TD width= "75%" >     ®someone, Somewhere 2013<br/>     

    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:

    &LT;TD style= "color: #153643; Font-family:arial, Sans-serif; font-size:24px; " > <b>lorem ipsum dolor sit amet!</b> </td>

    I also add inline styles to other cells to beautify the text:

    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 <font> tags to decorate the unsubscribe link. Using both methods is the best way to ensure that your links never appear in the default blue.

    <TD style= "color: #ffffff; Font-family:arial, Sans-serif; font-size:14px; " >     ®someone, somewhere 2013<br/>     <a href= "#" style= "color: #ffffff;" ><font color= "#ffffff" >Unsubscribe</font></a> to this newsletter instantly </td>    

    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:

    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.


    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

    Related Article

    Beyond APAC's No.1 Cloud

    19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

    Learn more >

    Apsara Conference 2019

    The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

    Learn more >

    Alibaba Cloud Free Trial

    Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

    Learn more >

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.