Relationals generates quite a few campaigns to inform its customers about its services or new features. Email campaigns provide the best facility to convey lots of information, and HTML emails are an attractive, finished-looking tool that can really have an impact.
Below is an outline of Relationals very own processes for creating HTML emails. This is best suited for your graphics team, but you may find some value in it when you guide them during the design process.
- Start with a message and goal in mind - Know who you're mass emailing, what their level of interest is, and what will drive their next level of engagement.
- Write the copy first - Be concise. Anything longer than 500 words and you risk overloading the email. 250 words is a great goal.
- Graphics & layout - Adobe Photoshop is used to layout the initial page. Usually we stick with about a 600-700 pixel wide layout. The length of the page should be designed to be dynamic so that it can adjust based on the amount of content you have. Once the initial design is mocked up in Photoshop, slice it up so that you have a minimum set of graphics and that certain columns are properly sliced so when the height changes it will not affect the overall design. Once sliced in Photoshop, save the file as HTML with images which produces an HTML file and a folder of associated linked images.
- Upload images to public website - Next upload the images to a public website (either your corporate site or depending on how many you have, you can also upload it as a Document in Relationals and set to to "Publicly Available"). Also make sure you know what the absolute link is to retrieve each graphic. This is the full URL: "http://www.something.com/..."
- Web Layout - Next, we load the HTML into Adobe Dreamweaver (you can use any HTML editor). When you open the file in Dreamweaver, you see the entire email as a web page and a table with the cells sliced accordinly. My next step is to replace the graphics that are currently linking to my local drive to link to those that are publicly available using the URLs from the previous step. For sections that you want to put text on, remove the graphic entirely. When you do this, some of the layout may get skewed. To remedy this, set all the cells to align to the top, and set the cell width to the same size as the graphic you just removed. Everything should be corrected. If you have an image that is in the background with text in the foreground, make sure you adjust it accordingly.
- Adding Text - Once you've cleaned out the cells and adjusted cell alignment, add the copy. It's a simple copy and paste with some addtional formatting based on what you want the design to look like. Again, the benefit of having true text copy like this is you can also customize and personalize it once it's in Relationals as a Global Template.
- Testing - Save the file, open it in a web browser to make sure it's picking up all the linked images, and test the links. Once that's solid, copy the web source code directly into the Relationals HTML Email Body Field. Make sure you click the HTML checkbox before you paste the code in. Once it's embedded, send a test email to yourself to make sure it looks good.
- CSS Styling - Formatting can be touchy when combining it with HTML email, so a note about referenced CSS style elements. When you copy the raw HTML to the editing window you need to make sure you click the HTML checkbox. You also have to save any editing you do while still in the source mode. If you switch back to preview mode, you will lose the CSS definitions. Alternatively, you can use inline CSS styling.
Obviously, these steps can require both graphic design and web publishing skills. That is probably far more than you should expect from a busy rep or sales manager. So we thought that you might find some value in getting pre-made HTML templates. There are several available on the web. With these starter templates, it's a matter of replacing the graphics, color and content to fit your brand.
We're hosting this topic as part of our Success Series webinars on August 7th @ 12PM Pacific. To sign up, click here: https://www.gotomeeting.com/register/252020925
Comments