How to Create Your Own HTML Email Marketing
Email marketing can be a powerful tool to increase awareness among large audience groups because it is inexpensive and easy to send out en masse. If you have basic HTML skills, you can code your own marketing emails without investing in a professional web development team. As you design an email, keep in mind usability and the types of devices that your customers will be using to read the email.
Other People Are Reading
Instructions
-
-
1
Sketch out the layout of your email to make the HTML coding process easier. Use a basic table structure. For the easiest coding, make a single-column design with three rows. Place your header image in the top row, the content in the middle row and the footer in the bottom row. Lay out the content with the most important story on top and place a call to action link on the first screen, so that it is immediately visible.
-
2
Save a text document as a .html file and insert the code for your table. For a standard email, use a width that is no more than 600 pixels so that it will fit comfortably in the email browser. Use the code for a simple table <table width="600" border="0" cellspacing="0" > and close the tag with a </table> tag. Depending on the number of rows you want, include the code <tr> <td></td> </tr> to make a row. Place each section of code between the original table tags.
-
-
3
Add a buffer to the table by inserting a cell padding code into the HTML. In the first table tag, include the code cellpadding="0" after the cellspacing code. This will create space around the edges of the table so that text does not run all the way to the edge.
-
4
Type or paste in your content between the <td> and </td> tags, so that it appears in the correct row. Use small, readable blocks of text paired with bold headlines. Place the header tags <h1> and </h1> around the header text. This will make the headlines stand out from the rest of the next. Place the most important story at the top and order the following stories and news items in order of priority. Between each section, insert three tags to make spaces.
-
5
Underneath the first section, place a link with a call to action. This enables you to give readers an action, and ensures that it will be easily visible. To make a link, use the code <a href="http://www.yourlink.com">Call us now!</a>. Insert your link in place of http://www.yourlink.com and replace "Call us now!" with the text you want to appear on the page as the call to action.
-
6
Place your header and footer images in the top and bottom table rows. Use the code <img src="http://www.server.com/image-name.jpg" width="600" height="50" /> and replace "http://www.server.com/image-name.jpg" with the URL of your image and enter in the width and height of your image. You will need to upload the images to your web server, so that they can be accessed by users through the Internet.
-
1
References
- Photo Credit John Foxx/Stockbyte/Getty Images
