Basic Responsive Design Newsletter
With responsive web design (RWD) the web design approach is intended to craft web pages that provide an optimal viewing experience. In other words, to create web pages that are easy to read and navigate with minimal resizing, panning, and scrolling across a wide range of devices; for example from mobile phones to desktop computer monitors using a single web page. We have created our newsletter templates to use the RWD concept and make the end result more be deliverable and user friendly.
One of the first things you will need to concern yourself with relates to the logo image and banner background color, at the top of the newsletter along with the information in the Connect With Us and the Contact Info sections, at the bottom, of the newsletter. For information on setting up these sections of the newsletter, please see the tutorial Responsive Design Newsletter Setup.
In this tutorial, we focus on the three step process it takes to create a newsletter in Relevant Tools. Each time you create and/or update a newsletter you will need to follow all three of these steps.
To begin the process of editing the basic responsive design newsletter, click on "MESSAGES", at the top of the screen. Then, click on the "Newsletters" menu option, in the submenu, at the top of the screen, shown below.
In the screen below, notice that there are 4 newsletter functions. The first three have to do with editing, generating and creating a newsletter message, respectively. Each time you create and⁄or edit a newsletter you will use all three of these newsletter functions. The Upload Files function is only be used every so often to upload images and pdf documents.
To continue with the first step of the process, click on the "EDIT NEWSLETTER" button, shown below, to begin editing the newsletter.
The screen below, the Edit Newsletter Preview screen, should now be displayed. This is a sample of how the newsletter preview screen might look the first time it's displayed. Notice it's packed with helpful information to get you started creating your own newsletters. Some of the helpful information, for example, is the appropriate size for an image, which is 580 pixels by 300 pixels.
Notice that there is an edit item link and an add item link, in the image below. At this point, you can either edit the existing item content or add a new item to the newsletter. You can think of a newsletter item as a separate section of the newsletter each with it's own section title, text content, internet link(s), etc.
To continue, click on either the "edit item" link to edit the existing newsletter item content or to add a new newsletter item, click on the "add item" link.
The screen below, the Edit Record screen, should now be displayed. This screen is where content for the newsletter item is either edited or added depending on which link was clicked on above. The difference between the edit item and add item is the edit item loads the existing newsletter item content into the text boxes while the add item displays empty text boxes. In this example we are editing the newsletter item.
To continue, enter the newsletter item title, subtitle and, text into the title1, subtitle1 and text1 input fields, respectively. If you have an image you would like to include for the newsletter item, click on the "Choose File" button next to pic1 to locate the image on your local computer. The image file will be automatically uploaded to the server later in this process. An internet link and a link title can also be entered into the link1 and linkname1 input fields, respectively.
Once the newsletter item information has been edited and⁄or added, click on the "EDIT NEWSLETTER" button, at the bottom of the screen. The newsletter preview screen will then be redisplayed with the changes to the newsletter, shown below. If you have no further edits and⁄or additions to the newsletter, click on the "DONE EDITING" button, at the top of the screen.
After clicking on the DONE EDITING button, from above, the main newsletter functions screen is redisplayed, shown below, and we are ready for the next step of the newsletter creation process. With that said, click on the "GENERATE NEWSLETTER" button to generate the newsletter.
When the Generate Newsletter button is clicked on, a new tab or window will be automatically opened up in your browser and the complete newsletter will be displayed on your screen, as shown below. The screen will resemble the Newsletter Preview screen but without the edit item and add item links. This version of the newsletter is what the email recipient will receive. If the newsletter needs any changing, simply close the Generate Newsletter window and go back to the Edit Newsletter step to make your changes.
On the other hand, if you are happy with newsletter, simply close the Generate Newsletter window to redisplay the main newsletter functions screen. We are now ready for the third and final step of the newsletter creation process, the Create Newsletter Message step. With that said, click on the "CREATE NEWSLETTER MESSAGE" button, shown below, to begin the process of creating the actual newsletter message that will be sent to your email receipients.
Note: For those of you who have already created a message with the Create Message function in Relevant Tools, this step will be very familiar to you. Conversely, for those of you who have not created a message before, this process is an easy and fairly straight forward process.
After clicking on the Create Newsletter Message button, from above, the Create Newsletter Message screen, shown below, will be displayed on your screen. By default, the From Name and From Email Address information is brought in from the account information and loaded into the From text boxes, respectively; this information can be overwritten here, on this screen. However, the Message Name and the Message Subject need to be entered in the name and subject text boxes.
Enter the Message Name, Message Subject and change the From information, if you so desire, and click on the "CREATE MESSAGE" botton, at the bottom of the screen.
After clicking on the Create Message botton the Test Message screen, shown below, is displayed. Again, by default, the email address information is brought in from the account information and loaded into the text box; this information can be overwritten here, on this screen.
Now, you should always send yourself a test message to make sure the message you are sending looks the way you would like to look. With that said, click on the "SEND TEST MESSAGE" botton.
After clicking on the Send Test Message button, the Test Message Confirmation screen, shown below, is displayed. This screen displays the Message Name and the To Email Address information just to confirm that you have sent the correct message to the correct email address.
Finally, to see that the newsletter was created in your Relevant Tools account, click on "MESSAGES", at the top of the screen. Then, scroll down to the Current Messages section. Here you can verify that the message was created; the most recently created message will always be displayed at the top of the Current Messages section.
In summary, we have shown you the three steps it takes to create a newsletter in Relevant Tools. Each time you create and⁄or update a new newsletter you will need to follow all three of these steps; in other words, creating⁄updating a newsletter is actually a three step process.
If you have any questions, about this process or any of the individual steps in this process, please feel free to contact us any time and we would be happy to answer them.