CiviCRM for The Giving Circle. Bulk Mailing Tips & Tricks

Transcription

1 CiviCRM for The Giving Circle Bulk Mailing Tips & Tricks By Leo D. Geoffrion & Ken Hapeman Technology for the Public Good Saratoga Springs, NY Version 1.1 5/26/2013 Table of Contents 1. Introduction Message Headers Message Footers Composing the message body Adding images Adding hyperlinks ADA Compliance... 8 Page 1 of 8

2 1. Introduction This guide supplements the Managing Mailings guide by offering advice on how to compose bulk mailings. This document is more of a collection of specific techniques than a comprehensive guide on all of the features. Messages are typically composed in both plain-text and html-formatted formats. Some users have set their preferences to require plain-text but this is generally very rare. When someone has not set a preference, then both formats are sent within the single message. The recipient s program then chooses which to display based on preference settings within the client program. 2. Message Headers The message header appears at the top of all bulk s sent by CiviCRM. It does NOT appear in any informal messages sent through CiviCRM. CiviCRM supports two separate headers one for plain text s and one for htmlformatted s. Unfortunately, the editing tools for the html-formatted header are inadequate, requiring users to compose the header in raw html code. Only a person experienced in html-editing should attempt to manipulate the header. At present, T4PG has disabled the message header, offering you the freedom to use whatever header you wish for each mailing. The header template is edited via the mailings drop-down menu. Users must have administrative privileges in order to edit the header and footer templates. Page 2 of 8

3 3. Message Footers The footer appears at the bottom of each bulk . The CAN-SPAM act of 2007 requires that the footer include both an unsubscribe option that permits recipients to opt-out of all future bulk mailings along with a contact address for the sender. While there is no actual punishment for violating this law, all reputable mailers adhere to the requirement. Footers are edited in the name manner as the headers. The current footer for plain-text s is: to unsubscribe: {action.optouturl} The Giving Circle {domain.address} The token {action.optouturl} substitutes the web link to the unsubscribe page. The token {domain.address} substitutes the organization s address. This address information is set via Administer -> Communications -> Organization Address and Contact Info. Users must have administrative rights to edit this information. The current footer for html-formatted s is: To unsubscribe from The Giving Circle mailings: <a href="{action.optouturl}">unsubscribe</a> <br/> <br/> The Giving Circle<br/> {domain.address} This contains essentially the same information but in an html formatted layout. The anchor tag <a href= >text</a> turns the text into a web link to the address set by the href = tag. <br/> inserts a line break while < > inserts a space FYI: The structure <br/> <br/> is used to create a double-space break instead of simply <br/><br/> because some browsers will ignore a break command if there is no text preceding it. Page 3 of 8

4 3. Composing the message body The message body is where you compose the message itself. Authors should take time to become proficient with the included html-editor. The top strip contains editing commands: These offer the following commands: Changes text rendering to Bold, Italic, or underlined. Clicking a second time cancels the action. Use underline sparingly since most users expect underlines to be links to other web resources. Changes the text font. It offers only the web safe fonts those included in nearly all web browsers. Changes the text size. Changes the color of the text or the background surrounding the text. Converts text into a hyperlink, or clears an existing hyperlink. Use these when you want to link to other pages or web sites. Inserts an image (photo or graphic image), inserts a horizontal line, or an emoticon into the text. Insert a numbered list, a bulleted list, or outdent or indent the text. The last item adds quoted text text that is displayed exactly as entered. Paste as plain text (no formatting), paste from MS Word or check spelling. Paste from Word is provided because Word often inserts large numbers of superfluous html formatting commands that can (and should) be stripped from the message text. Erase all formatting from a block of text. This is very handy when pasting from another document results in ugly formatting. Page 4 of 8

5 Undo the previous command or redo the previous command. These are handy when testing whether you like the effect of a particular formatting. Source displays the message in raw html. It is handy for learning html or repairing unusual problems. The next displays a preview of the message, while the last one displays online help. 3.1 Adding images Clicking the image command opens a special dialog box for inserting an image into the message. Images are pretty much anything that is not text. Page 5 of 8

6 If you are adding a standard item, such as the organization s letterhead image, click Browse Server to see if the image is already loaded into CiviCRM. This opens a second window displaying all of the previously-used images. In this example, only one image had been previously loaded. If one matches your need, double-click it to select that item. If the image is not already loaded, close the Browse Server window and click Upload to add the image to the server. You should always include an Alternative Text for each image since this is a key element for accommodating disabled users (AKA ADA-compliant ). This text usually consists of a brief description of the image for those unable to view it. You can now fine-tune the height and width of the image. Incidentally, it is generally better to size the image correctly in a graphic editor than to rescale it here. Browsers download the original image and then resize it based on the settings. Thus, if 3000 by 6000 pixel image is resized to 300 by 600, the browser will incur the cost of downloading the large image only to ignore most of that detail. Page 6 of 8

7 The border box adds a black border around the image. The number entered is the width of the border in pixels (borders larger than 4 pixels are ugly). HSpace and VSpace adds blank space around the image. Alignment impacts on text flow. It places the image at the left or right of the page with the text flowing around the image. When left blank, the image breaks the text layout. The Link tab allows you to turn the image into a hyperlink. The user can then jump to the linked page by clicking on the image. The Advanced tab contains exotic items intended mainly for graphic designers. 3.2 Adding hyperlinks Hyperlinks are images or text that, when clicked, jump to another web page. By convention, hyperlinks are always underlined and colored blue. Creating links is easier if you have two browser windows (or tabs) open. Use one to compose your message and the other to locate the target for each hyperlink. First, type the text that should become the link. Select that text and then click the hyperlink command button. Now, use the other window or tab to browse to the desired target for this hyperlink. Copy the URL and then paste it into the URL box in this form. Don t forget to adjust the Protocol box between and as needed. You can also use Link Type to add an link. This is one where clicking the text jumps to the user s preferred program to compose an message. The link can preset the recipient, message subject, and even the message body. The user, however, is free to override or edit this information before sending the message. Page 7 of 8

8 4. ADA Compliance The Americans with Disabilities Act requires that all public agencies make reasonable accommodations for disabled individuals. While this has no formal application to small local nonprofits, it remains good practice to compose messages that are ADA compliant. This includes: Messages easy to read by the elderly whose vision may be substandard. Messages easy to read by the blind who employ special adaptive readers. Messages easy to read by individual where garish flashing images can trigger seizures or be very disturbing. Messages easy to read by deaf persons who may not be able to listen to an embedded audio. Fortunately, nearly all of the ADA compliant changes are consistent with good aesthetic web design. Being compliant actually results in cleaner, better messaging. Some recommendations: Always include alternate text for images. The alternate text tells what the image contains for those unable to see the image. It also displays whenever a browser malfunction makes the image unavailable. Always make text readable. Some designers prefer to superpose text over a colorful background image. While this looks slick, it may make the text very difficult to read by the elderly with vision problems. Always make hyperlinks self-evident. The visible text for a hyperlink should always be a clear indicator of the linked content. For example click here to read the financial report is less informative than simply Read the financial report. This simple change has a dramatic impact on readability for the special devices used by the visually impaired. Avoid garish text presentation. Excessive use of colored text, flashing text, strange text fonts, unusual text sizes may demonstrate your mastery of html formatting but actually degrade the readability of the message itself particularly for anyone with visual problems. Do not depend on images and embedded audio for your primary messaging. Your key messaging should be in the text itself, not solely in the images or embedded audios. Otherwise, those unable to hear the audio or unable to view the image will be unable to receive your message. Images should supplement the message not be the primary message itself. Page 8 of 8