One thing that has been a huge help driving traffic to our ministry websites, is the Email Newsletter.  We have over 12,000 people we email on a monthly basis. We send the emails to our members, students, visitors, and those who have communicated to us through our websites. (nvbc.org, gsbc.edu, and nvpublications.net)  Emails are a great way to keep your church members informed.  They are also an effective and free way to advertise special events or new content on your website.  Every time we send out an email newsletter we get a huge spike in our website traffic. In this blog post I will give step by step instructions on how we create a free email newsletter. There are other ways to do this.  This is not the easiest way to do it.  You could pay or you can find templates already made.  This is the we do because we like the price (FREE) and we like the fact it is totally customizable.  I hope this is a help to you.  An understanding of Adobe Photoshop and Dreamweaver will help to understand the concepts here.  Also, I use an Apple Computer and Mac’s Mail program to email the newsletter.

You may download the Church Email Newsletter Photoshop file here to follow along with this tutorial.

1.  Create the graphics in Photoshop

We create the email the way we want the finished product to look in Photoshop.  I try not to make it overly complicated, planning where I want the text inserted. I design it so that no graphics are behind the text.  I want to be able to have the text re-size without breaking my design.

2.  Slice up the design in Photoshop.

After I am done creating the email in Photoshop, I slice up the graphic (use “k” to select the slice tool in Photoshop).  I try to make as little slices as possible.  Notice the sample below.  Once again, I want to make sure the place where I will be inserting text in Dreamweaver is able to be resized without ruining the design.  The white background where the text is located can resize indefinitely without hurting the look of the email. Also, any where I want to place a link, I make a slice – I also, try to keep these minimal.

3. Save the Photoshop document for web.

After I’m done slicing up the image, I hide the layer that has the text (Lorem ipsum) I will insert in Dreamweaver.  I then “Save for Web.”  (cmd+option+s) I create a folder where I want my html and images and save it.  I usually name the html, “index.html”.  This makes it easier to link to later. (i.e. http://www.moyerphotos.com/email/)

4.  Open the document in Dreamweaver.

I then open the document in Adobe Dreamweaver to make adjustments for email.  Here are the steps I take in Dreamweaver.  First, I center the table with the graphics.  This is done by selecting the table and aligning it center.  Next, I choose my background color.  In the example it will be brown (#A59572) to match the design.  This is done by “Modify Page Properties” (cmd + j).  I then delete the image where my text will be and change the background to white.  Another, better alternative, would be to use the image you just deleted as a background image if it is repeatable.

Next, I create a table inside the empty area to position my text away from the edges.  The table is 1 row and 3 columns.  This keeps the text away from the edges of the graphic.

5.  Format text for email.

The text then must be formatted to your liking using html code.  I have found that email does not like css or anything generated automatically by Dreamweaver.  I use simple html to format the text.

For instance here is what I’m using for the text.  Don’t let this scare you, if you never use code. If it is easier for you, just copy and paste this into your design and change according to your design. (i.e. font-size, color, etc.)

<font face=”Verdana, Arial, Helvetica, sans-serif” style=”font-size:13px; line-height:18px; color:#0000000;”>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis placerat erat eu varius. Fusce felis ipsum, aliquam vitae posuere vitae, commodo et lorem. Sed est dui, egestas sed pellentesque ut, luctus ultricies neque. Sed euismod semper metus sit amet ultrices.</font><br><br>

<font face=”Verdana, Arial, Helvetica, sans-serif” style=”font-size:13px; line-height:18px; color:#0000000;”>
Aenean ut orci enim, aliquam molestie metus. Proin nec erat a augue iaculis accumsan. Aliquam sagittis luctus varius. </font>

After that, I change the background color of anything that may resize.  For instance, I change the background color of the brown images to brown (#A59572) in case they resize due to different sizes of text.  (Certain email programs may change the size of the text.)

Note: the same process can be done to add text at the header and footer of the document.

6.  Add links and upload the files to your website.

Once you are done with the above steps, upload the files to your website.  You are almost done now.  You don’t want to have any attachments on your email, just links to files.  To do this you need to change all links to absolute links.  While the file is still open in Dreamweaver, do a “find and replace” to change all relative links (i.e. “images/index_04.jpg) to absolute links (i.e. “http://www.moyerphotos.com/email/images/index_04.jpg) in your source code.  The find and replace command in Dreamweaver is “cmd + f”.  Below is an example of what I do a find and replace on.

Lastly, in Dreamweaver add any links you want in your email.  In the example, I will add links to my website on the graphic with the button and the graphic with the church.  Make sure that the border is set to “0″ otherwise Dreamweaver adds a dreaded blue stroke around the image.  Upload the file again with the changes and now you’re ready to send it out.

7.  Open the web page in Safari.

Simply open the file in Safari.  In this case it’s http://www.mediaministryblog.com/email.  Hit “cmd + i” or File>Mail Contents of This Page.  It will open email ready to go in the Apple Mail program.

8.  Email your church newsletter.

I always try to test the emails to a gmail and yahoo account to make sure everything works.  If you have another method you use, please share it below in the comments; I would love to hear about it.

You may download the Church Email Newsletter Photoshop file here to follow along with this tutorial.

Here is the finished html newsletter to email.

Link to a North Valley News E-Newsletter.

Michael Moyer