Email Template Style Guide | Kent State University

Email Template Style Guide

Login URL: https://secure2.convio.net/ksu/admin/AdminHomePage

Login User Name: flashlineusername_admin (you must have access granted by Institutional Advancement)

 

Kent State VPN Required If:

  • You are using a Mac
  • You are off campus

Overview

Creating an email using a template can be achieved by following these steps:

  1. Create a new campaign
  2. Create a message within that campaign with the desired email template
  3. Fill out email with proper stylings
  4. Testing

CCI Candid Newsletter

If you are developing a newsletter for CCI Candid, there are some additional style guidelines to follow.


1. Creating a New Campaign

1.1 Click on the Email Campaign button along the top bar

1.2 Click the Create New Campaign button

1.3 Fill out the required information and ensure these two items are selected


2. Creating a Message Within the Campaign

2.1 Return to the email campaign home page

2.2 Click on the campaigns tab

2.3 Find your campaign and click the Manage button

2.4 Click the Create New Message button

2.5 Fill in required information for new message. Select ‘Email Message’ for message type. Select a tentative date so that the email is added to the calendar.

2.6 Fill out information for what will be displayed to recipients of the email (subject, sent from address, etc.)

2.7 Select the appropriate stationary for your email

2.8 Enter the content appropriate for your email. Adhere to Proper Stylings in section 3

2.9 Click the ‘Convert to Plain Text’ button


3. Using Proper Stylings

3.1 Headings

To add headings click on this dropdown

Select the Heading 1 element

3.2 Paragraph Text

For regular body text select Paragraph from the dropdown

3.3 Horizontal Rules

Click on the button with the horizontal line and it will insert a horizontal rule

3.4 Inserting an Existing Header Image

3.4.1 Click this icon to insert an image

3.4.2 To insert an existing image, click the ‘Browse Image Library’ button

3.4.3 Before inserting the Header image, clear out the 600 and 200 from the height and width.  If you don't clear out the height and width, your image will not display properly on mobile devices.  

*For testing purposes, search the image library for "Campus Photo" to view a list of pre-cropped landscape photos that can be used.*

3.5 Inserting a New Header Image

3.5.1 To upload a new image first go to the image library

 

3.5.2 Click the ‘Upload Image’ button

3.5.3 Fill out the required information and click the ‘Upload’ button

**Ensure that the photo being uploaded is 600x200px by using external software (Photoshop, etc.).  Remember to clear out the 600 and 200 from the image box if you're uploading a header image. ** Tutorial on Resizing with Photoshop

3.5.4 Now when you go to insert an image by Browsing the Image Library, your image will be available to select

3.5.5 For additional images, such as thumbnails, you can use the options to customize:  alignment (left/right) and horizontal/vertical spacing.  


4. Testing 

4.1 Return to the email text section by clicking the 'HTML Content' section

4.2 To test the message, add any emails to use for testing in the box and click ‘Send Tests’.   Check your individual email inboxes to ensure the messages are formatted properly.  Don't forget to test on mobile devices!

The top email clients on which you should test are: (Source)

  1. Applie iPhone
  2. Gmail
  3. Apple iPad
  4. Google Android
  5. Outlook
  6. Apple Mail
  7. Outlook.com
  8. Yahoo! Mail
  9. Windows Live Mail
  10. Thunderbird

4.3 After you’ve tested your email, please email Brian Thornton or Wiley Runnestrand in Advancement to ensure your email lists are set up correctly.  Advancement will coordinate the email send process.