Dynamic display ads are the recommended way to run display campaigns on Google Ads and the Google Display Network. Dynamic ads with animations and motion graphics are more likely to catch a user’s attention and result in a click.

However, not all campaigns have the budget or time to create a full suite of HTML5 display ads recommended by Google Ads. Rather than using static image ads, .gif display ads can offer a nice balance between production cost and end results.

The Problem: Google Was Rejecting Our .gif Display Ads

The Google Ads platform is picky about which .gif assets it allows to be uploaded for use. Even worse, in our experience, we kept receiving the same error message that didn't even correctly identify the problem with the assets we were trying to upload. “We've detected strobing or Flashing effects. Make sure the frame rate of your ad is less than 5 FPS for GIFs. 

" kept popping up, despite our .gif display ads being below 5 FPS. So, what do you do?

In our experience, the answer lies within specifically, how you are exporting the animation from After Effects into a .mov file and then, what method you are using for compression and how you are converting that compressed file into a .gif. Previously, we created .gif display assets as a video file exported from 

 at 4fps, then converted that .mov into a compressed, web optimized .mp4 using 

's free video compression tool and lastly, to a .gif using Photoshop’s import “video frame to layers” feature, or 

free video to .gif conversion platform. It's a process, but one that met the picky standards of Google. Until it didn't. 

Assets produced this way were being denied by Google Ads and causing frustration. We had to figure out why. It took some trial and error, but the solution to this issue is relatively simple. Once you know it.


The Solution: Export .gif Ads as PNG Sequences from After Effects

The solution that we found to make Google Ads accept our .gif ad assets was instead of exporting them from After Effects as a .mov and converting that .mov file to a .gif file; we exported as a "png sequence" for each ad. Essentially a series of images/frames rather than a movie. This allowed us to have full control over the mysterious frame rate issue and the png images/frames rendered higher quality as a frame by frame animation rather than a .mov file, converted to an animated .gif. We then used the png sequence and brought the series of images into Photoshop to create the .gif files for use in Google Ads. A step by step breakdown of this process:

Create your dynamic animation for the display ads in After Effects

Export your dynamic display ads as a .png sequence from After Effects

Import your series of images into your Timeline in Photoshop as “frames”

Customize your frame rate, timing and tweening 

Export for web from Photoshop as a looping .gif

A few parameters that Google Ads has in regards to these ads that you should keep in mind include:

The simpler the animation, the easier this is to meet

Animation length must be 30 seconds or shorter - 

Recommend a short, looping animation. You don't have a users attention for long with display ads. Make the movement more ambient rather than necessary to the message  

Animations can be looped, but the animations must stop after 30 seconds

Animated GIF ads must be slower than 5 FPS - 

Make sure you set your frame rate in step 1 - Go to After Effects > Compositions Settings > Frame Rate to adjust

Full Display Ads Specifications from Google

So there you have it, use this process to create .gif display ads accepted by Google Ads. There are other ways to do it, but we've found this process to provide the best quality, the most control and the best chance to meet the 150kb max file size requirement.

Remember, if your budget or production timeline is tight, .gif display ads are the perfect solution for your next campaign. Good luck!

Strategy

Marketing

How To Upload .gif Display Ads to Google Ads

Like the NCAA tournament returning to CBS and our homes, we returned with another food beverage knockout tournament of our own! After crowning breakfast burritos as the champions of breakfast food last year, we wanted to settle once and for all which beverage was our social media audience’s champagnion!

 breakfast food tournament, VIA Studio wanted to celebrate March Madness’s return this year with an updated take on the tournament. After internal discussions surrounding a new tournament theme, we ultimately decided on doing a beverage theme for 2021. Sixty-four beverages were selected to represent four different regions; Soda, Beer, Cocktails, and Wild Card.

Internal polling was conducted to determine the seeding of the beverages and new branding was created for this year’s edition of the tournament.

With a theme selected and assets developed it was time to promote the event. For our existing social media audience, teaser story posts were published on our 

 profiles soliciting guesses about this year’s theme.

Finally, a week before the tournament sipped off, this year’s theme was announced on social. Immediately afterward, an announcement email was deployed to our eNewsletter audience, directing users to follow us on social to participate and to read the case study for the 2020 Parched Madness tournament.

For the actual execution of Parched Madness, we generally followed the same format we had created with Starch Madness. When the tournament kicked off, Facebook and Instagram stories with polls were published to allow the VIA Studio social audience to vote on the winner for each matchup. The winner of each round moved on to the next round, while the losers were poured out.

One wrinkle in the campaign that was not experienced last year was the event of a tie. In the round of 32, two matchups resulted in a tie; Dr. Pepper v. Ale 8 and Saison v. Belgian Tripel. The design team quickly whipped up tiebreaker graphics, an announcement was made via Facebook and Instagram stories, and a tiebreak round was conducted, with Dr. Pepper and Belgian Tripel emerging from the tiebreak victorious.

Ultimately after four rounds of voting and the elimination of 60 beverages, just four remained; Coke, Pale Ale, Margarita, and Water.

After Coke spilled the Pale Ale and Margarita chugged Water, we were left with our finals matchup. Coke versus Margarita. With the ultimate Champagnion, Margarita, being announced the morning of the Men’s NCAA Tournament Championship.

Over the course of Parched Madness, 5,056 story poll votes were recorded, 423 of which went to the ultimate Champagnion Margarita. Impressions for VIA Studio Facebook and Instagram profiles increased +9% compared to the previous period. Meanwhile, the overall audience for the two profiles increased by +1%.

The overwhelming majority of Parched Madness engagement happened on Instagram. With Facebook story polls receiving less than 2% of the overall vote.

On Instagram, impressions for the VIA Studio profile increased +19%, engagements increased +48%, and engagement rate for the channel increased +24% for the duration of the Parched Madness campaign.

However, total votes for Parched Madness fell short of the benchmark set by Starch Madness last year. Parched Madness’s total votes were just 83% of the total set last year. However, the dropoff in engagement could be due to Starch Madness running during the beginning of the Covid-19 pandemic lockdown when many users had more time to spend on their phones.

 exercise that allows VIA Studio to offer an engaging event for our audience. In the meantime, let’s all lift our Margaritas in celebration!

Parched Madness 2021 Recap

Recently VIA Studio launched our first streaming audio campaign for the Jewish Community Center of Louisville on Spotify. The process of setting up and launching this campaign could not have been any easier. In this blog post I hope to share some of my learnings and insights to empower anyone to give advertising on Spotify a shot.

Spotify offers a low campaign minimum budget and an array of targeting options all provided within an easy-to-use dashboard. An additional benefit that made a first run/trial of the platform an easy decision was that the platform can produce the audio asset for free!

However, one of the first things to note about advertising on Spotify, or really any sort of streaming audio/video platform(s) is that this tactic should not be used on its own if your intention is conversions. Streaming audio/video typically represents an awareness play given the nature of the platforms and how the users interact with them. Users are less likely to click through on an ad while listening to music in their car or unwinding in the evening with their connected TV (CTV) device like a Roku, Apple TV or Amazon Firestick. In the case of our Spotify ad, we had other, more direct conversion tactics running in conjunction with it including Facebook and Google display ads and paid search.

However, if your ad is engaging they are likely to remember your brand and what you are offering. With that in mind, the goal of our campaign was to raise awareness not just for the Jewish Community Center of Louisville but also for the fall membership the ad was promoting.

All that is required to set up an account on Spotify Ad Studio is a Spotify account, free or premium. The Spotify account is what is used to login and manage the Spotify Ad Studio account.

Once an account is set up, you are ready to begin planning your first campaign. In your Spotify Ad Studio account dashboard simply select “Create Ad.” The first step to setting up your campaign are selecting what you are promoting. Options for this step include “Music-related” which is used to promote an artist/band’s music, concerts or merchandise on the platform or “Non-music related” which is used for a brands, products, or organizations. Followed by naming your ad/campaign.

Once setup is complete, it is time to determine your budget/schedule and who you want to reach. First select a start and end date for your campaign and input your budget. Your budget will be evenly distributed between start and end dates. A minimum budget of $250 is required to run a campaign.

Next, you will need to set your targeting. The first aspect of targeting on spotify is geographic. You must first select a country and then locations within your selected country. Locations can be as large as the entire county selected DMAs or cities or you can target down to specific ZIP codes, which can be imported in bulk.

Once your geographic targeting is in place, it is time to select your demographic targeting options. These include age (13 – 65+), gender (male, female or all) and device type (iOS operating systems, Android operating systems, desktops or all).

The last set of targeting options are interest-based. They include interests, real-time contexts, and genres:

Interests are determined by a Spotify user’s recent podcast and playlist listening, as well as streaming platform. 18 interest options are provided to mix and match and they include topics like comedy, fitness, travel and tech.

Real-time contexts target people in specific moments, as indicated by the playlist they’re currently listening to. 10 real-time contexts options as provided including cooking study and workout.

Genres selections target people based on the genre of the song they heard immediately before hearing your ad. There are 26 genres to choose from.

You can also decide not to use any targeting options by selecting, “No additional targeting.” This will maximize your ad’s reach but could result in wasted impressions on users who aren’t interested in your product or service.

Don’t worry about being unsure of how your budget and targeting selections will impact your campaign’s reach. A status indicator exists on the right hand side of the screen that updates with each selection you make. This indicator provides estimates for cost per ad served, budget delivery likelihood (how suited your budget is to your audience), estimated ads served and your estimated reach. The budget & targeting options can be changed/updated to maximize your ads effectiveness for any of the metrics indicated on the screen.

One of the most appealing aspects of Spotify Ad Studio is that Spotify can create an audio file for your ad for free. In the Creative step of campaign set up, users have an option to upload their own creative or request voiceover. While uploading your own audio file provides greater creative control, many users either don’t have the capability to produce an audio file for their ad or would rather use their budget for the campaign itself.

Users who choose to upload their own audio files can reference 

This article however will instead focus on the process of requesting a voice over from Spotify. However, the first steps in the creative process are to provide an image to associate with your audio ad. This image must be 640x640px and only JPEGs or PNGs are supported. This image will show where a song or podcast episode’s cover art would be displayed. Additionally, a user must provide a click through URL for their ad. It is best practice to include not just the landing page’s link but also a UTM that will enable your analytics platform to properly attribute traffic from your Spotify ad.

Once you have provided an image and landing page URL for your ad you are ready to provide direction for the generation of your audio file. The first step of this process is to upload you audio script. Your ad script must be 70 words or less and be presented exactly as it should be read by the voice actor in the language you requested. A few quick tips for your script ad copy include:

Start the ad with your organization and offer

Provide benefits about you product/service

End with a clear, easy call to action like “our store is located at…” or “visit our website atâ¦”

For the URL in our ad, we provided a vanity URL that would be easier for listeners to remember and enter later. The vanity URL redirected to our landing page and had a unique UTM so we can track website users visiting the site from the URL read in the audio ad. This UTM was different than the UTM used as a click through but both used the same campaign value so we could track the total amount of traffic coming from the campaign but also how users were accessing the page. Did they click through via their app or enter via the vanity URL read in our ad?

Next you can provide direction for the voice actor in a subsequent text field. Instructions can include proper pronunciations, where to put emphasis and tone or emotion.

Following the “Instructions for the voice actor” are 2 dropdowns that help Spotify select the voice actor. The first is the language and dialect (for example “English – North America” v. “English – England”). The second is the voice profile. There are 10 options including age & gender specifics:

Lastly, Spotify will ask you to choose or upload your background track. A background track is not required to run an ad. However it is a good idea to find a background track that matches the tone and energy of your product or service. Spotify offers over 25 free, unlicensed tracks for ad creations in genres like acoustic/folk, electronic, pop, hip-hop and rock. If you chose to upload your own track be sure to confirm that it is license free or that you have permission to use it.

One issue I encountered was that there is no way to share music provided via Spotify so client approval of the music had to come in person.

Once the creative options are set you can submit your campaign and audio request to Spotify. Spotify will generate the audio ad asset and have it available for review within 24 hours. In my experience however, Spotify got the ad back to us for review even sooner. Once the ad is available for review users can approve or make revision requests. If revisions are needed, they are made within another 24 hours.

Once your campaign is launched, Spotify Ad Studio offers standard reporting on the campaigns performance including impressions, reach, frequency, clicks and CTR and amount spent.

Following the launch of your campaign you will begin to see results in real time. Spotify campaign reporting will also give qualitative data on campaign performance including audience demographics (age & gender) as well as what genres and platforms your ads are being heard on.

Over the course of our month long campaign, 13,251 impressions and a reach of 8,713 were recorded for a 1.52 frequency. The campaign recorded 27 clicks from the ad within the platform and 2 additional visits from the vanity URL provided in the ad’s script. Most importantly, the campaign helped drive a significant increase in membership inquiries, particularly during the last 2 days when the Fall Promotion was coming to a close.

Overall the Spotify Ad Studio offers a cost-effective opportunity to reach users in a format that lends itself to raising awareness for your brand, product/service or promotion. Additionally, given low budget requirements and the option for free creative, it presents an easy entry ramp to test streaming platforms for your next campaign.

As an added bonus here is my Spotify workout playlist:

Spotify - A Low Barrier Option for Entry into Streaming Ads

Email development has always been the bane of a web developer's existence. You have to use outdated methods and don't have access to the full modern web to create a nice looking email that thousands of people will see. It's like asking a Nascar mechanic to create a car using only tools from the 90s - it can be done but its more than a pain.

With time, however, email development has become easier and more developer-friendly. Gone are the days of creating the email entirely with images and then cutting it up. Now you can breakout out the tables and creating a responsive email that looks good on all clients, even Outlook.

The largest part of developing emails is how the email is actually rendered by the email client. While this seems pretty straightforward at first, the fact that every email client uses a different rendering engine or has its own quirks turns what should be pretty simple into a much larger beast. There are versions of Microsoft Outlook that using `margin` does not work, however, using `Margin` does. Keeping on the Outlook theme, it either uses Microsoft Word or Internet Explorer as a rendering engine. You don't have to be super tech-savvy to understand maybe using Word to display essentially a website may not be the best thing...

However, as time has progressed the rendering engines have gotten better and more standardized. While there are still a lot of quirks, you can build something and be fairly confident that it's going to look good across the board. With the iPhone and smartphones forcing email clients to account for media queries and Gmail dragging everyone along, it's not too bad developing emails.

Outlook is no longer the dominant client as the Apple Suite and Gmail have taken over.  Mobile reigns king as well with the top client being the mail application on the Apple iPhone. 

When I first started out in the web development industry as an intern, my first task was updating emails for clients. Even in 2013, this was a process of opening up the email in a HTML editor like Sublime and going thru the spaghetti code trying to make the changes. After a few weeks of email development, I understood why the intern got that job.

Today, the process is much more smooth. Here at VIA, we use three tools primary - 

. The first tool, MJML, is a development tool that allows us to create clean code and modular emails. It also includes a library of tested skeleton components that we can use in the emails and know they work already. It also will build the email and take care of any quirks and will inline and optimize the email. Using this tool has cut down on development time tremendously.

MailChimp is used primarily to manage email campaigns, contacts, and gives marketers the ability to visually edit email templates. MailChimp has the ability to import templates created elsewhere and use tags to create editable areas. Custom templates can be reused and customized for different campaigns. Gone are the days of having a developer create each email for the marketing team.

The other tool that we use extensively is Litmus. Litmus is an email testing tool that allows you to see your email in any of the major email clients. For instance, we have the ability to see what the email will look like in Outlook 2007, 2016, iOS Mail, and Gmail all the same time. It also has other features such as live editing and accessibility tools. With Litmus, we don't have to have the actual devices on site - no old Windows machine with Outlook on it.

When designing an email, a designer and developer at VIA first sit down and go over the constraints. We use the tried and true width of 640px as the base of the email and then try to design everything as blocks with no overlap. There is also a reminder on what modern CSS attributes, such as box shadows, do not work for emails. Previously, since it was a giant image being cut up or a much simpler email design, there was no need for dev and design collab.

Once we have a design approved by all parties, development starts. The email is cut up into the blocks and each is developed as a component in the email. Using MJML we are able to import these components into the main email file. In the end, we end up with a nice folder of components and an external stylesheet that is easy to navigate and make changes.

From there the email is imported into MailChimp, our email campaign tool of choice, and content loaded in. The email is then sent from MailChimp to Litmus to be tested in the major email clients. Typically there are the normal changes and then a set of Outlook only changes that have to be made. These revisions is typically resolved in one or two tests and then the email template is updated in MailChimp and sent for final approval.

Once this email template has been created and tested, it can be reused by the VIA marketing team without any help from developers. No more interns having to make changes.

Development

Email @ 50: Email Development

You’ve probably noticed a sudden proliferation of your friends on Facebook asking for donations for their birthday recently on Facebook. But underneath that is a major new feature for any non-profit that has a presence on Facebook (I assume that’s all of them!).

 – and we’ve just recently set this up for our friends at 

 Do With Facebook Donations … but there are workarounds.

It’s pretty simple, really – Facebook users can donate money using a credit card on the desktop in or in the Facebook mobile app, and it goes directly into the account you specify when you sign up – and Facebook takes ZERO fees.

Like any non-profit verification process, you’ll need to provide proof of your status, etc. This is 

what Facebook says you need to get access to these Charitable Giving tool

Be a 501(c)(3) organization registered with the IRS.

Have a bank account registered with a licensed financial services institution. Bank account details, including the bank name, bank account holder’s name (organization’s name), and a legible and official bank letter or statement dated within the last 3 months.

The date of birth and address of the charity’s CEO or executive director.

Add a Donate Button to your Facebook Page

The most noticeable thing is that you can add a “Donate” button to your Facebook page, like so:

Similar to those birthday fundraisers, anyone on Facebook can now fundraise for you. On your page, you will now see a “Fundraisers” option. You can share this link with any Facebook member, and they can start a fundraising drive for your organization.

The donation creation form looks a little something like this:

Another hidden gem is that anyone can add a DONATE button to one of their posts, just by choosing “Supporting…” from the “Feeling/Activity” button:

They’ll be asked if they’d like to “Add a Donate Button”, like this:

And it will eventually appear like so in their Facebook Feed:

What You CAN’T Do With Facebook Charitable Giving Tools (But There Are Workarounds):

You Can’t Create Ads That Drive People to Donate (on Facebook)

Nope, can’t do it. However, if you’ve created Facebook ads before, you’ve likely see the “Donate Now” call-to-action button for ads. 

 button is actually for offsite donations, and it works like so:

But, You Can Create Ads for Offsite Donations

This has nothing to do with Facebook Charitable Giving tools, but does give you a way to ask for donations, if you have a website that is taking donations for you.

This works like any other off-of-Facebook targeted ad, except you should change the call-to-action button to “Donate Now” instead of “Learn More”:

Which will look a little something like this:

Louisville Leopard Percussionists on their website

And, if you’ve never witnessed them before, I suggest this charming video where Ozzy Osbourne and his family are brought to tears at their professionalism and joy while they perform his hit 

Facebook Donations: How to Add Charitable Giving Tools to Your Non-Profit's Facebook Page

One of the unique values of working with VIA Studio is our ability to manage and integrate brand, marketing strategy, and digital seamlessly. You'll see this reflected in our work with our most valued clients, such as WARE.

In late Summer 2020, we began a partnership with WARE Inc., a commercial & industrial boiler rental and service company specializing in sales, rentals, service, parts, and boiler training. WARE was looking for a partner with strong digital skills and enthusiasm to match theirs. WARE was already a well-oiled machine with a digital marketing ecosystem that included their 

, ongoing digital campaigns, a CRM system that needed to be migrated, and a list of work they wanted to get started on as quickly as possible.

One of the first tasks we undertook after beginning our partnership was an extensive audit of WARE’s ongoing paid search campaigns. We immediately took stock of what was working well and should continue, what needed to be updated to improve performance, and collaborated with WARE on creating campaigns to take advantage of uncovered areas of opportunity.

With the audit complete, the first campaigns we set up on behalf of WARE was a boiler rental campaign that targeted users in Texas and surrounding areas. This campaign had an immediate impact as shortly after it was launched, the February 2021 blizzard in Texas knocked numerous plants and facilities offline, and WARE was able to help these areas with fast and efficient boiler rental services.

VIA Studio also launched campaigns to support WARE’s boiler room parts and supplies website 

A product-specific campaign to promote their introduction of Armstrong traps 

A general awareness display campaign promoting the website to boiler technicians, plant and facility operators, and others in boiler and boiler-adjacent fields.

Along with the digital marketing campaigns, we quickly got to work making a slew of enhancements to 

. After completing a thorough analytics and user experience (UX) audit, we discovered that site search was how most users were navigating the site and making purchases. Leveraging a predictive search service, 

, we enhanced the site search experience to make it predictive - making the search far faster and more functional.

Lastly, we developed product wishlists for BoilerWAREhouse.com so boiler technicians can easily keep track of products they regularly purchase but perhaps not at regular intervals. These product wishlists can be set up for specific boiler rooms they work on, products specific to a piece of equipment, or however the purchasing technician needs to keep track of their supplies.

A vital part of every website enhancement implemented on BoilerWAREhouse.com are user experience considerations. Each update was planned and executed with user experience front of mind for our design team, in collaboration with the VIA strategy and dev teams. User flows, barriers to conversion, and web design best practices were at the forefront of every update. 

Whenever possible, user data from Google Analytics and 

, an all-in-one conversion optimization suite, was leveraged to ensure we were informing our decisions with user data.


Customer Relationship Management (CRM) Services

When we began our partnership with WARE, they were using 

 as their Customer Relationship Management (CRM) platform but asked for our help to migrate to a new platform, 

. In conjunction with WARE’s internal team, we migrated their customer and lead data, set up lead services for their various website forms, QA the new service, and wind down their use of HubSpot.

With their data and services migrated to their new CRM service, we got to work setting up visual workflows for their various lead forms to make sure that users were receiving proper automated email follow-ups, our and being informed about additional, relevant services from WARE.

Similar to the visual workflows, we also created a cart abandonment email workflow for BoilerWAREhouse users. These cart abandonment emails remind users of products that have been left in their carts and encourage them to return to the website to complete their purchase. These cart abandonment emails can also include promo codes in the future to further entice users to complete purchases.

With general workflows in place, VIA Studio is now working with WARE to leverage personas and customized workflows to ensure that all automated communication from WARE is relevant to the user, their role, and their needs. These workflows based on personas will offer an even greater level of personalized content and customization.

In addition to our technical services like website updates and CRM management, we are thrilled to have opportunities to flex our creative muscles with WARE and assist them with content generation for various marketing needs.

One of the first tasks we undertook for the WAREInc.com website was managing 

 and creating content for it. We started with an audit of their current blog articles to determine what content resonated most with their audience and recorded the most engagement. We also reviewed WARE’s YouTube channel, 

, for inspiration as well. We ultimately agreed to a blog publishing frequency of 2 articles per month with all new content and custom imagery.

We develop social media content calendars on a monthly interval to ensure WARE is always active on their various social media platforms. This content includes the promotion of services, blog content, and observations of holidays and staff achievements.

Another content generation project that we launched at the start of this year, a quarterly email newsletter. This newsletter ensures the latest WARE news, services, and promotions are regularly delivered directly to subscribers’ inboxes. Given the amount of content generated each quarter on behalf of WARE, it often acts as an overview of some “in case you missed it” pieces, with a couple of new elements developed specifically for the newsletter.

A year into our relationship with WARE and our partnership has been even more fruitful than either party could have anticipated. WARE’s strong desire for a truly collaborative partner who can not only accomplish their ongoing work but be bringing them new and exciting ideas to execute has kept the WARE account team on their toes, but to be honest, we wouldn’t have it any other way!

And if you think we're just blowing steam, take our client's word for it!

"After several marketing firms and many missed deadlines, we have finally found someone that is both creative, technical and on time. Working with VIA has been a breath of fresh air as their guidance, new ideas, organization, technical ability and customer service has been exactly what we have been looking for. We are excited for the future to keep dreaming and planning with their team. Finally our success is in partnership with a firm that gets it."

- Ritchie Ware, WARE Inc. Sales & Marketing/Chairman


WARE + VIA Studio: A Partnership that can Handle the Pressure

Articles, insights, events and announcements from VIA Studio from every discipline we offer. Sharing our knowledge with our community. Sign up for The VIA Monthly email to get a digest in your inbox.

The Journal

I remember when I first started out as a designer (professionally), having to play Photoshop Tetris with cut up image blocks to piece together a full email layout. As a UX designer, we are taught that nothing is more important than usability and utility … and let’s just say, nothing puts those things to the test quite like Photoshop Tetris. Thankfully we have more sensible solutions now, but email design still comes with its added constraints and limitations. Luckily, I’ve had enough time and practice to be able to share a bit of knowledge, tips & tricks with you fine folks. So, let’s cut it up:

That’s the main thing. What works for one browser/client combo, may break for another.

There exists a sea of inconsistencies across browsers and platforms that you must be aware of in order to make sure an email functions cross-platform … Which makes designing for email uniquely challenging. Email forces designers to simplify, limit chaos of content and reduce cognitive load for the user. You don’t have a lot of space and you don’t have a lot of time, so using both wisely becomes immensely important.

Overcomplicating with tons of drop shadows, too many grid alignments, massive visual assets, or fancy fonts (which usually means image-based text

 us to pay closer attention to decisions being made, it’s also making us more thoughtful designers. In designing for email you 

 to prioritize and strategically solve the challenge at hand.

It’s a balancing act between performance and design. An email can look beautiful, but not be effective, in which case it’s not a successful email. Emails are not meant to be a piece of art, they are measured by specific metrics that dictate good vs bad. Design works as an addendum to the customer experience of the email’s content and messaging. It’s used as an aid to the overall strategy and as a line item on the grading rubric of performance for the success or failure of a campaign.

The biggest mistake that is consistently made in designing emails is simple – complexity 

. We try to limit that desire to overcomplicate in our own process at VIA by collaborating early and often with the development team. When designing an email, a designer and developer get together and go over the goals at hand and constraints within our email editor of choice. This helps eliminate future issues and aligns our priorities before any design work is done. It ends up being a huge time-saver and efficiency boost.

After eliminating complexity in handoff and process, you then must focus on the design itself. Remember, it’s about serving the person you're sending the email to, not your personal design vision or preferences. Email isn’t the place to test out complicated layouts and fancy designs. Use that energy on the consumer, their needs, and the effectiveness of having a focused message.

Tip: If you are really looking to get cute, throw in some fun or engaging copywriting. Copy can go a long way with holding your audience’s attention. BUT, keep it short and sweet. Most people spend less than 15 seconds reading marketing emails, so prioritizing is key.

So, going back to the constraints and limitations that I keep referring to. You must be asking – “Are there 

 rules I can follow?” It’s a loaded question but a valid one. My answer is – There isn’t really a single checklist to follow. Rules are ever-changing, BUT there are guidelines and standards to keep top of mind to improve your chances of success. Let’s run through some.

The first is simple and it’s that you need to 

. A common example of what not to do here (it’s one that I see often) is having an image with a block of text or headline in it. It looks PERFECT on desktop. It’s large and in charge, eye-catching and memorable. But when you go to open it on your phone, you need a magnifying glass. People utilize mobile email. Cater to them.

. Use trends that lend to legibility like high contrast and large body copy. Make it scannable and quick hitting. A tried-and-true layout doesn’t have to be boring – It can be adapted for any brand and made unique.

To ensure email renders for every client, 

for your design. I personally keep designs to 600px wide.

If you are using visuals in your email, be sure to 

 before uploading. Especially on mobile, large images take large amounts of loading time. I find that 

 is incredibly helpful for sizing down images without compromising quality. You’ll also want to save images out 2x the intended size to ensure that they are nice and crisp. Then, you can adjust the image attributes or CSS to scale down

. This will make your email more accessible. If your image doesn’t load, the text will still be shown (or read for screen readers), so the message isn’t entirely lost.

 Personalization has been linked to success in emails. Whether that’s using the person’s name in the email subject (personalized subject lines are 26% more likely to be opened), catering content to specific audiences, or using relatable, custom photography that speaks to your brand.

This one is a bummer, but it’s important. 

. Email-safe fonts have the highest likelihood of being downloaded on your audience’s computer, thus rendering in the email without altering the design. Here is a list of the fonts considered most bullet proof:

. Make your email design digestible and give each section its own space to live. This helps guide your user along a curated path, without being overwhelmed by content and calls to action. It limits cognitive dissonance and increases likelihood of conversion. Win, win.

, I tend to stick to 1 column layouts, at least 16px font size for body copy, and keep said copy short and focused.

(easy to click) with not a lot of copy (easy to scan). Typically, I go 50px tall for CTAs and for the button-copy, I use a verb or action word to reiterate the call for the user to complete an action (EX: read, visit, learn, explore).

Make sure your images are large enough and 

. If they are tiny and busy, the message can easily get lost when scaled down.

 There are technically ways of including video in an email, but the success rate is low. Almost half of all email clients don’t support the technical requirements required to play a video in an email. You’re better off converting that mov or mp4 to an animated gif. Shorter load time, higher success rate and auto-plays.

Here are some examples of successful results following the above criteria by brands that consistently put out engaging, successful email campaigns.

I’ll leave you with a bit of confidence in where I see email design going and our current process here at VIA.

Clean code supported by a modular based design. 

Component based design allows you to mix and match to create unique templates that feel consistent but different at the same time. Rather than 1 restrictive template design, you have 9 or 10 modules to pull from for different instances or content types. It makes the design more flexible. I’m a strong advocate for creating patterns or building a visual design language and emails are just another outlet where I find that to be a successful approach. Here are a couple of examples of companies reusing components / establishing a design language to come across as consistent, but unique each time they send something out.

 to keep in mind when designing for email, but I hope the tips and tricks provided in this article help give you a solid foundation to build on. 

Email can be a beast and each discipline has their own set of principles and rules that they need to follow (which is why we did this series ☺). Be on the lookout for more posts on email in the future, and in the meantime, feel free to go back and read Nick Stewart's 

 from a developer's perspective and/or Nick Wunderlin's 

Reach out if you have any questions! Unless it’s about Photoshop Tetris. Can’t help you there. I’m retired.

Design

Email @ 50: The Art of Email Design 

Knowing how to deliver feedback constructively in a creative setting takes practice. That practice can be difficult and awkward at times, which is why I’ve carved out some tips on how to make the process go a little smoother. These tips begin with all the members of a critique leaving their egos at the door and being committed to making the work the best it can be.

If you are not in a formal critique atmosphere, always ask if feedback is welcome and needed at this point in the project. Using phrases such as, "Can I give you some feedback?"  "Are you open for feedback?"  "What kind of feedback are you looking for?" is a great way to start the 