BLOG   |  CONTACT   |  1.866.526.9955

The Lasso Blog

Lasso Email Marketing

Simply put, visuals in email grab attention. When your readers open an email, their eye is immediately drawn to images. Naturally, their sight line is then drawn to the text near it. Research has shown that images increase a reader’s likelihood of reading content by 80%. It’s important to have a good balance between text and images; too many images and your email may get flagged as spam, too few images and you might not deliver the visual punch needed to drive clickthrough rates.

There are three ways you can inject attention-grabbing visuals to your email: Static images, animated GIFs, and video. I’m going to review the benefits and limitations of each, so you can be confident that you are putting out the best quality content.

 

Static Images

The most universally accepted file types for static images are JPEGs and PNGs. JPEGs have the lowest quality of the two types, but retain color when used. PNGs are higher quality images, and therefore may take up more space.

When to use JPEGs – While JPEGs are lower in quality than PNGs, they are highly compressed files, meaning they don’t take up much space and will ensure your emails load faster. JPEGs are “lossy,” which means they can display a wide selection of colors, making them the perfect choice for photographs.

When to use PNGs – JPEGs are perfect for photos, but they’re not great for logos, graphics, or text. PNG files provide a clear, crisp option for these types of visuals. A PNG file also offers the added benefit of having a transparent background. This will ensure that your logo or graphic, when placed on a colored background, will not have a white box surrounding it.

The image placeholders in Lasso’s Design Editor display recommended sizes that are double the width of the image block. The reason for this is that some smartphones, tablets, and laptops feature high-density screens and retina displays that have a higher ratio of pixels per inch. Smaller images can appear pixilated on these high-quality displays.

Pixel Perfect Image Size

The Design Editor will automatically scale your image to the width of the content block so it won’t squish, stretch, or distort your image. This is an important feature when using the 2 column image block. We recommend that both left and right images are the same dimensions to ensure a uniform and balanced look.

 

Animated GIFs

Similar to how a flipbook works, GIFs rapidly display a series of images to produce the illusion of motion. Adding these simple animations is a great way to add some interactivity and grab your reader’s attention. Keep in mind that the larger your GIF file, the longer it takes to load in the reader’s inbox, so you’ll want to keep it short and sweet.

Tools like Animate and Photoshop have limited compression options for GIFs so you’d be more successful using an online compression tool. I am a fan of EZgif, a free online GIF optimizing tool, to get your file size down to its optimum size.

Including photography or gradients in your animation adds weight due to the amount of colors and shades these contain. A GIF can only contain 256 colors which often results in the quality taking a hit. So keeping things simple is key. So, instead of doing this:

Consider adjusting your design to have a flat color animation above or beside a static image, like this:

The shorter the animation, the better. Each frame your animation contains adds weight to the GIF. If you find that your GIF is a little top large after saving and compressing, you can also remove frames using EZgif.

Almost all email clients support animated GIFs. Outlook recently updated its support for GIFs, but this only affects Office365. Outlook 2007-2019 still don’t support animated GIFs. For these specific email clients, you’ll want to be sure that the first frame in your animation shows the most important content, as that is what will appear as a default. In the case of the animation above, you would want the first frame to look like this:

Videos

Video is a fantastic way to keep your readers engaged and can increase your open rates by up to 6%. However, there is a misconception that inserting a video in an email means that it will play directly in the reader’s inbox. Unfortunately, only a handful of email clients actually support playing embedded video. Most clients, including Gmail and Outlook do not have the technical requirements needed to embed your video. Most will show a fallback image in it’s place.

If your video is short and doesn’t have sound, creating a GIF to display a small animation is a great alternative. However, the simplest way to add a video to your email is to insert a static image and link it to your video. This way, you are able to link to your YouTube or Vimeo channels, which in turn can lead to additional video views and website traffic.

If you’re still keen on embedding video to play directly in your reader’s inbox, this can be done with a bit of HTML know-how. Remember, only email clients that support embedded videos will play, so you’ll need to supply a fallback image for those that don’t. Full instructions on how to do it can be found in Lasso’s Help Center. I’ve also created a video to walk you through the process. All the HTML and CSS code you will need is supplied below.

CSS CODE
Insert the following CSS code somewhere within the <style> tags of your template. This code does not need to be changed.


 

.video-wrapper {display:none;}

@media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px)

{

.video-wrapper { display:block!important; }

.video-fallback { display:none!important; }

}

@supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {

div[class^=video-wrapper] { display:block!important; }

div[class^=video-fallback] { display:none!important; }

}

#MessageViewBody .video-wrapper { display:block!important; }

#MessageViewBody .video-fallback { display:none!important; }

HTML CODE
Insert the following HTML in the body of your email, where you want your video to appear. You will need to customize this code with your own images and video link.


 

<!– video section –>

<div align=”center” class=”video-wrapper” style=”display:none;”>

<video width=”500″ height=”auto” controls=”controls” poster=”http://app.lassocrm.com/FileWarehouse/Users/User_25264/Images/video_screen_without_play.jpg” src=”https://www.lassocrm.com/wp-content/uploads/2020/04/ECI_Lasso_CRM.mp4″ >

<!– fallback 1 –>

<a href=”https://www.lassocrm.com/wp-content/uploads/2020/04/ECI_Lasso_CRM.mp4″ ><img height=”auto”

src=”http://app.lassocrm.com/FileWarehouse/Users/User_25264/Images/video_screen_with_play.jpg” width=”500″ /></a>

</video>

</div>

<!– fallback section –>

<div class=”video-fallback”>

<a href=”https://www.lassocrm.com/wp-content/uploads/2020/04/ECI_Lasso_CRM.mp4″ ><img height=”auto”

src=”http://app.lassocrm.com/FileWarehouse/Users/User_25264/Images/video_screen_with_play.jpg” width=”500″ /></a>

</div>

FULL TEMPLATE CODE
If you would like to try sample code before creating your own template, use the following code and paste into the source code section of a new email template:


 

<!doctype html>

<html>

<head>

<title></title>

<style type=”text/css”>

 .video-wrapper {display:none;}

 @media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px)

 {

  .video-wrapper { display:block!important; }

  .video-fallback { display:none!important; }

 }

 @supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {

  div[class^=video-wrapper] { display:block!important; }

  div[class^=video-fallback] { display:none!important; }

  }

  #MessageViewBody .video-wrapper { display:block!important; }

  #MessageViewBody .video-fallback { display:none!important; }

</style>

</head>

<body>

<!– video section –>

<div align=”center” class=”video-wrapper” style=”display:none;”>

<video width=”500″ height=”auto” controls=”controls” poster=”http://app.lassocrm.com/FileWarehouse/Users/User_25264/Images/video_screen_without_play.jpg” src=”https://www.lassocrm.com/wp-content/uploads/2020/04/ECI_Lasso_CRM.mp4″ >

<!– fallback 1 –>

<a href=”https://www.lassocrm.com/wp-content/uploads/2020/04/ECI_Lasso_CRM.mp4″ ><img height=”auto”

src=”http://app.lassocrm.com/FileWarehouse/Users/User_25264/Images/video_screen_with_play.jpg” width=”500″ /></a>

</video>

</div>

<!– fallback section –>

<div class=”video-fallback”>

<a href=”https://www.lassocrm.com/wp-content/uploads/2020/04/ECI_Lasso_CRM.mp4″ ><img height=”auto”

src=”http://app.lassocrm.com/FileWarehouse/Users/User_25264/Images/video_screen_with_play.jpg” width=”500″ /></a>

</div>

</body>

</html>

Share This