Hi everyone, and welcome to Tubetorial. I’m Lorraine Nepomuceno.
Sending HTML Newsletters is one of the tried and true methods of Internet marketing. If you have a good list of people who are interested in your news or products, sending them information via email can be very effective.
Now, while you can certainly send out information in text only- which is something I recommend doing anyway- HTML emails can include things like important photos and, maybe most importantly, reflect the same design as your website, for optimum branding.
Before we begin, here are some things to keep in mind:
1. Because different email clients display HTML emails in different ways, keep your code as simple as possible.
2. Always create a text-only version of your email.
3. Publish a web version of the email that people can view in their browser instead.
4. Always use FULL URLs when referencing images in your email.
5. Don’t ever, ever send spam.
So let’s get started creating a basic HTML newsletter.
I always start with a mockup of how I want the newsletter to look. Here is mine. As you can see, it’s very simple- I have a header with my logo, and a few sections beneath that, where my announcements and features will go. The first thing to do, if you have any graphical elements in your design, is to cut it up, and export those. In this case, my graphics are the logo and header, the photo of cupcakes, and this “Thank You” text. I also want to take note of all the colors I’ve used here, so I can easily add it to the code.
Now, I’ll fire up the application I use to write HTML. I use Coda, but you can use any text editor- even Notepad will do.
Coding this is not unlike coding a basic HTML page. Here is a basic layout in HTML. I’ll make this template available for download as well, so you can play around with it. Remember the tips I gave you earlier? You want to keep your code as simple as possible, and remember that you cannot reference external stylesheets. So you want the styles on this page, and you want to use tables for layout.
That’s right. Forget using CSS layouts in your HTML newsletters. You want to go “old-school” and use tables here.
Make sure you include FULL or “absolute” URLs to your images and links. It’s also a good idea to include things like how to unsubscribe… and it’s VERY important to publish a web version that people who can’t see the mailer properly in their email reader can click through to.
Now that the newsletter looks good. I’ll upload it to a directory on my web host server, making sure all the images are online as well.
And finally… we’re ready to send. If you’re using a sending service- like MailChimp, Campaign Monitor, or Mad Mimi, you would simply import this code at this time. You can also use Outlook or Thunderbird.
I’ve sent it to myself, and now to check it in my email.
And there it is. As you can see, because I’m checking it in Gmail, the background colors don’t show up. This is why it’s very important to stick to the most basic coding, because it will never render exactly as you like in all email readers.
The html file is available for download here.