Tips to Improve your Email Layout


There are many things that you can do to improve the look and functionality of your email campaigns and autoresponders. 


Here are a few tips that have been proven to help your email look better and increase repeat opens from your contacts. 


Even though you are limited by the CSS and HTML you can use and the image size you can send, you can still be very creative and develop great email templates that will look the same to all your contacts no matter what email application they use. 


One of the biggest issues people have when creating email templates is using background images. Microsoft Outlook and most other email clients do not support these. If you rely on background images to make your email campaign, then many of your contacts won't be able to see them in the first place. 


Most email clients will not render HTML and CSS code that is before the body tag. Defining the CSS rules in the head of your code will not render the CSS changes in your emails. To get around this, remember to always make use of inline CSS, and add your styles to the individual elements (tables, text, etc.). This may take a lot longer to do, but it will ensure that your emails look good for everyone that views them. 


Additional Tips:


  • Make sure that your email templates are no wider than 650 pixels. This will ensure that none of your users will have to scroll horizontally to view the content of your email.

  • Try not to use 1x1 pixel spacer gifs to force widths in your table data cells; these can result in your email to be marked up as spam.

  • Focus on making optimal use of the first 3-4 inches of your email campaign. Many contacts will have a preview pane set up in their email client, and this is the first thing that they'll see. If you grab their attention right away, then they'll be more likely to open your email and read further.

  • Make sure that you use correct HTML when creating your email campaigns. Invalid HTML can cause many problems when trying to render in email clients.  

  • Don't add any JavaScript to your email. Javascript and Java embedded objects are not supported by any email client at this time and may break your email design.

  • Add a link to a web version of your email. You can do this by adding the custom field %%webversion%% to your email. This will ensure that if your contact cannot see the email in their email client, they will be able to view it online.

  • Use the alt element for all images. This should work for most email clients. It will also enable those users that do not download or cannot download images to know what the image was intended to be. You can use this like alt="Company Logo" etc.

  • Do not embed video files in your email clients. Instead, you can create a screenshot of these files, and include that image as a link to the movie file hosted on your website. This will not only decrease the size of your email campaign, but it will also ensure that your contacts can all see what you are sending them. 


How to make sure that your emails look the same in different email clients

One of the most important things to do with email marketing is to test your message out. You need to make sure that your email will look the same when viewed in different email clients such as Gmail, Outlook, Yahoo, etc. 


Pinpointe has a built-in feature to check for Email Client Compatibility. This feature will give you an idea on what your emails will look like in many different email clients. It will show you a display as well as inform you of the reason the email will be displayed the way it is. 



Examples of CSS and HTML elements that you should not use are:  

  • Gmail doesn't like the CSS properties background or background color, so you should use the HTML tag bgcolor to set the background color.

  • Some clients don't render border tags  

  • If you have a block of paragraphs, you should separate them by using <br/><br/> rather then <p></p> because some email clients will neglect to add the space between the paragraphs.

  • Because most email clients strip out your CSS from the <body> tags, you should wrap your email in a table and add your CSS to that. This way, you can add background colors that will appear in all email clients. 
    • Don't do this:


  

    <body bgcolor="blue"> 

    Your email template content.... 


        You would have HTML that looked more like: 


  

<body> 

<table bgcolor="blue" width="100%"> 


Your email template content:


If there is no text in a table cell, replace this with <span></span< to take up space. If you are using images as corners to make a rounded corner effect, you should make them at least 25px tall to avoid cell padding from showing up.