How To Create A Custom E-blast Part 2
In this article I will cover some of the basic specs of building a custom e-blast for direct mail marketing and personal use. If you missed the first post, you can read How To Create A Custom E-blast here in my blog.
Assuming you are already familiar with web design and know that web graphics are built at a resolution of 72 ppi and in RGB color mode, we’ll begin with the preferred size of an e-blast. Best practice of building an e-blast is at a size of 600 px wide and as long as your content needs it to be. If you stay around that size, or even a little bit smaller, you’ll find that your e-blast is compatible with many e-mail clients both desktop versions and web client based (ie. Yahoo!, MSN/Hotmail, Excite, Gmail, etc.) and you’ll even find that it works nicely with newer devices, such as Apple’s iPhone.
You’re probably asking yourself why you would want to design one so “small” when websites are built larger than that, and your monitor is capable of viewing larger resolutions. Well, the answer is simply so that you ensure that your intended recipient is able to see your e-blast as intended on what ever viewing platform they use. Let’s say for a moment that you know that your entire list contains only people with Yahoo! email addresses. Just because they may have a Yahoo! email address doesn’t mean that they necessarily check their email by logging into Yahoo! mail to read it. It could be automatically forwarded to another email address, it could be downloaded to their mail app such as Microsoft Outlook, or Microsoft Entourage, or Apple’s Mail, Apple’s iPhone, Blackberry, or any other device and email reader program that exists. So, being compatible with your audience’s preferred email reading ways is important for usability reasons and to help remove any barriers that may exists to get them to read your message.
Once you’ve gotten the size out of the way, your next question will probably be, what format should this be in and how should I code it. For e-blasts, you will find that you can and should be using JPG images, GIF images (animated or static) or both, along with good old HTML. Most mail readers are able to handle embedded and inline CSS for the styling of text, but not for positioning. You’re best off to use tables, which may contain DIVs, and CSS. The types of things that you can define in CSS that will work well in e-blasts include: both background and font color, widths, heights of tables, table cells and DIVs, borders, font attributes to include sizes, weights, font families (ie. Arial, Verdana, Georgia), text alignment, and padding.
Best practices for mixing images and browser text stems from knowing the limitations and possible outcomes of using them with different email readers. It is best to use both graphics and browser text for many reasons. Some email readers do not display images until you’ve granted them permission to download the graphics. If your e-blast was all graphics, the viewer might never see any text associated with the mail, not click on the download images button, or worse yet they, or their email reader might think that your e-blast is spam. Spammers for a long time, and continually use emails with all images so that they can still displaying words that usually trigger spam software to mark them as spam or delete them because spam software can’t determine if there is “text” represented in the image and it makes it harder for the spam software to catch it as spam. These days, spam software usually automatically marks messages with all images as spam because of this practice. Additionally, some e-blast sending programs allow you to input a text only version for people who either block images, or people with screen readers so that they can still receive the message.
Another best practice for mixing images and browser text is that if you have a background image/texture behind browser text in your e-blast, consider defining a background color too through CSS so that when your e-blast gets to a program such as Microsoft Outlook with versions that do not display background images, your recipient will still be able to read your message. As an example, if you didn’t plan ahead for this and let’s say that you put white text on a dark background image, and when the user reads it in their email reader which doesn’t display background images, they might not see it if the “page” background is white too. White text on a white background has no contrast and therefore can’t be easily read or seen.
Having a healthy mix of images and text is good not only to help avoid spam blockers, but also because it helps make your e-blast lighter in terms of size which will help with loading times. As with any website or e-blast, if it causes your user problems or takes too long to load, your user may become irritated and delete the email or navigate away from your site. So keep in mind that web optimization is a good solution.
The next best thing to do when creating a custom e-blast is to test, test, test it until it’s working correctly and displaying the way you want to on as many email readers as you can and that you have access to. If you don’t already have multiple email addresses, you should at least set one up under different email reader such as Yahoo!, Hotmail, GMail, set up desktop email reading programs such as Apple Mail, Microsoft Entourage, Microsoft Outlook, etc. to also retrieve these accounts and when you send out your test, be sure to include all of your test accounts in those. Only send out your final e-blast to your mailing list only after all testing has been completed and finished. Nothing will look worse than you sending out your e-blast numerous time to your recipient without a valid reason (ie. a significantly incorrect piece of information, such as an event day, time address, etc., price or otherwise important information). A good testing solution for you may be the one offered by Campaign Monitor which allows you to test many mail reading applications all at once.
When you’re ready to send it you have a few options. You can either have a custom e-blast generating program built for you by a company which can be as simple or complex as you wish, or you can use an online service such as Constant Contact or Campaign Monitor that I highly recommend or any other number of providers out there. Each of the online e-blast service providers out there charge for sending e-blasts on their own pricing structure. Find out which one is right for you and offers the features that you want.
To sum up creating a custom e-blast…
Build your e-blast at 600 px wide or less, use JPG images, GIF images (animated or static) or both, and use both images and properly formatted text. Use HTML which may include DIVs. Lastly don’t forget to do cross email reader platform testing to only yourself first before sending out your e-blast to your mailing list.
If you need further consultation, guidance, or even someone to build your own custom e-blast or e-blast sending web based software for your company, consider DesignCarter Interactive Agency to help you with those needs.
Thank you for these great tips.
My experience is as a print designer and previously my flyers use to be attached and sent as .pdfs. I see the great value of using e-blasts instead. What could be an easy transition for an Indesign user to create e-blasts, instead of having to use Dreamweaver? Does CS3 or CS4 provide a conversion tool to html that maintains the integrity of the text and images?
Most e-blast companies distort the resolution of my finish files (.jpg format) when they upload in their system.
Thank you.
Jerry
Hi,
This is a great blog, btw. I need to create an e-blast. I have novice HTML skills at best. I know photoshop and Illustrator fairly well.
How do you add links? How do you make it XHTML in photoshop? Is there Eblast software to buy to for coding?
Thanks!
Edie
In short, you won’t be able to use XHTML for an e-blast, so the best thing to stick with for an e-blast is HTML with tables. Additionally you won’t be able to control positioning through CSS for an e-blast to have it work in multiple email readers, and will only be able to use CSS to define colors, background images, fonts, etc.
If you don’t use an e-blast sending service such as Constant Contact, you’ll need to write a script to take your HTML and encode it properly for email. Otherwise, you can use one of the many services to import your HTML and usually they have proprietary code that you can use to insert variable information, such as email addresses, names, and other things.
If you were going to use Photoshop to help you start the HTML you’ll need, you’ll first want to slice out your design, then choose the “Save for Web” and save all slices with HTML and it’ll output an HTML page for you to begin with. If you’re not familiar with HTML, it’ll be difficult for you to know how to implement the HTML template and how to modify it, add links, etc. You can google information about basic HTML coding if you’re new to coding and you’ll also find quite a few good books to learn from as well.
Hi,
I want to send out a few eblasts with a link to my website to promote myself as a freelance designer. I’ve used Dreamweaver, Photoshop, etc. so I can build it. What I can’t seem to find is how to get the HTML code and such into the email. When I paste the code into the text window, it doesn’t read it as code and just sends it as is. I am on a mac, using mac mail. Is there a better mail software to do this and what are the steps?
Thanks!
Doing an e-blast is going to be tough if you have no web experience in your background, but if you were interested in learning, you could get your design into Photoshop and learn from there.
Next, re-create it in Photoshop or import it, lay some guides to help divide the images into logical areas so that you’re not just creating one large image, then choose your slice tool, and look in the top bar below the menu for “slices from guides” which will create slices from the guides you just laid down.
Next, go to Save For Web in the File Menu and save to a folder somewhere, and in the options, select HTML and Images, then choose Other in settings to adjust them and make sure that you’re not using XHTML. It will export it all to the folder you specified to save it to. Open the index.html file in a web browser and take a look.
Ok here’s my questions. I am very knowledgeable in HTML, CSS. I know how to build tables, effectively use div’s etc. I followed your guide and built it using tables and divs. I used my image as a background image and layed my type on top. It does not need to be sliced as the company i am doing it for does not have an active website…yet. I am allowed to do this as they have hired someone to build the site (i work for a print only company but getting certified in web at night to bring something more of an asset to this company) anyhow i just need to get my code into the email. to be able to send out but first would like of course test it by sending it to a few coworkers personal email address. how do i go from here?
HB,
Your next step is to get a free account with Campaign Monitor, copy and paste your code into a template, walk through setting up a new email campaign, then when you get to the testing part in that process, you can send it to a few email addresses to test it, with up to 5 different email addresses at one time. Then when you’re ready, you can sent it out to your recipient’s list through campaign monitor.
Hi Scott,
At the company I work for I have recently started doing eblasts for clients. I create a jpeg banner (header image) and jpeg banner (footer image)… and then set everything up in Dreamweaver to produce the code. After that, I set it up in Constant Contacts and go through the testing process. Sometimes I feel that it is taking me longer than it should to go through this process though so I am wondering what you think is the average time that should be billed to a client (for designing top and bottom banner images and sending out an eblast). Is there a standard amount of time that you typically bill for? Thank you for your help!
I also have a general question about pricing. The company I am working for is just beginning to get into designing and sending eBlasts as a supplement to standard newsletters, brochures, etc.
Our main concern is how to price the eBlasts. Are there any criteria (aside from design time and number of email contacts) that you might use to determine a price point, or does it all come down to simply how long it takes to design?
Rob,
Eblasts should be priced based on what you’re doing for it. For example, if you’re concepting/designing them, that should be estimated for the total price. If you’re writing copy, developing the eblast (coding), distributing the eblast for the client (Sending), Managing the distribution list or anything else, you should estimate the time for any and all of those and apply your agency rate to that.
When it comes to distributing the eblast, if you use a resource like Campaign Monitor, you can set it up and either let the client send themselves, or you can send for them. You can also mark up the campaign which is usually charged based on number of recipients and depending on the service, a flat rate “campaign” fee.
You would also bill for any expenses you incur for producing and sending the campaign, and if the client has requested analytics for the campaign, that’s yet another billable component to the campaign. Whether you chose to bill them for actual hours or a set price, it’s up to you. Since every project is different, it should be approached and treated as such.
Good luck with your venture into eblasts.
Cam,
I’d bill the client for actual work done. If you estimated a number of hours for the project, then go over on those hours, you should still bill for the actual hours spent on a project and if a client asks why it is different than the estimate, you can explain that the estimate is just that… a guess as to the number of hours for a project and there were more in your project because of it’s complexity (if that’s the case). As you do more of them, you’ll get better at estimating the time spent. I don’t charge a standard amount or have an “average” time because no two eblasts are the same. Every design is different, and as email technology changes (almost monthly in some cases), you need to adapt to that. The eblasts that I work on are more than a “header graphic” and “footer graphic” so each one has an individual estimate.
Can a flash .swf be included in an eblast? When I command+I an existing html file with an embedded swf, emailed it to myself, opened it in mail, I get a “content on this page requires a newer version of Flash Player” message. I have the latest flash Player installed.
Margie,
You cannot use a flash SWF file in an eblast. It will not play and it will flag the e-blast to go straight to most spam filters because flash is in it. If you’re looking for some light animation, you’re better off using an animated GIF, but keep in mind that very few email readers will allow the GIF to animate, and most will just stay on one frame of the animated gif, so if you’re animating an important message, then the user wouldn’t be able to view it. You should also avoid putting important text in the e-blast, if that’s what you were intending, as a graphic because screen readers and email readers that have images disabled by default will not allow the message to be read.
When sending out an e-blast and testing it, you should remember to test sending it out encoded for email readers. You can either “roll your own” encryption script if you’re using a self-made e-blast web app, or you can use any number of email sending services, like Campaign Monitor, which automatically encode the markup for email readers when you send it (whether it be a test to yourself or to your campaign list).