Gmail’s Experimental New Promotions Grid

In August of last year Google rolled out Gmail’s new tabbed inbox interface. This included the introduction of the new Social, and Promotions tabs. While this first gave some email marketers pause, we can say, almost six months later, that this has not significantly hurt open rates.

The way we look at it, anything that makes managing your inbox simpler is a net win for everyone. Email marketers especially. The Promotions tab means that the people who are interested in receiving your messages will have an easier time doing so, while the spammers will be buried further. It’s because of developments like this that Google has been able to start caching images and loading them by default.

Now that people have had some time to get used to Promotions, Google is looking to improve it further in new an exciting ways. Today the company announced a new experimental grid view for promotions.

This new grid view takes advantage of the image heavy nature of email marketing to create beautiful feature tiles for each message. This will make sorting through promotions easier than ever for your contacts, while also giving you a leg up at grabbing their attention beyond just the subject line.

We’re excited about this feature and think you should be too. The feature is currently experimental and those who want to try it out need to opt-into it at this point.

As this feature catches on we will look into how we can make optimizing your messages for the Promotions grid as easy as possible to take advantage of it. Though Google has already released some developer documentation so individual coders can get a head start today!

What are your thoughts? Let us know in the comments!

Gmail Promotions Grid

New email templates for our new email designer (free + mobile ready)

We have been busy designing email templates with the release of the new email designer.  Here are a couple of the designs that are currently available.  Additional email templates are being rolled out each day as they are completed.  All templates have multiple themes and are mobile ready.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Designing Mobile Versions of Email Messages

When designing a web page, it is important to remember to design a simplified “mobile-friendly” version as well, so that your website can take on a different layout when viewed using cellular phones and other mobile devices, making it easier to read and navigate. With the rising popularity of smart phones and tablets, why not design mobile-friendly versions of your email marketing campaigns as well?

Traditionally, mobile-friendly website layouts are designed by using Javascript to change the website’s CSS properties, based on the browser’s User Agent. Javascript is typically not recommended for emails, though, so this approach could become problematic when it comes to email design. Fortunately, however, CSS3 media queries are now supported by all major mobile browsers, including iOS’s default email client, and Android’s “Email” app. Media queries can be used to modify and hide sections of your email message, based on the width of the email client/browser.

Below are two images of an email we sent out to announce our new website design. On the left is the email in a regular web based email client. On the right, you can see the same email as viewed in a mobile client. As you can see, CSS3 media queries have been utilized to change the width of the email, and further modify the design.

With this example, the main differences between the two versions are within the heading — in the mobile version, the header image is resized, and the Home, Features, Blog, and My Account links are removed. To accomplish this, we’ve added some code to the header of our email source which looks similar to this:

<style>
@media screen and (max-width:600px) {
 html[class="corehtml"] img {max-width:100%; height:auto; width:auto\9; /* ie8 */}
 table td[class="blankcell"] {visibility:hidden; display:none;}
}
</style>

(Note: in this email, there were many other classes defined here as well, but the code has been simplified for the purposes of this article.)

The classes defined in this section of the code will only take effect when the size of the user’s browser is less than 600 pixels in width.  In this case, in our HTML code, the navigation links along the top of the the email (Home, Features, Blog, and My Account) were placed in table cells using the “blankcell” class. The code looks similar to this:

<table border="0" cellpadding="0" cellspacing="0" width="600" class="headerbar">
 <tr>
 <td align="left" width="167">
   <a href="http://www.activecampaign.com/">
   <img src="ac_logo.gif" width="167" height="18" alt="ActiveCampaign"/></a></td>
 <td class="blankcell" width="180"></td>
 <td class="blankcell" align="right">
   <a href="http://www.activecampaign.com/">Home</a></td>
 <td class="blankcell" width="15"></td>
 <td class="blankcell" align="right">
   <a href="http://www.activecampaign.com/features/">Features</a></td>
 <td class="blankcell" width="15"></td>
 <td class="blankcell" align="right">
   <a href="http://www.activecampaign.com/blog/">Blog</a></td>
 <td class="blankcell" width="15"></td>
 <td class="blankcell" align="right" width="93">
   <a href="http://www.activecampaign.com/login/">
   <img src="button_myaccount.gif" width="93" height="28" alt="ActiveCampaign" /></a></td>
 </tr>
 </table>

The result is that, when the browser or email client is larger than 600px, the table cells are displayed normally. However, when the browser shrinks so that the width is smaller than 600px, these table cells start using the visibility: hidden and display:none attributes. Essentially, when the browser width is lower than 600px, these table cells become invisible.

Similarly, when the email is viewed in a small browser, the map image starts displaying the max-width:100%, height: auto, and width: auto properties, causing it to be automatically resized to the width of the browser.

CSS media screen queries can be used  to hide aspects of your message, change the width and height of images, divs, or table cells, or even change background images or colors, all based on the width of your users’s browsers. This is a very effective means of designing web pages to fit different monitor resolutions, as well as to create mobile friendly versions of webpages and emails.

To find out more information about CSS3 media queries, and see examples of them online, check out these other great tutorials:

Free Survey Email Template

Need to find out how your customer service is going or how your client is perceiving you? Get some valuable feedback from your most loyalest customers with this beautiful blue and grey free survey email template. The bright orange button will surely grab attention as the only focus for a call-to-action. Seeing that businesses can benefit from having a Google Plus page to gain some traction in their organic ranking, we’ve decided to help you out and included a Google Plus social button at the bottom of the template; get some more followers in your Circle!

As always, head over and download your free copy in our free email template gallery here.

Free Friday: Blue Cloud Email Template with Background Image for Outlook

With the arrival of winter we’ve design this pretty bright blue email template to remind us how much we’ve already missed summer. With hazy blue clouds and utility poles that give off that hot summer day feel to it, we can only wish that summer isn’t too far away.

We’ve included a bonus here; this email template has a background image that is displaying for Outlook 2007 & 2010. Here’s an old post on how to add background image in Outlook. I will go into details on how we’ve accomplished this for this specific template.

How to Display Background Image in Table Cell

Include the following code into the <html> tag of your document:

xmlns:v="urn:schemas-microsoft-com:vml"

Example:

<html xmlns:v="urn:schemas-microsoft-com:vml">

For this specific template design, we’re going to want to show the logo over the background image in a table cell — unlike our previous post where we wanted the image to show in the background of the body, we’ll want to show the background only in a certain cell. This method create another problem in Outlook; Outlook will add an unwanted 5 pixel spacing underneath this table cell. To solve this little bug, we’ll have to specify a height and width using the code below. You must remember to specify the width and the height for both the <v:image> and <v:shape>.

...
<td background="images/image_9119314.gif" style="background-image::url('images/image_9119314.gif');">

	<!--[if gte mso 9]>
	<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:109px; width:600px;top:0;left:0;border:0;z-index:1;' src="images/image_9119314.gif"/>
	<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:109px; width:600px;top:-5;left:-10;border:0;z-index:2;'>
	<div>
	<![endif]-->

		<table>
		INSERT OVERLAY TEXT OR IMAGE HERE
		</table>

	<!--[if gte mso 9]>
	</div>
	</v:shape>
	<![endif]-->

</td>
...

For this specific email template, the logo (or text) that we want to display over the background image would be contained within the table (or paragraph tags) that is wrapped around using the <v:image> and <v:shape> tags. So remember, the only thing that needs to change in the above code is your height and your width.

Free Friday: Warm and Grity Worn-Out Email Template

For our typical Friday template release we’re offering a unique template design perfectly coded for businesses offering e-commerce, blogging, travel, education and services. This unique newsletter template shows off a worn-out, grungy design with bold beautiful yellow and brown colors that really stands out over the softer beige in the background. Download your copy by clicking on the template image below:

Free Friday: Winter Holiday Email Template & Background Image Fix for Outlook

We’re back from Thanksgiving with a Free Friday blog featuring two free email templates.

With Christmas just a few weeks away and winter is already here, we’re proud to release our first winter holiday-related template for 2011. Send your customer a thank you message or simply wish them a happy holiday with a free coupon gift illustration in this beautiful template drenched in deep winter blue featuring a cozy and warm snowman.

This orange and black template consist of a video screen capture and different orange hues to show that “pop”. There are very small details making this template a must-have with detailed patterns behind the logo with sharp colors and edges ready to impress your client.

The template also feature a repeated background image that works in all major email client including Gmail, Hotmail, Yahoo, Outlook 2007 and 2010. It’s not a pretty fix by any means but it gets the job done.

Start by including this code to the <html> tag of your document:

xmlns:v="urn:schemas-microsoft-com:vml"

Example:

<html xmlns:v="urn:schemas-microsoft-com:vml">

To get a repeated background image to display in Outlook 2007 and 2010, simply include this piece of code right after the <body> tag:

<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://www/url/to/your/background/image/file/for/outlook.jpg" />
</v:background>
<![endif]-->

One issue here is that if you needed a background to repeat horizontally – as with this template – Outlook 2007 does not support the CSS background-repeat. Since we’re applying a background to the body of the email, we’ve created a seperate background image that has a big enough width and height so it shows fully in Outlook.

To have a repeated background image to show for all of the other email client, simply include this code into the body section of your template, perferablly after the <body> tag.

<style type="text/css" media="screen">
background-image:url('http://www/url/to/your/background/image/file.jpg');
background-repeat:repeat-x no-repeat;
background-position:top left;
background-color:#eeae00;
</style>

Here’s what the full code should look like:

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
...
</head>
<body>
<style type="text/css" media="screen">
background-image:url('http://www/url/to/your/background/image/file.jpg');
background-repeat:repeat-x no-repeat;
background-position:top left;
background-color:#eeae00;
</style>

<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://www/url/to/your/background/image/file/for/outlook.jpg" />
</v:background>
<![endif]-->

</body>
</html>

Unfortunately during the time of this template release, we were unable to figure out a fix for the padding issues only seen in Outlook 2007 and 2010.

Regardless, we hope you enjoy these free email templates as much as we enjoy making them.

Do you know of a fix for the padding issue in Outlook or a better work around to displaying repeated background images in Outlook? Please share with our community and post your solution in the comment.

Free Friday… err, Wednesday Free Email Template

Today we’re releasing an email template ahead of Friday since ActiveCampaign will be close for the Thanksgiving holiday. Our email template today feature a nice clean white look with a hint of blue. This template is perfectly fitted for companies offering service, great for the every day freelance designers and content publishers looking to send out regular blog updates. As always, you can download your own copy at in our email templates gallery. For your convenience, we’ve included a Photoshop file, XML for easy import into the ActiveCampaign email console and personalization tag.

Have a happy and wonderful Thanksgiving everyone!

Free Friday: Delicious Email Template

It’s Friday… who’s hungry? We’ve cooked up this delicious email template packed with savory goodness for your creative taste buds. Included is a XML file for convenience so you can import this template design right into your campaign. Also included is a PSD Photoshop file for those wanting to make color and button changes. Personalization tags are included for Facebook and Twitter. Head over to our email templates gallery and download a copy.

Free Friday: Free Email Templates

We fully understand the frustration of trying to design and code your email layout without it breaking all over the place when viewed in your inbox. Your email design is important to your company branding and you’ve worked really hard today – why add more stress? This Friday, we’re going to help you out and lessen your headaches. We’re giving you free email templates.

Because we love each and every one of you, you’re more than welcome to use these email templates any way you see fit. If you’re a customer of ActiveCampaign, we’ve even added some personalized tags and conveniently included an XML file for import. If you’re the creative type and you’re not scared to get your hands dirty, these two email templates comes with a PSD Photoshop file. Don’t like the colors or the shape of a button? No problem, you’re free to change it.

We hope you find these email templates useful as it has been fun for us creating them for you. Happy Friday!