Skip to main content

Creating an Email Template (Header and Footer)

August 04, 2014
CREATE A RESPONSIVE DESIGN EMAIL TEMPLATE
Using Dreamweaver. Create Blank Page. Use Split View - Classic Layout
  • Indent Body. Inside of table body <div style="margin-left:15px;margin-right:15px;">
  • Preview/Debug in Browser 
  • 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 and others to review.
  • If everything looks good, attach the Dreamweaver HTML file and send these instruction to recipient.
*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.
INSTRUCTIONS FOR LOADING THE TEMPLATE IN GMAIL

  • Download the HTML file attachment.
  • Open in Web Browser (Use Chrome)
  • Select All (Control/Command A) / Copy (Control/Command C)
  • Paste into Gmail
  • Edit Body of Text as Needed
  • Send Test Email
  • Attach HTML file to Email to Send to Another User


Notes:
Paste image URL in between "" after (source) > Refresh