Skip to main content

Create a Responsive Email Header

July 14, 2014
Create a Responsive Email Header in Dreamweaver
  1. Create blank page. Use Split View - Classic Layout
  2. Insert table. [3 Rows; Table Width-Blank; Border Thickness-1px; cell padding-.25; insert caption] 
  3. Change Table to Responsive Design. - insert or change in code area <body><table border="1" width="100%" style="max-width: 800px;" > Note:  Use <table border="0"> if you do not want to view the border.
  4. Insert Image in Header*. In first table cell/row: Common Tab / Image>Image Placeholder  [click OK]
    1. Image source must be from a publicly accessible link.  Upload PNG file and save image to your own Personal User Folder in Phoenix College website. View My Account > File Browser> [choose user (example for 35: http://www.phoenixcollege.edu/user/35/imce)] Upload> [choose file - do not select size] > [double click on image to choose image url] example:  "http://www.phoenixcollege.edu/sites/default/files/users/user35/email-header-template-web2.png"
    2. Inside Source Code: (th - header image)   <th scope="col"><img src="http://www.phoenixcollege.edu/sites/default/files/users/user35/email-banner.jpg" width="100%" style="max-width:800px;" /></th>
  5. Indent Body. Inside of table body <div style="margin-left:15px;margin-right:15px;">
  6. Preview/Debug in Browser 
  7. Paste into Google Mail for Mail preview. In browser > [command a/select all] [command c/copy] In Google Mail [command v/paste] Send email to yourself to review.
*Develop Header in Photoshop.
  • 72 DPI / size : 800 x 222 (includes PC Basics) pixels Note:  art board needs to match image - no white space around the sides or top and bottom / Don't rasterize text
  • If using a transparent layer place on top of white layer to view (use this as a page color)
  • Save for Web: png-8 best if text involved, no transparency / s/b a white background / to get a lower file size you can use less colors - preserve quality check color match and text.
Notes:
Paste image URL in between "" after (source) > Refresh
Only use Google Browser to open copy and paste. 
Attach html file to email to send to "other" user
INSTRUCTIONS FOR LOADING IMAGE IN GMAIL
1) Download html image
2) Open in Web Browser
3) Select All (Command A) / Copy (Command C)
4) Paste into Gmail
5) Edit Body of Text as Needed
6) Send Test Email
Creation of Canned Response Template
1) In Gmail >Settings (Top Right Hand Corner)>Labs>Enable Canned Response
Select Canned Response>Save
2) Compose Gmail > Paste Template > Select down arrow at bottom right corner >Canned Response > New Canned Response > Add a Title
Using a Canned Response Template
1) Compose Gmail
2) Select Canned Response 
3) Select title of Canned Response under Insert
4) Edit body of Gmail as needed