Creating and Delivering HTML E-mail Blasts

By CRAIG KUNCE

E-mail marketing strategies are great, but they need to be put into a visual form that delivers the message along with your brand. This is where the graphic designer takes over and shines.

I create my e-mail blasts using html, css, and Dreamweaver. There are a few tricks I've learned along the way that I'll share here.

Let's open Dreamweaver and begin.

 

Creating an E-mail Blast

  1. Create a new web page in Dreamweaver.
    I use the default settings:
    Page Type: HTML
    Layout: <none>
    DocType: XHTML 1.0 Transistional
  2. After the page is built, click the Code button in the upper left corner
  3. The code should look like this:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    </head>
    <body>
    </body>
    </html>
  4. I like to tweak mine to look like this:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>E-mail Marketing Strategies</title>
    <link href="http://www.crushedcarbon.com/cc_newsletter_template.css" rel="stylesheet" type="text/css">
    <link rel="shortcut icon" href="http://www.crushedcarbon.com/favicon.ico"
    </head>
    <body>
    </body>
    </html>

    (Notice that the links above are absolute links--meaning it includes http://www and the path to the folder and file. All the links in my e-mail blast have to be absolute. This is imperative for my emails to work when they're sent.
    Basically, what happens is the email files and design elements are always located on my hosting server (crushedcarbon.com). When the very small file containing only the e-mail's html code is sent as an e-mail, it reaches across the web and retrieves the support files--css file, images, web fonts, etc.) The email program then interprets the support files, builds the email and displays it visually in the email preview window. Efficient, and pretty fancy.
  5. Next, I design my email blast in html/Dreamweaver. Here's what mine looks like:
    email blast sample

  6. This tutorial assumes that you are capable of designing your own html-based email blast. If you're not, you can hire it done, or begin to learn how to create an html-based web site (same as an e-mail blast, only narrower) with the web design tutorials above.
  7. I keep all my email blast web files in a folder inside my company's main web site folder. It sits on the same server as my main web site and makes it easy to keep track of.
  8. A few additional tips and reminders to remember when you're creating your email blast:
    • Limit email blast with to 600 pixels wide. This size works well with most e-mail apps and is suggested by most e-mail companies and online e-mail delivery services.
    • Keep length reasonable. Don't have customers scrolling forever.
    • Try to limit your main content to 2-3 points. I like to focus each e-mail blast on just one main topic. I may add a few bullet-pointed reminders as secondary elements, but don't try to deliver your entire web site in one tiny email—it's too confusing.
    • Be sure ALL your links are absolute links (include the http://www.yourwebsite.com/) then the path to the folders and/or files.
    • I prefer to use pixels for all my measurements when creating email blasts. There is less room for error is your customer's email application has increased, decreased, or altered the fonts in any way.

      If you use pixels already, that's fine. I mention this because many--progressive?-- web designers only design using proportional or flexible measurements (em or %) when designing web sites.

      For e-mail blasts though, I've found pixels are better.
    • Expect different results from different email apps. This can be frustrating, but it is a reality. Just like your web site designs, you can't please every browser, all the time. I have had to simplify my e-mail blast designs to make sure they are as readable in Outlook as they are in Safari and Chrome.
  9. Once your design is complete, upload it to your web hosting company's server (or your own if you have one) and test it in a regular browser. Pretty cool. Now you have your very own e-mail blast!
  10. Now, you need a way to deliver it to a list of customer e-mails. I strongly recommend you use a third party service to do this. For small businesses and organizations there are several great, free options. Constant Contact is a popular choice, but I prefer Mail Chimp. It is an extremely user-friendly web site an they offer free usage, with lots of options. The free service account does have limitations, but you can add more bells and whistles once you start making serious money.
  11. My next step was to create my Mail Chimp account and use their user-friendly set up buttons to:
    • Import my email list of customers
    • Import my e-mail's html code directly from the url I test it on (great feature!)
    • Mail Chimp also allows me to test it again by e-mailing it to myself and seeing what it looks like in a real e-mail app window.
    • I can also preview it in Mail Chimp's preview window.
    • When I like what I see, I simply schedule the delivery date and time for that e-mail blast. That's it.
  12. Once the email is delivered, I get to go to mail Chimp and check out how it's working. There are a number of helpful measurements including:
    • How many people opened your email—and how many times they opened it
    • How many people clicked on your links—and which links
    • How many people unsubscribed

 

I hope this tutorial helps you and your business on your way to reaching your customers with e-mail marketing. If you can learn to create the e-mail blasts by yourself, with Mail Chimp's help, the cost of this advertising is virtually free.

Great price!