Webpage Email with Graphics
23Jan09
Problem Solving aka work-around
by Stacey Plant
I do not want to depend on a third party to deliver my html emails so here is what I did. I went to the html stationary that Microsoft Outlook uses and added my custom webpage to that same directory. Now I can pull up my own “stationary”, newsletter or special announcement and hit send like any other email. There are a few tricks so pay close attention and don’t stop reading yet.
You will need a basic understanding of HTML code. A great place to start learning HTML is: http://www.w3schools.com/
Differences between webpage development for websites and email.
- All links including image links should be referenced through an absolute path containing the root directory and all other sub directories required. You cannot “attach” an image in an HTML email. They must be hosted on a web server somewhere like iWeb at TTU. Example: <img src=”http://www.tntech.edu/institute/images/banner.jpg width=”550″ height=”429″>
- Tables with minimal widths must be used to accommodate the average email client preview pane. 500-600 pixels is the maximum width you should use. Use a simple layout like two column with one row across the top and one row across the bottom. Spanning columns to merge cells for rows does not play nice in the Lotus Notes email client. No more than one or two please.
- Major tags like <HTML> and <BODY> cannot be styled with fonts, colors or background images. Web email clients like gmail and yahoo will strip out the major html tags so they do not interfere with their pages. You will need to create one large table with 100% width to wrap around all parts of your email and specify the background color there.
- CSS must be embedded inside the body tag, not the head tag for the same reason as above.
- Your email should also be mirrored on your own website as an alternative method to viewing it’s contents.
Where do I begin?…………………………………
We will use Dreamweaver for developing but you can use a simple text editor for pure HTML coding if you like.
- Download the email templates zip folder from MailChimp http://www.mailchimp.com/resources/templates/. Extract all files to a folder on your site. Example: My Documents/Websites/HtmlEmail/
- Open html_email_basic_template.html in the split pane view of Dreamweaver.
- Notice the CSS styles are nested inside the body tag. This is usually put within the <head> tag of most WebPages but must be placed with the <body> tag. Gmail, Yahoo, Hotmail, for example, will strip out <html>, <head> and <body> tags to insert their own. Everything must be defined after the <body> tag to insure proper display.
- Notice the green background color is defined in the outside table with a width of 100% as bgcolor=‘#99CC00’
- To change the background color replace the hexadecimal code in the code view pane. In Dreamweaver you can delete =‘#99CC00’ and begin retyping =‘ and a color chart will automatically pop up for you to choose a color.
Make sure you make the same change inside the <body> tag and the first <table> tag.- Create your own banner image making sure that it is exactly 550 pixels wide. It can be any height and must be in the format of .jpg or .gif. Replace the current Acme Bananas image by double-clicking on the image in the design view pane. You must add the absolute path to this image.
Example: http://iweb.tntech/facultyName/images/banner.jpg.- Headers and subtitles are formatted with <span> tags around the text. Font-size, font-weight, color, font-family and line-height can be changed to fit your scheme in the code view pane. Highlight and replace the text in either the design view pane or the code view pane.
- Make your email available to view in a web browser by linking to the identical page on your website attached to the phrase “View it in your browser” at the top.
Now for the work-around using Microsoft Outlook……..
- Locate the stationery folder for Microsoft Outlook. This is usually
located in the following file directory:- My Computer >> Local Disk C: >> Program Files >> Common Files >> Microsoft Shared >> Stationery
- Copy your html document to this folder.
- Open Microsoft Outlook and select the Actions Menu on the top toolbar
- Select New Mail Message Using and then select More Stationery
- Browse to locate your file by name and send yourself an email as a test. Test this email in as many email clients as you can find before sending a mass email to your audience.
- Make sure you have also uploaded the same page to an accessible website which is linked to in this document.
That’s it. To html email or not to html email, that is the question. The choice is yours.
Filed under: Email, Software, Workshops | 2 Comments
Tags: Graphic Design, HTML, HTML email, web
Food for Thought
Viewpoint #1: Visual consistency in your electronic communication through email and websites will keep your audience in touch. Having the same look and feel in your emails that your website offers brings a sense of familiarity and fosters acceptance.
Viewpoint 2: “Email was invented so people could quickly exchange text messages over fast or slow connections, using simple, non-processor-intensive applications on any computing plawtform, or using phones, or hand-held devices, or almost anything else than can display text and permits typing.” Jeffrey Zeldman
Your blog is amazing, i first landed to another post but then get interested and thought, i will just look a little more arround to see what else i can find out about such stuff