June 24, 2014No Comments

Interactive designers: 3 creative picks for June

As a designer, I enjoy seeing work produced by other creatives. It inspires, keeps me current, and makes me re-evaluate my own design approach. Since I believe it's important to stay relevant in whatever industry you're in, each month I will offer a list of my favorite creative pieces from that month. These pieces will include any field of design from interactive to video to print, etc. So without further ado, here are my creative picks for June.

Twitter Email for Business

Twitter animated email for business creative pick
My first creative pick for June, is an email newsletter from Twitter. I'm not going to lie, I usually gloss over most emails I get from Twitter for business. It's not that there's anything fundamentally wrong with them, they just usually don't grab my attention. However, this particular email gave me reason to pause. Animated GIFs are nothing new to email design, but the animation in this email surpassed any I have seen before. While the file size of the GIF is larger than generally recommended for an email, you can't deny the crispness and quality produced. At first, I thought it might actually be an embedded video targeted to Apple Mail clients. Twitter took a chance by breaking from traditional email design and recommendations, and in my opinion the risk paid off. It may not have caused me to take action, but it did change my behavior for how I interact with future communications.

FCB Webstie Redesign

FCB website creative pick
My next creative pick comes from FCB. Recently, DraftFCB decided to drop the "Draft" and rebrand as FCB. As is common with most rebrandings, a website redesign followed. And frankly, it's never looked better. The FCB site is responsive, vertical, user-friendly, and engaging. The simple design plus attention to typography makes the site feel fresh and modern. The site is easy to navigate and uses subtle animation effects to provide a smooth transition between pages. In the creative industry, it is necessary to give your site a little refresh from time to time. FCB's website update is the type of facelift that even Joan Rivers would approve of.

Litmus TEDC Email

Litmus email creative pick
Litmus is one of the foremost authorities on email design, development and delivery. So it's no surprise that when it comes to their own newsletters, that they deliver such quality work. Their email announcement for the upcoming "The Email Design Conference" is no exception, and is my final creative pick for June. This email uses a subtle GIF animation that fits with the sleek and modular design of the email. The email is responsive and single-column, which allows for a similar user experience across devices. The content is laid out so that it is easy to read and navigate through. And though not part of the design, my favorite part of them email was a link to a downloadable letter to give to your supervisor about why you should attend the conference. All of these elements combined to make a fun and engaging email communication.

So there you have it. These are my creative picks for June. If you see a creative piece that inspires you, tweet it to @justin_herren. Let's see what inspiration July brings.

April 3, 2014No Comments

GIFFing out with animated GIFs in email

Animated GIFs. For years these were the bane of many email designers and programmers existence. In fact when I worked for the Chicago Tribune in 2008, animated GIFs were prohibited for any of our email campaigns. Recently, however, the GIF has made a comeback. Whether it's in commercials such as K-Mart's "GIFFING Out" campaign, or going viral through social media outlets (think Michelle Obama's eye roll), animated GIFs are seeing a renaissance. So it's no surprise that animated GIF's are popping up more frequently in email campaigns. And when done right, they're actually a pretty effective design component.

GIFFing out in email

I recently received an email from MyEmma that I think is a great example of using animated GIFs. In the below email example, MyEmma incorporates 2 animated GIFs into the design. The first GIF is a quick call to action about MyEmma's upcoming webinar. In this instance the animation is used to drive home the point of the 8 second email challenge. The animation is quick, clean and adds more interest to the email. The second GIF is a more subtle animation, with shopping tags dangling from left to right. This animation is used as a subtle reference to MyEmma's new Shopify feature. Both animated GIFs are great examples of how appropriate use of animation can add interest and depth to your email campaign.

MyEmma email animated GIFs

View full email.

MyEmma 8 second animated GIF
Animated GIF 1

MyEmma tags animated GIF
Animated GIF 2

How to use animated GIFs effectively

When used correctly, animated GIFs are a great way to help tell the story in your marketing communications. Here's what to keep in mind when developing GIFs for email creative.

1.) Does it offer value?
As with any design element, ask yourself if having an animation will bring value to your communication. The important thing for any marketing communication is that all the elements work to engage the audience not distract them. Avoid having a GIF for the sake of having a GIF. Be intentional with any animation implementation.

2.) Watch your file size.
You want the overall file size of your email to be around 100kb. This helps the download time of the email for your audience. Elaborate GIF animations can become pretty heavy on file size and slow download times. Try to keep animated GIF's to around 40kb when possible, especially if you have other images in your email.

3.) Be up front.
Not all email clients support animated GIFs. For example, Outlook 2007-2013 shows only the first frame of the GIF when it is loaded. Be sure to have all pertinent information for your GIF on the first frame of your animation, so that all users have a similar experience.

4.) Keep it short.
According to a recent survey by Movable Ink, most consumers spend less than 15 seconds reading an email. In order for animated GIFs with messaging to be effective, keep their run time down to about 10 seconds. This will also help in maintaining a small file size.

5.) Know your audience.
As stated previously, not every email client supports animated GIFs. It is important to know which email clients your audience is using to view email. If the majority of your audience is using Outlook, it's probably not a good idea to incorporate one. Check out this list of email clients that support animated GIFs.

Animated GIFs are a great way to draw attention to your email, as well as help tell the story to your audience. Just remember not to GIF out to much, or your email stream might be viewed as more of a nuisance than innovative. For more information and examples about animated GIFs, review these aritcles:
Litmus: A guide to creating animated GIFs for email
Campaign Monitor: Animated GIFs in email: A new approach to an old format

August 23, 2013No Comments

Breaking through the email barrier

Every day, customers are inundated with dozens of emails flooding their inbox. Email is an essential touch point with customers. Whether its providing awareness, product updates, or new promotions, email is a fast, effective way to engage an audience. As a designer, you want to break through the inbox email barrier. That's why it's important to consider incorporating direct marketing techniques into your design.

Why use direct marketing methods in email? Aren't a good list and creative graphics enough?

True, a list is one of the key components to an effective campaign. However, it doesn't guarantee engagement. Strong visuals also help reinforce the message of an email, but they can't do all of the heavy lifting.

So how can direct marketing best practices be incorporated to help you break through the email barrier?

Brand it
Make sure your brand is recognized the moment your email is previewed. Place the logo in the header for instant recognition. Include fonts and buttons that are consistent with what is used on your website. Consumers want to know that your email is legitimate and brand recognition reinforces that.

Get personal
Customers like to know that you know who they are. Go beyond the standard name greeting. Include personalized information so that the customer knows your speaking directly to them. This could include product purchase history, model numbers, account information, how you first engaged them, etc. Personalization allows you to speak more directly to a customer and reinforces the authenticity of the communication.

Mobile optimization
According to Litmus, over 40% of customers view email on a mobile device. To keep consumers engaged, make sure your email is mobile ready. This can be accomplished by either designing a one column email layout, or a multi-column responsive email. Responsive design allows you to provide a different layout experience depending on device. Both options allow an email to be displayed in a one column format which is ideal for mobile devices. Responsive layouts have the added benefit of allowing a different format for desktop clients. For more on responsive email design, click here.

The power of three
Drive engagement with customers by focusing on one call-to-action at least three times. Multiple calls to action can confuse consumers. Focus on one single action and drive attention to it at least three times.

Button, button who's got the button?
Customers respond well to buttons. They let us know that an action needs to take place. They promote the call-to-action. Try to include at least one button in your design and make it obvious (color, size, etc.). For mobile optimized emails, you may want to consider repeating it twice, once toward the beginning and another towards the end.

Image isn't everything
While strong imagery can reinforce an email messaging, too many images can slow an emails performance. Of course it would be nice if everyone had the newest devices and stellar data service. The fact is, no one likes waiting for images to download to read an email, especially on their phone. Best rule of thumb is to try to keep images under 40k, to improve download speed.

Remember you want your email to not only be read, but to engage viewers. These tips can help drive engagement and break through the inbox email barrier. Check out this email template for Nokia that helped increase response with Nissan customers.

August 6, 2013No Comments

How compatible is your email?

Anyone who has ever had to program an email for a marketing campaign knows that getting your email to be cross-browser compatible can be a daunting task. First there are the different email clients such as Hotmail, Yahoo, Gmail, Entourage, and Thunderbird to name a few. Not to mention the various Outlooks and the treacherous Lotus Notes. Then there are the browsers such as Google Chrome, Firefox, Safari and IE and their versions. Finally there are the operating systems like IOS and the multitude of Windows platforms. And don't forget about mobile optimization. Whew, that's a lot of obstacles, and you haven't even opened your HTML editor yet.

Cross-browser compliance for emails can seem like an insurmountable task. In fact, some developers argue that it's more important to program your email according to your target audience browser preference. If you work in email development long enough though, you will eventually need to tackle this challenge. Below are some insights and tips to help meet this challenge head on.


Don't think like a developer. Instead think like an architect. Programming for emails is different than programming for websites or landing pages. Creating cross-browser compatible emails requires you to use the most basic, fundamental HTML programming skills. Think tables and cells instead of divs and p tags. Use inline styles instead of CSS, as clients like Gmail will ignore code in the header.

Watch your spacing. As much as padding and margins are relied on with websites and landing pages, they only work haphazardly across email clients. If you need to add space, use spacer .gifs, divs or the line-height element for extra padding.

Go responsive. With more customers viewing email on a mobile device, it is important to design your email responsively. Start by thinking of your email as a modular layout that will stack to one column when seen on mobile. Add some @media queries and you're all set. Checkout this free ebook from Campaign Monitor for more information on getting started with responsive design.

Test, test, test. Email clients and browsers are constantly updating. An email that worked 3 months ago might have an issue now. Be sure to test on all of the clients and platforms used by your target audience. Litmus is a great tool for checking how your email renders across multiple devices and email clients. You can also validate the accuracy of your code through W3C Validator and W3C MobileOK.

Quick Tips

  • When a list is required, create a table with at least 2 cells, one for the bullet and the other for the copy. This will allow both elements to line up evenly and will prevent awkward text wrapping issues.
  • Be sure to declare the “align” element in you tables and cells and the “valign” element in your cells.
  • All images should have an alt and title tag. For spacer .gifs the alt and title tags should be left blank (Example: alt="").
  • The height element should only be declared on images. Do not use for tables or cells.
  • Include a title in the title tag when using a view as web page feature.
  • Add border=”0” to all images.
  • Do not use .png images.
  • Encode all characters.

Remember, it may take a little more effort, but having a cross-browser compatible email is crucial for your marketing efforts.


© Justin Herren 2021 | Art Director + Designer