Email Template
BASIC GUIDELINES

MIGHTYRECRUITER

Simple Email Design

Here we have the the simple email template that is currently being used for Mighty Recruiter. Composed of Header, Content and Footer. The content is what is going to be different in the in other versions and also the header that might have a hero image. We will be able to see the later in this document. For now let's just focus on the simple email.


The frame is 600px of width and has a responive media query breaking point ant 600px. After this breaking point the width is 100% with a 15px margin on the left and the right.


The font is Open Sans for the heading titles using @font-face attribute to get the font from and online permanent repository in our servers. Subtitles, paragraphs and ancors also will use Open Sans using @font-face attribute to get the font. Open Sans can also be pulled from Google Fonts as it is in this design to show the two ways available to get fonts into email. It is very important to have Arial, Helvetica, sans-serif as alternate in case the browser or email client does not support the font.


Most modern bowsers and email client support this techniques but some of them might keep the old school style font. Using these modern techniques will give personality to the email campaing and adhere to the Designed Style and therefore increase cedibility in the Brand.


MightyRecruiter

 

Logo
 

Hi {{lead.First Name:default=there}},
Sed non mauris vitae erat consequet auctor eu in elit. Mauris in erat justo

Sincerely,
John Smith
       

Full HTML Code

Here we have the full code for the simple email template that is currently being used for Mighty Recruiter. All of the different sections are commented so you just need to replace the content in the middle and use the header and footer as it is.


Header Design

The design is to have the logo horizontaly centered applying text-align: center and also maring to center it. Vertical middle is optained by applying 30px of padding-top and padding-bottom to the image mantaining proportions intact.

 

Logo

Full HTML Code

Simple email - Header Design Code Here we have the full code for the simple email template header that is currently being used for Mighty Recruiter

Hero IMage

MIGHTYRECRUITER

Full HTML Code

This is simple centered text. THe important thing is that the font color should always be color=#b7b7b7. Compatability issues with color is solved if we use < FONT color=#b7b7b7 > in the ancor links text.

Button

MIGHTYRECRUITER
   


TO TOP



BOLD 2016 ©