Email templates

Mail clients

restrictions

• No :hover, :active, :focus
• Limited CSS3
• No JS
• No forms
• Backgrounds
• Non-web fonts
• Global styles
• No div-layout!
• Email client CSS support

what remains

• Table-layout
• Universally supported CSS-properties
• Attributes
• Inline styles

Universally supported CSS-properties

Attributes

Inline styles

Use inline styles in most cases

or

Fixed email template

    

        

            

                

                    

                        

                            
CONTENT
                        
                    
                
            
        
    

Vertical/horizontal align

    

        

            
Lorem ipsum
        
    

    

        

            
Lorem ipsum
        
    

Fonts styles

    

        

            
Lorem
            
 
                Link
            
        
    

Margin, borders

Use paddings on <td> for indent betven blocks

    

        

            

                Lorem ipsum
            
        
    

Use <br> on for indent in text

    

        

            

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. 


                Quos repudiandae dolore nemo optio, animi consequatur, 


                necessitatibus a inventore beatae rerum quae rem 


                illum corporis voluptas, impedit error! Sunt, soluta. Iusto!
            
        
    

Examples

Email templates for mobile

Reset

* {
    -webkit-text-size-adjust: none;
    -webkit-text-resize: 100%;
    text-resize: 100%;
}

Responsive emails

Should work on mobile

Should NOT break desktop

Example

    

        

            

                
                

                    

                        

                            

                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            
                        
                    
                
            
        
    

@media only screen and (max-width:500px) {
    table[class="flexible"]{width:100% !important;}
}

Email marketing services

Mailchimp

Campaign monitor

constant conact

icontact

Mailchimp

• Mail templates + editor
• Mailing lists
• Statistics
• Real time values in email
• Custom Autoresponders
• Google Analytics

Edit tags

• mc:repeatable="" - repeat content
• mc:edit="" - edit text or image
• mc:variant="" - variants of repeatable blocks
• mc:hideable - hide block
• mc:allowtext - use for varant usage (show image or text)
• mc:allowdesigner - edit images and bg

    

        

            
HEADER
            

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. 


                Quos repudiandae dolore nemo optio, animi consequatur, 


                necessitatibus a inventore beatae rerum quae rem 


                illum corporis voluptas, impedit error! Sunt, soluta. Iusto!
            
        
    

Merge tags

• *|ARCHIVE|* - creates the URL to your campaign
• *|DATE:|* - shows the current date
• *|FNAME|* - inserts your subscriber's first name
• *|LNAME|* - inserts your subscriber's last name
• *|EMAIL|* - inserts your subscriber's email
• *|MC:SUBJECT|* - displays the campaign's subject

How to check yourself

1. Outlook 2013
2. Attach File
3. Select Insert as text on attach button

The end.