How to Publish Your Newsletter to Your Website and AWeber

If you like using HTML for your newsletter, you can write your newsletter once on your OM4 website, and then publish it to your Aweber newsletter list.

The benefits of this approach are:

  • they can use HTML formatting to have a great looking newsletter
  • they upload images once to their website and their email newsletter links to those images
  • they can have an archive of newsletters available to clients (current and past)
  • the newsletter content is indexed by Google
  • they can copy the web page newsletter and paste it into their Aweber newsletter without having to reformat any text or reload any images

Here is an example of a client that uses this approach: Undara Newsletter. Visitors who sign up to their newsletter using the sidebar subscription form will immediately get the current newsletter by email, and then get each monthly newsletter as it is published.

If you have ever done newsletters and been annoyed by having to do everything twice, well, we were there once as well.

There is a small amount of setup to get things ready, then it is a simple task each month.

We use some Custom CSS rules to simplify the process. If you don’t understand what CSS rules are, it doesn’t really matter – just follow the instructions and your common sense and you will be fine. But keep in mind this is one of our more advanced tips, so if you need to read it through a few times, don’t be discouraged.

Setting up your newsletter

Do this once, when you set up your Newsletter for the first time. If your newsletter is already setup, you can skip this.

1. Setup your first newsletter as a web page

This is the one off setup for your website.

In your OM4 website, create a page for your current newsletter. The web address for this newsletter will never change, so you can link to it from your menu, sidebar or footer. We will assume you create the page with a permalink of newsletter, so its web address will be yoursite.com/newsletter/

The styles for your newsletter divide it into optional sections. You can have:

  • a newsletter header (for your title, and perhaps a banner image)
  • a newsletter menu (to provide links to your readers)
  • a newsletter body article (you will usually have several of these for each newsletter)
  • a newsletter footer (to close the newsletter)

You need to create a set of styles to use for your newsletter. Here are the ones we recommend, you will need to add these to your Custom CSS rules in the Site Design screen.
.newsletter {width: 550px; line-height: 99%;}
.newsletter a {text-decoration: underline;}
.newsletter-menu {background-color: #FFF; text-align: right; font-size: 90%; height: 30px;}
.newsletter-menu a {color: #FFF; margin-right: 6px; font-weight: bold}
.newsletter-heading {background-color: #FFF; color: MidnightBlue; font-weight: bold; text-align: left; padding: 3px; margin-top: -25px }
.newsletter-heading p {color: #222; font-weight: bold}
.newsletter-body {background-color: #FFF; color: #222; padding: 7px; font-size: 90%; border: solid 1px #D3161E;}
.newsletter-footer {background-color: #FFF; color: #222; text-align: center; padding: 3px; font-size: 90%; }
.newsletter-footer a {font-weight: bold; text-decoration: underline; color: #FFF;}
.newsletter-footer p {color: #FFF;}

You can change the rules to suit your own design.

Structure of Each Newsletter

Each newsletter you create will have a number of sections in it, and you need to use a little basic HTML to create these.

You define each section of the newsletter using a div – this literally divides up the web page into different sections, each with its own formatting rules.

To create your newsletter, copy and paste these divs into your blank newsletter page.

<div class=’newsletter’>

<div class=’newsletter-menu’>
</div>

<div class=’newsletter-heading’>
</div>

<div class=’newsletter-body’>
</div>

<div class=’newsletter-heading’>
</div>

<div class=’newsletter-body’>
</div>

<div class=’newsletter-heading’>
</div>

<div class=’newsletter-body’>
</div>

<div class=’newsletter-footer’>
</div>

</div>

Here is an explanation of what each section (div) is for:

  • The newsletter div is for the whole newsletter – don’t forget it
  • The newsletter-menu div lets you include a set of links as a mini menu at the top of your newsletter – you can leave this out if you want.
  • Each newsletter-heading and newsletter-body pair are used to for a story in the newsletter. Put your heading in the heading div and the article in the body. You can have as many stories in a newsletter as you want.
  • The newsletter-footer div is used for the end of the newsletter – contact details and so on.

Write your newsletter as you would any other web page, just include the content in the relevant section. You can upload images and send them to the editor in the normal way.

After you have published it, create links to it from other pages on your website. You can include links in your menu, your sidebar or your footer.

Publishing your newsletter

Now that you have your first newsletter published to your website (and your style sheet setup) and your Aweber list, doing the next newsletter is straightforward.

1. Archive the Old Newsletter. Go to the existing newsletter web page on your site (for example, yoursite.com/newsletter), copy it and create a new page as an archive copy (for example, yoursite.com/newsletter/April-2008)

2. Using Dashboard, Manage, Pages, open up the existing newsletter (e.g. yoursite.com/newsletter) page for editing. Replace old story items with new ones

  • Each story has a div with class=’newsletter-heading’ and then a div with class=’newsletter-body’ – delete the text for the old stories and create new ones.
  • New images are uploaded to the website and placed in the story as you would for any Wordpress image.
  • Images should be sized correctly before being uploaded so they fit will in the email newsletter. This usually means a width of 150px to 200px at most.
  • The newsletter-header and newsletter-footer will usually stay the same for each issue.

3. Save yoursite.com/newsletter.

Now the website work is done. Time to update Aweber

4. Open Aweber, change to your newsletter list and the Follow Up Message

5. Copy the HTML from the web page, excluding the header and footer (so this is just the stories, complete with images, classes etc). In Manage, Pages, you can click the HTML (or Code) tab to see this.

6. Go into the HTML version of the follow up message, switch from Design view to HTML view. Find the old stories (between the header and footer) and delete them – they use the same divs for sections as your web page. Paste in the new stories. Save.

7. Go to the text only version. Copy and paste the text. An easy way to do this is by viewing the web version of the newsletter, copying the text, and then pasting it – this ensures there is no HTML formatting.

8. Save the follow up message, check spam score, and send a test copy of the email to yourself.

All done.

The reason you can just copy/paste from the website to Aweber is that the CSS for the classes is the same in both the Wordpress web page and the Aweber HTML template.