You are here

Design & HTML Stationery

Version 2.1.0 (View the Changelog)

Use these design templates as a starter for your HTML e-mail designs. While these templates are advanced in nature, once you have completed your redesign and styling changes, and used in conjunction with the HTML E-mail Editor Tool, it's easier to get great looking e-mails than ever!

Please note using these templates requires the use of the PreMailer CSS "Inlining" tool, which greatly reduces your workload for building e-mail, as well as increasing visual reliabilty across e-mail clients. Use of these templates without "inlining" your styles will produce poor results in many e-mail clients including GMAIL, HotMail and others.

A suggested workflow is as follows:

  1. Download one of these template packages.
  2. Change the HTML and CSS  to redesign and style to brand your e-mail for your college or department.
  3. Load the HTML into the HTML Editor Tool and revise content, images and links. Add HTML snippets for small structural editions to your design. (Contact James Farris for access)
  4. Copy HTML source code into the PreMailer "inlining" tool.  (Be sure to click the "Don’t remove <style> and <link> elements" option)
  5. Copy the processed code out of PreMailer into the Convio HTML Message area.
  6. Choose to use either a Blank, Full-Width Blank, or create your own custom stationery to use with this message.
  7. Send your message!
 

1-Column

  • 600 wide
  • Top Title bar
  • Tall Banner bar
  • Housekeeping Links bar
  • Web Page view text
  • Content bottom bar
  • Expandable background fills entire e-mail background
  • Style left-side expandable column unique from the right-side expandable column
  • Centralized CSS. Style like a web page, then PreMail it. Saves you time with reliable results!
  • UC Berkeley Seal branded footer
  • Full set of Social Media icons
  • Fully Commented code and examples
  • ReadMe.txt file for usage and tips
  • and more....

 

Download! SKILL LEVEL: BASIC

 

Page Types: 
 

2-Column: Right Sidebar Small

  • 640 wide
  • Right Column Narrow Sidebar 130 wide
  • Top Title bar
  • Banner bar
  • Housekeeping Links bar
  • Web Page view text
  • Content bottom bar
  • Expandable background fills entire e-mail background
  • Style left-side expandable column unique from the right-side expandable column
  • Centralized CSS. Style like a web page, then PreMail it. Saves you time with reliable results!
  • UC Berkeley Seal branded footer
  • Full set of Social Media icons
  • Fully Commented code and examples
  • ReadMe.txt file for usage and tips
  • and more....

 

Download! SKILL LEVEL: BASIC

 

Page Types: 
 

2-Column: Left Sidebar

  • 750 wide
  • Left Column Sidebar 240 wide
  • Top Title bar
  • Banner bar
  • Housekeeping Links bar
  • Web Page view text
  • Content bottom bar
  • Expandable background fills entire e-mail background
  • Style left-side expandable column unique from the right-side expandable column
  • Centralized CSS. Style like a web page, then PreMail it. Saves you time with reliable results!
  • UC Berkeley Seal branded footer
  • Full set of Social Media icons
  • Fully Commented code and examples
  • ReadMe.txt file for usage and tips
  • and more....

 

Download! SKILL LEVEL: BASIC

 

Page Types: 
 

2-Column: Right Sidebar

  • 750 wide
  • Right Column Sidebar 240 wide
  • Top Title bar
  • Banner bar
  • Housekeeping Links bar
  • Web Page view text
  • Content bottom bar
  • Expandable background fills entire e-mail background
  • Style left-side expandable column unique from the right-side expandable column
  • Centralized CSS. Style like a web page, then PreMail it. Saves you time with reliable results!
  • UC Berkeley Seal branded footer
  • Full set of Social Media icons
  • Fully Commented code and examples
  • ReadMe.txt file for usage and tips
  • and more....

 

Download! SKILL LEVEL: BASIC

 

Page Types: 
 

3-Column Layout

  • 750 wide
  • Left Column Sidebar 240 wide
  • Right Column Narrow Sidebar 130 wide
  • Top Title bar
  • Banner bar
  • Housekeeping Links bar
  • Web Page view text
  • Content bottom bar
  • Expandable background fills entire e-mail background
  • Style left-side expandable column unique from the right-side expandable column
  • Centralized CSS. Style like a web page, then PreMail it. Saves you time with reliable results!
  • UC Berkeley Seal branded footer
  • Full set of Social Media icons
  • Fully Commented code and examples
  • ReadMe.txt file for usage and tips
  • and more....

 

Download! SKILL LEVEL: BASIC

 

Page Types: 

 


Original E-mail Starter Stationery

Original E-mail Stationery (Version 1)

HTML stationery templates for e-mail.  1st generation. You are not advised to use these templates, but we provide them for your convenience. Please use the new stationery (Version 2) to begin your HTML designs.

 

Page Types: 

 

Page Types: