Presentation on theme: "How to PRODUCE an email newsletter in HTML using Visual Outcomes and then DISTRIBUTE it PURPOSE - to create a newsletter or message to email to all practice."— Presentation transcript:
How to PRODUCE an email newsletter in HTML using Visual Outcomes and then DISTRIBUTE it PURPOSE - to create a newsletter or message to email to all practice clients, using a combination of images and text. The displays is in the email itself as oppose to being an attachment. PREREQUISITES - Part 6 Visual Outcomes Training Manual referring to Template Manager “How to create Appointment reminder” “How to create Barcode label” Your own website with ftp connection set up and available storage space to upload images used in newsletter; or membership with one of the photo sites, e.g. www.photobucket.com for the same purpose.www.photobucket.com
Visual Outcomes emails these type of messages using HTML protocol. What is HTML?HTML, stands for HyperText Markup Language. It is the language for web pages. HTML is the basic building-blocks of web pages. A message written in HTML can be read in a web browser. What is a web browser?A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web or Internet. The purpose of a web browser is to read HTML documents and compose them into visual or audible web pages. Main web browsers:IE – Windows Internet Explorer (75% of all Internet users) FireFox – Mozilla FireFox (15% of all Internet users) Opera, Google Chrome, Safari - (10% of all Internet users)
Visual Outcomes emails these type of messages using HTML protocol therefore you need to follow basic HTML rules: 1. DO NOT insert image directly to template – an image stored on your PC will not be visible on email reception. Store images on a website e.g. use your practice website, ask your IT adviser or web designer create specific directory to store images. You may upload images to this directory using ftp connection (please ask your IT adviser to set it up for you). Or use one of the photo/video sites to store your images, e.g. www.photobucket.com www.photobucket.com You need to sign up free of charge and you’ll be given tools to upload and access your images.
2. Remember that it is best to display an image with web site resolution – 72 dpi and your message will display image in its real size. Install software to resize image, e.g. PaintNET available at www.getpaint.net or any other similar software (please ask your IT adviser to help you).www.getpaint.net
3. Remember HTML protocol works with image location, so you will need to insert the full path to where the image is stored: a)E.g. Image below in stored on www.photobucket.com photo site in user album.www.photobucket.com This is the full path or location of this image. You will need to copy it from the address window of your web browser to use in template manager when you want to insert this image into your message.
b)E.g. This image is stored on a user website – www.visualoutcomes.com.au in special directory - imageswww.visualoutcomes.com.au Please note that full path includes site name (e.g. http://www.visualoutcomes.com.au) directory name (e.g. images) and image name with file extension (e.g. flowers.jpg)
4. Remember, you want to display images and insert text using a specific design, e.g. 2 columns newsletter or 3 columns message – this is achieved by using tables and table elements. 5. Web browsers have a specific way of displaying fonts – most of them strip all formatting and revert text to basic groups of fonts; therefore it is best to use simple text fonts, e.g. Arial, Verdana, San-Serif. 6. Visual Outcomes does not hold itself out as providing professional web design, therefore newsletters done in Visual Outcomes are basic templates. Newsletters work very well in Outlook and display font, font colour, font size as you want but they lose all font formatting in web mail agents such as gmail, where the font will be displayed as standard Arial, black, size 12. Now you can review how to create a simple 2 column newsletter
Open Template Manager via Navigate/Marketing menu: 1. Select New Template section 2. Click on Create New Template
1. Select Mail Merge basic template 2. Type template name 3. Click Save
The template appears on your screen. Click on Edit button:
Work is done in 2 template sections/bands – Introduction and Detail. 1. Delete PageHeader band by right click on header, select Delete. 2. Delete PageFooter band by same method as above.
Delete all client’s postal address data by selecting all data fields controls and clicking on Delete button on your keyboard.
We want the newsletter to take up all of the template surface - margins are not important as the message is delivered by email, not printed. To delete the margins: 1. Display template properties by selecting MailMerge on Report Explorer window: 2. Find Margins in the Properties window, highlight 100, 100, 100, 100 and type over 0,0,0,0
Create your practice logo image and store it on a website - your practice or public photo site. Remember, most monitors have a screen resolution above 800 pixels in width, therefore, your logo size should be from 500 to 800 pixels wide. Note picture resolution is 72 dpi.
E.g. Practice logo image named practice_logo.jpg and stored on www.visualoutcomes.com.au in images directory. www.visualoutcomes.com.au You may display this image on your web browser by typing the image location into the address bar : http://www.visualoutcomes.com.au/images/practice_logo.jpghttp://www.visualoutcomes.com.au/images/practice_logo.jpg Remember, the image location includes the full path with the image name and file extension.
1. In the Report Tools window click on the Table control. 2. Inside Introduction band (on white surface) draw a rectangle with your mouse to insert the table. Release mouse, table will be visible now. By default it has 1 row and 3 table cells. We need only one cell to hold practice logo image in the place. Delete cell by right click inside cell, select Delete.
1. Click on Picture Box control in the Report Tools window. 2. Draw a rectangle with your mouse inside the table cell, release mouse and the picture box will be visible. 3. Click on the blue arrow on the top RHS corner of picture box to display Picture task window.
Copy Practice Logo image location and paste to Image URL field on Picture Box Task window, or type image location to Image URL field: www.visualoutcomes.com.au/images/practice_logo.jpg www.visualoutcomes.com.au/images/practice_logo.jpg
1.Position client data field control 2.Change the font size
Delete Formatted Text Area control in Details band by a right click inside this control and select Delete.
Insert a table into Details band by the method described above and change it to 2 cells. Left, smaller column will hold images, right, bigger column will bear text.
Remember not all email agents can display images, also some people turn off picture display in their emails, therefore important information in the message or newsletter should be done as text. To type text double click on right table cell and start typing:
In HTML, white space characters such as carriage return, new paragraph and tab either don’t work at all or are limited to 1 space only. Create white space in your template by inserting extra table rows. 1. Select the table by clicking on the table icon in the top LHS corner of the table control. Icon appears when you hover mouse over top LHS corner.
The selected table has blue square handles around it.
Right click inside the selected table, select Insert > Rows Below. Double click inside the new row of cells and delete cells labels.
Insert another row and type second text paragraph.
Insert image into the left column using the Picture Box control from the Report Tools window as previously shown. Image name is ‘green’, it is stored on www.visualoutcomes.com.au website in images directory. www.visualoutcomes.com.au Full path or image location is http://www.visualoutcomes.com.au/images/green.jpghttp://www.visualoutcomes.com.au/images/green.jpg
The Detail band and visible template area can be extended by dragging the handle that appears when you hover the mouse over the lower template edge.
Table rows may be resized. Select a row by clicking inside it while the black arrow appears on the LHS with mouse hover. Selected row has square blue handles around it. Drag handle up or down to resize the row.
If image and text are inserted in the same table row, the vertical dimension of the image will define the vertical size of that row.
Save template, Make Live, close Template Manager. Data/Refresh Entire Data Cache. Now you’re ready to test your template. A good practice is to send it to yourself and review in different mail agents and different web browsers. Send by email and select HTML method in Messaging Wizard.