Webtools is the email campaign service used by the University of Illinois Urbana-Champaign to create and deploy custom HTML emails. Branded templates are available within Webtools for use by all Grainger Engineering units. These templates ensure that your emails are branded consistently and properly coded to accurately display content across devices and email clients.
Setting Up Your Email+ Skin
The Webtools Skin Designer now supports an 'Illinois Wizard' type for creating a campus branded email skin. These skins implement email and web design standards from the Office of Strategic Marketing and Branding. Follow these steps to set up a skin for your department or unit:
- Login to Webtools.
- Go to More > Skin Designer from the main landing page.
- Select the yellow +Create button at the top right of your screen [Fig 1].
- Select Illinois Wizard from the Email+ Skin options [Fig 2]. Select the Create skin button.
- In the General tab, rename your skin so it can be easily identified. For example, "Grainger Engineering - BioE - Email Skin".
- In the Skin tab, complete the following three sections:
- Header - For the primary label, fill in your department/unit name. For the secondary label, fill in "The Grainger College of Engineering" [Fig 3].
- Social Media - Add links to your department/unit social media channels
- Footer - Select the "Insert Example" example button. Edit the footer content appropriately while following the pattern of the example [Fig 4].
- Grant access or privileges for any person or group that may need to use the skin.
- In the Privileges tab, please add the Marketing and Communications team by selecting engradm-office-communications from the group dropdown. This will allow us to help with any troubleshooting.
Selecting an Email+ Content Template
Follow these steps to use our Email+ templates:
- Login to Webtools.
- Go to Email+ from the main landing page.
- Select the yellow +Create button at the top right of your screen [Fig 5].
- Select Email from Template and choose the template you want to use [Fig 6]. You should see the following options (previews above):
- GCOE - Dept/Unit - Email+ Template - Basic Email
- GCOE - Dept/Unit - Email+ Template - Announcement
- GCOE - Dept/Unit - Email+ Template - Newsletter
- GCOE - Dept/Unit - Email+ Template - Event
- If you don't see these options, please email firstname.lastname@example.org and request access to the templates. Select Continue.
- In the General tab, rename your email and fill in general information fields.
- In the Message tab, edit/replace the content sections with the content for your email. The pre-populated content sections are simply there to get you started. You have complete flexibility to add/remove sections and edit in any way you wish.
- In the Appearance tab, apply your department/unit skin. If you have not created a skin for your department/unit yet, follow the steps under Setting Up Your Skin.
- Follow standard Webtools instructions for adding privileges, sending emails, and running performance reports.
- Contact email@example.com with any questions!
Email Design Guidelines
- Sizing: Templates are 800 pixels wide to provide maximum visibility across email clients.
- Header and footer: Templates include an institutional email header and footer with the primary university logo. Do not use lockups in the header or footer. College, department, or unit names can be identified in your Department/Unit skin.
- Custom images: Templates can accommodate a primary image beneath the header for visuals that are unique to your unit or event. Size primary images to 640 pixels wide (variable height) and include alt tags for accessibility. Use the "Custom" image width setting to define the width.
Email Best Practices
- Assume images will be blocked. Email clients commonly block images, so important information should be built as plain text, not as a design element. If you do have an image, make sure to use an alt tag for the accessibility of users who rely on assistive devices.
- Highlight your message. Put your key message in the upper third of your email to make it immediately visible to your audience.
- Use a single call to action. The focal point of your email should be the action you want the recipient to take.
- Optimize images. For best results with text-based images, use png format.
- Make sure your CSS styles are inline. Most email clients will not keep header styles, so be sure to inline all of your CSS. No email client accepts a separate style sheet.
- Test, test, and test again. While we have made every effort to ensure these templates will accurately display in all email clients, it is always a good idea to test your emails to make sure there are no formatting or display errors.