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.
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 1].
- Select Email from Template and choose the template you want to use [Fig 2]. 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 email@example.com and request access to the templates.
- In the General tab, rename your email and fill in general information fields.
- In the Message tab, click the Banner content section to replace the placeholder text with the name of your department or unit [Fig 3].
- In the Message tab, click the Social Media/Pre-Footer content section to edit your address, contact information [Fig 4].
- Click the Dept Example button in the editor to auto-populate text.
- In the Message tab, edit/replace the content sections between the Banner and Pre-Footer 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 between the navy bands for Banner and Pre-Footer.
- Follow standard Webtools instructions for adding privileges, sending emails, and running performance reports.
- Contact firstname.lastname@example.org 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 placed as text in the navy content sections for Department/Unit Name and Footer.
- 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.