An email newsletter is a great way to visually engage your audience with specific topic areas or products, or to simply provide a way to keep people up to date with what you're doing. The usefulness of the newsletter lies in its ability to present recipients with links to webpages and landmarks you'd like them to visit, and can be an invaluable way of growing interest in your enterprises. Once the newsletter is set up, updating it will take no time at all.
This tutorial will be in two parts. The first will show you how to create your own email newsletter template, and the second will show how you can email the newletter to your customers, patrons, friends and others. The second part of the tutorial can be viewed here.
KompoZer
To create the newsletter we'll use a simple and free program called KompoZer, which you can download by following the link. KompoZer has a WYSIWYG interface which means it can be used to create an html document visually. So, if you're unsure of html tags, don't worry, KompoZer will take care of it, and you can focus on the design and content of the newsletter.About The Newsletter Example
The newsletter example used for this tutorial is one we set up to respond to bloggers who submit their blog to our sister site, SL-Feeds, and we'll be showing the few techniques we used. These include:- Creating a table.
- Adding an image map
- Adding an image
- Adding text
- Adding links.
Creating The Newsletter
1/ The first time you open KompoZer you'll see this screen with a start up tip window. Close it to see the interface.
2/ This is what you'll see. Drag the right lower corner to resize the UI to make it easier to work with. As you can see, all the main features have their own icon and are clearly labelled.
Creating A Table
Creating tables is the backbone to creating the newsletter and allows us to structure its appearance. To position elements where we want we'll need to create a table and nest tables within it. This is much simpler than it sounds.
1/ Click the Table icon and the window above will appear. The squares in the grid represent the rows and columns in the table. Drag the cursor over the squares to highlight how many rows and columns you want to create and when you're ready click OK.
Here we're creating a simple table of just one row and column, which can be used to nest another table in and can act as a border for the other content if we need to.
2/ Once a table has been created we can determine its size and the spacing of its cells (a cell is one square of a table). Select Table > Table Properties and the above window will open, Select the Cells tab.
As you can see, here we can select both the height and width of the cell as well as how its content is aligned. We do this by clicking the two tabs under Content Alignment to the right. When you've selected the settings you want click OK. The settings you choose can be changed at any time.
3/ We're now going to nest a table within the one we just created. With the cursor placed within the table select Insert > Table from the UI menu, and the Insert Table window will open again.
If we use the Quickly tab as we did before, we can only create a table with six rows, but we now want to create a table with eight rows. To do this select the Precisely tab then enter the number of rows and columns you want to create. Click OK when ready.
4/ Select Table > Table Properties again and this time select the Tables tab. Here we can set the height and width of the table, as well as a border and spacing for each cell. As you can see, we've opted for no border for each cell with a spacing and padding of 20 pixels. The table is also aligned centrally within the first table we created. Click OK when ready.
This is what the table will now look like in KompoZer.
Joining Two Cells
The top row is going to contain a heading for the newsletter, so we need to join the two rows.1/ Click inside the first cell, then hold down Shift and click inside the second cell. The two cells are now selected.
2/ Right click and from the drop down menu select Join Selected Cells.
The top cells will now be joined as one cell, as shown above.
Adding An Image Map
For the header of the newsletter we're going to add an image map. The advantage of this is we can insert links to different parts of one image. If you're not sure how to create an image map then view our YouTube tutorial on Adding Multiple Landmarks To A Second Life Image With Gimp. Just remember to use links instead of Landmarks (although for Second Life you can of course use a mixture of both). Follow the link above to the online newsletter example to see how the image map works in practise.The process is much easier than you might think, but if it seems too daunting for those new to this, you can of course just add an image for the header, and we'll cover this in a moment.
1/ Once you've created the image map for the heading, copy the text (as explained in the video). Now click on the Source tab at the bottom of the KompoZer UI.
2/ This is the only part of creating the newsletter that involves tweaking the html markup, and all we need to do is paste the image map text in the correct place.
If you remember, we nested the table with the top joined cells within a first table. So this means we need to find the second Table tag in the html document. The first tag is highlighted in blue above, and the second is highlighted in red.
3/ The first td tag also highlighted in red represents the first cell of the nested table, so we paste the image map text just after the closing bracket > of this td tag.
4/ After pasting the image map text click on the Design tab at the bottom of the KompoZer UI and you should see your image map in place. Don't worry about the yellow squares under the image as they shouldn't show in the final newsletter.
Adding Text To The Newsletter
In the newsletter we're using as our example, a message is included letting recipients know their blog has been added to SL-Feeds, so we're now going to add that text to our newsletter.
1/ First join the two cells of the row below the header to create a place for the text. Now the text can either be pasted or typed directly into the cell.
2/ To change the font, highlight all the text then select Format > Font and then choose a font from the dropdown list.
3/ Also under the Format menu there are options for selecting font size and font colour.
4/ To add a link to some of the text, highlight the text then click the Link icon.
5/ The above window will now open. Paste the link url in the space provided. Lower down the window there is a space to select if the link in the newsletter is to open in another browser window. When you're ready click OK.
6/ To choose the colour of the link text, highlight it again then select Format > Text Color. The above window will open. Click on the colour you want to use, or add the hex of your choice in the space provided. Click OK when ready.
The link text is now the colour we selected.
Adding An Image
1/ To add images to the newsletter they will need to be stored on an image hosting site. For the purposes of this tutorial Tinypic has been used.First grab the link location of the image, then with the cursor placed in the cell where you want the image to go, click the image icon in KompoZer.
2/ The Image Properties window will open. In the space provided paste the image url, and add alternative text.
3/ To add a link to the image, click on the Link tab in the Image Properties window and paste the url in the space proved. Click OK when you're done.
4/ To align content of cells, including images, select the cells in question then select Format > Align > Center
The images will now look much better placed in their cells.
Now that we know how the images will appear in the newsletter we can adjust the spacing and padding. Select Table > Table Properties and the above window will open again. In the spaces provided adjust the spacing and padding, then click OK.
Changing A Cell's Background Colour
In the cells directly under the images we're goign to add a title for each image and a link to the relevant content. To give the newsletter some style we'll give the cells for the titles a background colour.
1/ Select the cell then select Table > Table Or Cell Background Color and the above window will open.
2/ Making sure the Cell radial button is checked, select a colour or enter the hex of your chosen colour in the space provide. Now click OK.
3/ In the Table Properties window again we add some height to the cell to make it easier to work with.
4/ The image above shows the cell with a background colour. Now we'll add text, a link and change the text colour.
5/ Type the text in the cell.
5/ With the text highlighted, click the Link icon and in the window that opens paste the url. Choose whether or not the link should open in a new window.
6/ Under the Format menu change the text colour and size.
This is all the cells that were to be used for images and their titles completed. Instead of adding an image to the final cell, a list of links was used instead.
Completing the Newsletter
The final parts of completing the newsletter layout involves steps we have already done.
1/ Directly below the last titles we'll add social media icons and a few more links. Firstly we join the two cells and give it a dark background.
2/ We then nest a table within this row. The table consists of two rows and four columns. It is also aligned centrally within the cell of the larger table.
3/ images of social media icons are placed in each cell of the top row of the table. They are then centrally aligned and have the relevant links added.
4/ the cells of the lower row are joined, then a table of one row and three columns is added. Within each cell text and a link is added. The text is sized and given a colour.
5/ Finally, if we are going to offer people a newsletter they must be given an option to unsubscribe. So in the final row, we join the two cells, add the unsubscribe text, align it centrally and resize it. We then add a link to a Google form which gives people the choice to subscribe or unsubscribe to the newsletter.
This is all you need to know to design and create a newsletter of your own. Although knowing something about html markup can be useful, its not entirely essential since KompoZer has a good WYSIWYG interface, and we don't need any complex markup for an email newsletter. The next part of this tutorial will show you how you can send the newsletter to your audience.
