Category Archive: Design tips
Meet Emma designer Elizabeth Williams
Elizabeth shares tips for customizing your email's format and making your content stand out
Elizabeth works ... and wears her thinking cap.
You’ve designed custom email templates for Emma customers. Templates frame content nicely, but what do you recommend for arranging the body of an email (its text and image fields)?
Great question. It’s best to have your content strategy determined before you get to design. Establishing a content hierarchy is so important when making complementary visual hierarchy decisions. Here are some questions to ask yourself about the content that will help to inform the design:
1. How often do you want to send?
Sending often might mean sharing just one or two stories per email. Sending a newsletter-style monthly or quarterly email requires you to give a bit more thought to how all the stories will come together — and how your design elements will support the story.
2. What do your subscribers respond to?
Do they tend to click more on image-based links or text-based links? Do they click on stories at the top of your email, or are their clicks dispersed throughout the email? Are they mostly mobile users? The answers to these questions will determine how you should lay out your content.
3. Is the amount of content you’ve chosen easily replicable?
For example, if you have four articles each month and you want an image to go with each, do you have access to great imagery that will support each article every time you mail? If not, you may need to rethink what you want to do there, or think about having an in-house designer create images that you can re-use. Or, ask the Emma design team. We love making designs that work for the resources you have access to!
4. How does your brand use imagery, and how can that imagery best support your story via email? Could you utilize custom image-based headings?
Image-based headings really add pop and personality to an email.
5. What’s your message hierarchy?
Do you have a featured article each time? Do you have a big image up top that spans the width of your stationery? This will help you determine if you’d like to use a similar story layout each time, or if you’d like to switch it up each month, based on the news at your company.
Other questions to consider: Can you reduce the amount of copy and let some images do the talking? Or better yet, can you create teaser copy that links to the full stories elsewhere? Can you use a sidebar for quick links, ad space or smaller supporting elements (as opposed to primary/secondary items in the content hierarchy)?
I find headlines, subheadings and body text hard to balance visually. When you design a stationery that’s meant to employ consistent headline and body copy (like Emma’s Agency Insider), how do you find the perfect balance?
A good headline is powerful. It needs to entice the reader, and it should be very distinguishable from the body copy. There aren’t really set-in-stone rules for this type of thing since there are many ways to achieve a good balance between headline, subhead and body copy. Here’s one test you can do: after you style your copy, scoot back from your computer and make sure the first thing you see in the text is are the headlines. If those are somewhat distinguishable from a distance, you’re on the right track. Typically, playing with bold, italics, text-based divider lines (using dashes, forward slashes or Emma’s horizontal rule tool) and color will all help to create the right balance, but always remember to self-edit.
Choose two or three styles to make each section distinct and stick with them. Don’t oversaturate your text with styling. If you use much more than two fonts, two colors (even accent colors), more than two or three font sizes, it’ll look cluttered. And just because I have your attention — no comic sans, please.
I’ve noticed that most folks stick to a clean sans-serif font, like Helvetica or Verdana. The Uppercase email (below) is a nice exception. Mixing font choices can be tricky, though. What holds this campaign together even though it employs a number of different typeface styles and colors?
Uppercase blends several fonts and colors in their email.
Also, since that particular copy is in letter format, the serif font gives it a more classic, formal feel which is in contrast to their use of a sans-serif in the sidebar for more ad-like copy; they want to get straight to business there. Within that serif text in the main well, they’ve highlighted what they consider the most important piece of information by changing the color of the type and using bold and italics when appropriate.
I like mixing sans-serif and serif fonts in headline and subhead copy. I typically prefer the headline to be in the serif font and the subhead in a sans (Georgia and Tahoma provide a nice mix), with a very obvious font size difference. Using that mixture lends a classic sophistication to any campaign, but always have your brand top of mind when making that decision.
Oh, one last thought — using a serif font within your sans text for a pull quote is also a cool way to use the mixture and give it a more editorial feel.
In last year’s New Year’s Resolution design, you chose a striking purple color to highlight several areas, including some of the header text. I’m guessing it’s not a coincidence that this is also the shade of Claire’s lipstick in the design. But which came first? Did you isolate that color from the photograph? Or did you plan the color scheme, then adjust the photo?
Elizabeth's design uses a striking highlight color in the text and image.
Pulling a highlight color from a logo or photograph is a great way to bring the email together visually. But, at least initially, it sounds a little daunting to those of us without design chops. What sorts of tips and tools do you recommend?
Since Emma’s email tools are simply an extension of your brand, I think the most daunting part is making the foundational commitment to your brand. That is, choosing brand colors, denoting the primary, secondary and accent usage cases for each, the font styles you want to use, etc. Get together with your team to build a brand style guide, then find the specific color codes for the colors you’ve selected.
If you’re working with an Emma designer, we’d love to help with color selections, and we can provide the proper color codes to input when using Emma’s text editor. If you need a free, on-the-fly “color picker” check out Eye Drop for Chrome, or Colorzilla for Firefox. You can identify the HEX code for your color, then input it in the Emma text editor.
I also like free photo editing tools like Skitch, Gimp and Pixlr. With a little practice, they become pretty easy to use.
What is the Emma design team up to now?
We’re really busy — and really excited — to be working on a new template gallery for Emma customers. They’ll be able to choose from hundreds (literally, hundreds) of free readymade templates, then customize the look of their campaigns with their logo and brand colors. It’s a lot of work, and we can’t wait to unveil the designs soon.
+++++
Emma powers the emails of more than 30,000 businesses, nonprofits and agencies. Get 60 days free when you join today.
Crazy about email design?
Our picks for the best design-related posts on the Emma blog
In the past year, we covered everything from fancy-lookin’ customer emails to email makeovers to (lots of) mobile design tips. In this roundup, we’re sharing the best design-related posts on the Emma blog.
1. Building a slice and dice campaign: Instead of compromising email deliverability with one big image, we taught you how to code an image into smaller slices.
2. Designing emails for smartphones: Guest blogger Anna Yeaman, creative director of Style Campaign, shared her top six mobile design tips.
3. Research, inspiration and doodling: Taylor Schena offered a behind-the-scenes look at her design process.
4. Stylishly formatted email campaigns: We featured five customers with effective content arrangements in their emails.
5. HTML code for email layouts: We gave you access to the code of Emma’s content layouts to use and adapt if you’re building campaigns with an Upload Your Own HTML template.
6. More mobile tips: Miles Price weighed in with more design tips for crafting emails for mobile devices.
7. An email makeover: We highlighted a refreshed email strategy and brand new look for Rumours Wine & Art Bar in Nashville.
8. Animated GIFs of the future: Cody De Vos paved the way for using animated GIFs in your email campaigns.
+++++
For even more design inspiration, see our design showcases.
What design topics would you like to see us feature next? Let us know by commenting here.
Typography 101: Know your serif
Get familiar with a few typographical terms and see your font library in a whole new way
The printer wasn’t always a machine that sat in the corner of your office, beeping out cryptic warning messages and accumulating slap-shaped handprints. Even a few decades ago, most people would have thought of a printer as a person — somebody whose work consisted of manually arranging and printing text and images. Professional printers are still plying and improving upon their trade, but thanks to the advent of the personal computer, we’ve inherited a great many of their tools in digital form. The problem? When those tools arrived, they didn’t come with any knowledge of the craft. It’s as though every computer owner has been given the keys to a master carpenter’s workshop, but hasn’t yet been shown how to swing a hammer.
Luckily, you don’t have to don a hooded robe and take the Typographer’s Oath to get a better handle on the fundamentals of your favorite fonts. In fact, once you’ve learned a few terms and distinctions, you may find yourself looking at your font options in a whole new way. So if you want to be able to talk typefaces like Leon from sales can talk about wine, pull up a chair.
Today, we’ll take a look at one of the most easily distinguished characteristics of fonts: the serif. But first, in order to understand the significance of the serif, it’ll be helpful to start off with a tiny bit of history.
Typography: a very condensed history
It’s almost impossible to fathom the fact that, for the majority of its history, the written word was exactly that –handwritten (or hand-carved). Many would suggest that the questions typography addresses are as old as the first alphabet. The size, spacing, legibility and uniformity of hieroglyphic characters would have certainly been a worthy concern — after all, if your “owl” looked too much like your “scarab,” readers would surely throw down your papyrus in frustration.
In the Western world, medieval scribes fostered a rich tradition of variations in handwritten scripts before the advent of the Gutenberg press in the mid-1400′s. Generally, it’s said that this invention, with its reliance on uniform, custom carved letters, heralded the advent of typography as we know it today. The emergence of distinctive sets of letters and characters during this time is also largely responsible for some of typography’s more archaic-sounding distinctions: gothic type? Roman type? What century are we living in?
Web-safe fonts
Hundreds of years and thousands of meticulously designed typefaces later, we’re awash in a sea of font options. Just opening up the dropdown menu in Word is enough to give the average user an anxiety attack. Web- and email-based tools like Emma make the decision a little easier. Have you ever noticed that your reading experience on the web is fairly uniform, and usually pretty painless? Web designers can’t be certain which fonts your device will come equipped with, so they’ll often restrict themselves to “web-safe fonts” — fonts that can be read on any device — to ensure that their readers see their content as they intended it. This is also the case with Emma’s font selection: instead of the Narnia wardrobe of fonts typically employed in desktop word processing programs, you’ll see 15 of the most versatile, popular and readable fonts available. There’s a lot of character in these sets of characters, so let’s take a look at one way you can distinguish them.
Serifs
Look at these two N’s. Notice a difference? The Times New Roman N on the left has little finishing strokes in all of the places where an individual line terminates; the Helvetica N on the right doesn’t. Those are called serifs. Easy, right? If serifs were just called “little taily things,” no formal introduction would be required!
For many, the serif conveys an old-fashioned elegance, and that sentiment has roots in typographical history. Serifs are said by some to emulate the initial placement of a flat paintbrush on a surface to shape a letter for a stone engraving — a bit of calligraphic flourish from an era that predates the printed word. In print (and especially in newsprint) serifed fonts are said to have greater readability. Readability actually doesn’t refer to whether the individual letters can be easily distinguished — that’s legibility. Instead, readability refers to the ease with which a reader can follow along over longer sections of text. Proponents of serifed fonts often contend that the additional finishing strokes help distinguish letter shapes and assist in guiding the eye horizontally across the page.
Times New Roman may be the most commonly used serifed font in the workplace today, thanks largely to its long reign as the default font in Microsoft programs like Word and Excel. As Word goes, so go many word processing programs, including our own. Times New Roman is a taut, functional font, but among typographers, its suitability as serifed fonts’ standard bearer is hotly contested. In fact, it’s no longer in use by The Times, the London newspaper who commissioned its creation and gave it its namesake back in 1931. For web use, many point to Georgia as a suitable alternative — the lowercase letters are closer in size to the uppercase ones, so even at small point sizes, the individual letters are larger and more easily read. Perhaps this is why the Times that we’re better acquainted with here in the States – The New York Times — employs Georgia as their main typeface for web headlines and articles. For those seeking a font that evokes an even earlier time in history — say, the Italian Renaissance — you might want to consider Book Antiqua. This serifed font boasts greater calligraphic stylization in its strokes, but its thicker lines and broader letters also make it highly readable.
Sans-serif fonts
Now that we’ve identified our serif, we need only dust off our French textbooks to identify our sans-serif fonts: sans means without. You may have noticed that the text on this page is sans-serif — the lines of the letters terminate without any ornamentation. The same is probably true of the typefaces in your email inbox and on your favorite news sites: in addition to their immense popularity in the material world, sans-serif typefaces enjoy special prominence on the web, where text is likely to be compact and frequently scrolled. In the pioneer days of digital typography, the clear lines of sans-serif fonts proved well-suited to pixel-based screens. Where ornately serifed fonts could dissolve into unwieldy, blocky characters, the cleaner sans-serif fonts could survive the pixelation more or less intact. While modern high-definition screens have all but eliminated pixelation as a serious text issue, the enhanced white space offered by thin, sans-serif characters is also thought to ease the reader’s eye when scanning an illuminated screen. This may be especially true of smaller screens — the default typefaces for all major mobile devices are sans-serif.
Consciously or not, this techie association has only strengthened the infatuation with the presumed clean, spare modernism of sans-serif fonts. Although sans-serif fonts aren’t a uniquely modern invention (serif-free Greek characters predate the Roman Empire, and their introduction in print dates back to the early 1800s), there’s a ring of truth to their association with modernism. This is especially true of Helvetica, popular design’s undisputed champion of the last decade. As illuminated in Gary Hustwit’s engrossing 2007 documentary, Helvetica, this striking Swiss font has become one of the most ubiquitous emblems of contemporary life. Engineered during the 1950s in accordance with the modernist ideal — abandoning the trappings of classical ornamentation in favor of clean, spare functionality — Helvetica has emerged as the rare font with rockstar status among design lovers. Emma customer service specialist and man of style Miles Price sometimes even wears his Helvetica T-shirt to the office. If Helvetica can be likened to a rock band, though, its closest analogue is probably U2: it’s wildly popular, critically laurelled, seemingly timeless and an easy target for ridicule. In fact, a great many trend-setting designers are consciously distancing themselves from Helvetica (and its Microsoft-commissioned, Emma-friendly cousins, Tahoma, Verdana and Arial). Consequently, while the sans-serif font remains a bastion of modernity, the design world has enjoyed a renaissance of ornately serifed fonts, both in print and on the web.
And beyond
Fortunately for the art form, there are plenty of font choices available beyond serif and sans-serif options. Many typefaces belong to different families entirely. Still, most fonts within your Emma account can be considered either serif or sans-serif, as can most of the text you encounter over the course of your day.
Fascinating stuff, right? Once you know where to look, you’ll spot all kinds of places where a change in typeface changes the feeling of an entire message. One of those places may be in your own email campaigns, so if you feel like subtly altering your voice without changing your message, now you’ve got something other than your intuition to help guide your choice.
Cody’s not a Certified Font Specialist, but he found a wealth of typographical information within the Emma design team, as well as in these posts from Co.Design, I Love Typography and Alex Poole.
+++++
Get email tips & tricks in your inbox. Sign up for Emma’s newsletters.
Every picture tells a story
How stock photos add visual appeal to your emails
Jessica enjoys a ferry ride from Victoria to Vancouver. (We're jealous.)
Today’s guest post is written by Jessica Hughes, social media and public relations specialist at Fotolia. Learn more on the Fotolia blog, or follow Fotolia on Twitter.
+++++
When you think about your creative content, many factors come to play: your copy, your font choices, the layout and, of course, the images you choose to communicate your message. In short, looks count.
It’s no secret – incorporating an image is powerful! It’s a fun way to engage and capture attention. What’s more, including imagery boosts your campaign’s impact and drives traffic to your site. The key is finding the right image to match your message. Here are seven rules and examples that show how to pack the perfect visual punch.
Rule 1: Grab your reader’s attention. You only have a few seconds to get your reader’s attention, and a sharp image will reel them in fast. Use clever imagery to compel people to read on so that your overall message is delivered from soup to nuts.
Rule 2: Use visual aids to enhance communication. You know that old saying, “A picture is worth a thousand words?” Considering that you don’t have a thousand words to interest an email recipient, why not let an image state your case? Choosing unique visuals that tell the story for you is an efficient way to get your point across.
Rule 3: Be bold. Avoid being too literal. Yes, your image will be subjective and influenced by your content to some degree, but consider other angles to make an impression. There are millions upon millions of royalty-free images available to you, so enjoy your image browsing and dare to be different.
Rule 4: Consider images that feature people. People like to look at people. Studies show that one of the reasons Facebook is such a hit is because of our fascination with what other people do. By nature, humans feel a need to relate to others. Using images with a person increases your chance of drawing your audience in.
Rule 5: Stay current. As tastes and styles change, so should your mindset for the way you choose images. While your intention for a certain image may be to show that you’re edgy, you wouldn’t want to turn anyone off. Get a feel for the lay of the land before you send. What’s new politically, socially or stylishly? You can be retro and still be cool, but do keep up with the Joneses.
Rule 6: Know your (image) rights. Get your pictures from a source that specializes in royalty-free stock photography. As tempting as it is to snag a picture from a free source like Google, it’s just not legal. Stock photography sites give you peace of mind and creative license. When you have rights to an image, you can modify it and turn it into something that completely embodies what you want to communicate. The avenues for creativity are limitless, and you better believe no one else will have an image like yours if you play it up.
Rule 7: Mind your specs. Aside from selecting an image that suits your concept, pay attention to colors and contrast –- they’re part of the “wow” factor, too. The colors in your image should complement the remainder of your content, including font styles and other branding. Resolution, aspect ratios and formats vary, so check out Fotolia’s usage guide to help determine what kind of image is the best match for your project.
There you have it. Seven tips to help you pick a fantastic image for whatever your needs may be. Remember, your image should be the butter to your bread. The dynamic sidekick to your content’s super hero. Helping fight crime and take the world one villain at a time. Or, wait … What I’m really trying to say is that the right image can help your message resonate with a resounding “POW.” So sock it to ‘em.
Email design for mobile devices
Quick formatting tips for stylish emails in any inbox
Every morning, I get the French press ready and hop on my iPhone to check the barrage of emails I received through the night. More and more of us are doing this (maybe not the French press, but I highly recommend it); we check email on our phones even before we eat breakfast or open our computers. In fact, Litmus says that almost 10% of total email opens come from mobile devices.
When you’re building your emails, you may be considering the mail programs in which your audience is reading them (Outlook, Gmail, Mac Mail, etc), but it’s an equally good idea to plan for your emails to be read on a mobile device. Inboxes can be tricky, and making your email look good in all locations will take a little time and dedication.
Building an email for mobile readers isn’t difficult, though, and it may even mean making your job easier — the best emails utilize fundamental design ideas. Let’s talk about what you can do to ensure your mobile readers have the same reading experience as your desktop readers.
Simplify your content. Mobile screen real estate is valuable; keep your design clean and simple. Evaluate your content and remove some of the less-useful information. Think about if that sidebar of upcoming events or staff photos could be removed and used in another email. If you’ve got a lengthy description around your product, let images and/or links to your website do the talking.
If you have navigation toolbars, these can get squished, thus breaking your layout and making it hard for people to tap those links. Consider paring the links down to important places your reader can easily tap.
Include an easy-to-spot call to action. This is arguably the most important part of your email. It doesn’t matter how people are viewing it (mobile or desktop), you want folks to see your offer and click through. Keep your call to action easy-to-spot and above the fold. And consider using your subject line to give the reader a sneak peek inside.
Note: When designing for mobile, make sure the call to action is tappable (at least 44 x 44 pixels, per Apple’s Human Interface Guidelines).
Enlarge your fonts. Fonts for emails read on mobile devices should be considerably larger than those in traditional emails. iOS devices resize all fonts smaller than 12 pixels up to 12 pixels, which can break your layout. A good rule of thumb is to keep your headlines around 22 pixels and body text around 12-14 pixels.
Mind your images. Aside from the iPhone/iPad, mobile devices will automatically block your images and prompt the user to “turn images on.” Be sure to add alt text to your images. That way, the reader will see a text description of the image before it’s displayed.
Be purposeful with your layout. Let’s face it: Mobile devices are going to sizably scale down your layout. This makes it more difficult to tap on links and read the content. Try using a layout that has only one or two columns of content. Here are a few layout examples, two that are mobile-friendly and one that would be better-suited for desktop viewing:
 |
 |
 |
| Simple, clear layout | Perfect for newsletters | Sidebar + newsletter layout may be difficult to read on a mobile device |
+++++
Since email for mobile is still a fairly new concept, there aren’t any hard and fast rules, but I hope these guidelines will help you design emails that look good in any inbox. For even more tips, read Anna Yeaman’s six mobile design tips, and share tips of your own in the comments section.
+++++
Like these tips? Sign up for Emma’s newsletters to receive tips & tricks in your inbox.
Visually appealing emails win every time
How to make your email pop in the inbox
We’re big fans of style, particularly when it comes to making your email stand out in your subscribers’ inboxes. Your brand is unique, and as you’re crafting the perfect email, pay mind to carrying over the look and feel of that branding you’ve worked so hard to achieve.
Let’s focus on some ways you can improve the look of your campaign without breaking a sweat. Implement these, and your subscribers can’t help but pick up what you’re putting down.
Emma's mailings provide variation while capturing our signature style.
- Make use of Emma’s world-class design team. One of our designers will work with you to create a design that reflects your brand’s personality. A custom, recognizable stationery establishes your campaigns in the mind of your customers, so they’ll take the extra moment to pay attention. Request your own Concierge-level Design or Studio Design today. Oh, and do you already have a stationery design, but want to freshen things up? It’s a good idea. Read about one customer’s email makeover.
- Make your own stationery header, DIY-style. Even if you’re not a Photoshop pro, you can use a tool like Picnik.com to create your own stationery header, which can be uploaded into a blank stationery. If you’re particularly fond of your design, our design team can also turn it into a permanent stationery option (removing the need to upload it each time). Submit your design through our online request form and we’ll get to work.
Consistency is key. When your campaigns have a consistent look, both throughout your email and also from one campaign to the next, your readers will become familiar with your style and appreciate it. Find a format that works for your brand to make your campaigns more readable. If recipients recognize and grow to trust you, the odds are in your favor that they’ll take the time to read what you’ve got to say.
- Format your text to work for you, not against you. You may be a fan of bright, bold multicolors, but they don’t always work in an email — at least not when it comes to its main text. Leave the rainbows behind and create a consistent look to your campaigns with a nice, readable font type, color and size throughout the email, perhaps with an accent color thrown in to draw attention to links or important bits of information. Your judiciousness will make your email easy on the eyes and also keep the attention of your readers.
- Consider putting a little work into your images on the front end. A consistent look and size of images will create a campaign that is pleasing (and easy!) to read. Our image editor offers the option to resize images to small (120 x 120 pixels), medium (240 x 240 pixels), large (360 x 360 pixels) and x-large (480 x 480 pixels). If these sizes don’t work for you, or if you need to crop the images, we recommend Picnik.com, an easy-to-use online image editor where you can upload, resize and save your images (and also add fun filters, text and borders), and then upload them to your campaign.
Your email is good enough to eat — so make it easy for your readers to digest. We’re busy. We’re bombarded with emails, social networks, phone calls, texts, you name it, all day long. If you have a lot of information that needs to be sent in an email, you can help out your readers by using a table of contents and landing pages to get them to the good stuff a little faster.
- Use a table of contents to help your readers get to the articles they’re interested in right away. A table of contents at the top of an email can easily direct a person to exactly what they want to look at without needing to scroll through everything. You can use Emma’s jump link feature to easily add a table of contents to your campaign.
- Use landing pages to tell the rest of your story. It’s an email, not a novel. Landing pages and “read more” links are used to shorten the email that’s sent to a person’s inbox while still giving them the option to click to view all of your content. It’s also a great way to measure the popularity of your content with Emma’s click-through reporting. Read about how to create a quick landing page using Emma.
Of course, there’s always a little wiggle room for you to add your own stylish flair to your email campaigns, but if you keep these tips on your radar, your emails will be runway-ready in no time. And if you’ve got some more tips for creating visually appealing emails, please share in the comments here.
This is part five in our holiday series where we answer email marketing questions provided by our customers. Visit part four here.
+++++
Just discovered Emma? We want to help you make email and social work together.
Does the arrangement of your email’s content matter?
Simple steps for more compelling emails
This isn’t really news, but it’s worth stating: Come holiday time, anyone with an email address is bombarded with marketing messages from retail, nonprofits and services. As an email marketer, it’s extra important that the emails you create and send are arranged in such a way that they grab hold of the recipient’s attention and hang on to it.
Sure, the style of your emails is key, but consider also how you package and display the information you’re wanting to convey. It’s the holiday season after all, and the presentation of the gift is half the fun, right?
- Determine the main point of your message and create a call to action. Think about the emails you currently subscribe to and what it is about them that keeps you reading. Something special stands out about them, right? Similarly, your email should tell a memorable story. And make sure to include a call to action that’ll pop. If you’re a local boutique, entice customers with a special holiday sale. If you’re a nonprofit putting the word out about an upcoming fundraiser, give your recipients a way to donate online. Adding buttons to your campaign to *go shopping* or *donate now* is a simple and stylish way to present a call to action. Take a look at the seasonal buttons recently put together by the Emma design team for inspiration.
- Maintain a healthy balance. We recommend an even ratio of text and images. A text-heavy campaign may be overwhelming to the reader, and an image-heavy campaign can affect the delivery of your campaign. Some servers look for that balance between text and images before deciding to accept the message and deliver it to the recipient’s inbox.
- Place the important content “above the fold” — but encourage scrolling too. Many recipients see their emails in a preview pane first so they’re catching the top of your message before anything else. Include important info at the top to catch recipients’ interest, but don’t stop there. Encourage scrolling by including teasers, a table of contents or animation. StyleCampaign recently shared a few tips, like incorporating vertical lines or arrows to guide the reader down the page, and Cody wrote a post here on the Emma blog about adding animated gifs to email campaigns.
- Make your campaign mobile-friendly. Most mobile devices now operate on touch, rather than the scroll and click of a keypad button. Fonts come across small, and it’s easy to fumble your thumbs when moving around the email and clicking links. Avoid stacking links at the top of the email, and use a larger font size for the intro line. And while more folks are using smart phones, it’s still a good idea to pay attention to the plaintext version of your campaign. Older smart phone and Blackberry users might not have the ability to load images, so make sure that plaintext version is user-friendly, too.
- Have a backup plan if images don’t load. Not all users will have their email settings configured to display images by default. If you send an email campaign with several images or perhaps your message is just one big image, your readers are going to end up opening a blank email. As backup, you can add alternative text to the images you upload into your Emma campaign. Alt text guarantees that something will display when the campaign is opened, even if the images don’t. What text should you use, you ask? If the image you’re loading has text on it, you may want to use that as your alt text descriptor. Or you can create your own description of an image.
Beyond these tips, have a little fun with your campaign! Try alternating images from left to right or pick a layout with a sidebar so you can incorporate images down the side with corresponding stories alongside them. Just remember to consider your own habits when reading marketing messages, and apply that self-awareness to your own emails. The rest will fall into place.
This is part three in our holiday series where we answer email marketing questions provided by our customers. To see part one, click here. And visit part two here.
+++++
Send a stylish holiday greeting this season. Order a holiday design from Emma’s design team.
Drive traffic to your site with free seasonal buttons
Add these downloadable buttons to your campaign for a stylish call to action just in time for the holidays
With Halloween behind us, it’s suddenly time to start digging in and really preparing for this year’s holiday season. If you’ve read Molly’s post, you’ve already learned some handy tips for crafting your holiday email strategy. But what about spicing up your copy with some visual content?
In the spirt of holiday giving, we’ve created 12 free buttons that you can download right here to use in your own mailings. These buttons will work as a fabulous call to action for your readers, attracting more attention than a simple text link – and therefore driving more traffic to your site.
And so, if you’re planning on treating customers to a holiday special to drive your end-of-year sales (and really, why wouldn’t you?), try replacing your normal call to action with one of these. We’ve created a number of styles from vintage to modern that work with a variety of designs and fit with multiple holidays.
Are you promoting a sale that will span from Thanksgiving to New Year’s? Just use one of the holiday-neutral buttons to cover the full spectrum. Advertising a December-only special? Try one with a more season-specific color scheme or wintry design to play up the immediacy of your promotion.
To access the buttons, download the zipped package and simply decide which design(s) you’d like to use. From there, upload the PNG file for your chosen button to your Emma mailing, then link the image to your website and you’re set! And of course, these are saved with transparent backgrounds — so don’t worry if your content area has a background color other than white.
You don’t have to stop there, though. Check out this year’s holiday design offerings to request a special seasonal design that will go perfectly with that shiny new button. And if you find yourself staring at a blank page when you sit down to write your message, take a look at our content templates for key email campaigns to give you a jumpstart.
With these tools, I hope that your holiday email plans will go smoothly, and that your holiday stress will be limited to detangling icicle lights. (Have you heard of pre-lit trees, my friend?)
+++++
Want to help your favorite nonprofit this holiday season? Check out last year’s free buttons specifically for charities!
Liven up your email with animated GIFs
The '90s web animation staple isn't just for dancing babies - it’s perfect for spicing up your email campaigns
There's nothing stopping you from featuring this jaunty fellow in your email campaigns. Click on the image to view the animation.
If you ever want to get a little perspective on how far web design has come since the ’90s, pay a visit to Internet Archive’s Wayback Machine and pull up Best Buy’s home page from December of 1996. Yikes, right? Was there really a time when a well-heeled electronics megastore used an animation of a turtleneck-wearing, gift-giving pig on its homepage during the holiday season?
The Wayback Machine doesn’t lie; back when the Internet was undergoing its awkward adolescence and everyone was infatuated with moving pictures, the animated GIF was king. It was a time of dancing babies, twinkling lights and bouncing smiley faces, all playing on endless loops. Not coincidentally, it was also a time of web-induced headaches. As the technology and language of Internet styling evolved, the bulky, simplistic animated GIF gave way to more sophisticated Flash- and Shockwave-based animations. Like the 8-track and the VHS tape, the once-revolutionary animated GIF became the butt of jokes (like this one, sneakily tucked away on our site).
Still, every format has its champions. Just as some filmmakers find inspiration in VHS camcorders and some diehard music geeks still make mixtapes, there are artists and designers who welcome the challenge presented by the animated GIF’s endless animation loop, limited color palette and potentially restrictive file size. When the stunning GIF-based artwork of collaborators Jamie Beck and Kevin Burg caught my eye earlier this year, I began to wonder if the email marketing world was due for a GIF animation revolution. If it is, it’s hard to imagine a better medium.
The Internet has evolved a great deal since the age of the four-frame animated firework. However, as our own Taylor Schena outlined in an earlier blog post, the countless display variations between email clients has kept email design frozen in a time before Javascript, Flash or CSS. Fortunately, animated GIFs’ early web prominence means that, unlike Flash and most other animation styles, they’re almost universally recognized (and correctly rendered) in the inbox.
If you’ve been wondering how to jolt a little life into your email campaigns, a moving element may be just the thing. But before you lay your newest email campaign on the slab for re-animation, there are a few things you should be aware of.
Not everyone will see your animations. When I say that GIFs are almost universally recognized, I mean that they’re recognized by every major email client except for Outlook 2007. Holding true to its reputation as the bane of every HTML designer’s existence, Outlook 2007 will only display the first frame of an animated GIF. While this is hardly a deal breaker, it does mean that the first frame of your animation should communicate your intended message clearly for Outlook users. So if you were planning a fancy reveal in the animation’s final frames, you may want to think through your animation carefully to make sure the takeaway isn’t lost on Outlook users.
Your animated GIF should be more Popeye than Pixar. Since every frame in an animated GIF can introduce a new or altered image, these files can get very large, very fast. If your image file size is too large, it could affect both your email’s deliverability and the quality of the display, especially on mobile devices (only a couple of Beck and Burg’s designs would be truly email-friendly). Limit your color palette and stick to basic movements with a limited frame rate, and your GIF will travel and present itself well.
Be bold, but don’t go crazy. Hipster clothier Urban Outfitters has a long history of incorporating animated GIFs into their campaigns in a way that’s both sophisticated and, sometimes, charmingly retro. When the design comes together well, like this spring campaign spotlighted by Email Marketing Voodoo, it makes for a fun, eye-catching email, and it’s an excellent use of the format’s limitations. When it goes too far, as many think this divisive psychedelic campaign did back in 2009, readers’ first reaction may be to get away from it any way that they can.
Make your animated GIF updates before you upload your files to Emma. Emma email campaigns will treat your animated GIFs like any other image file, with one exception: you’ll need to have your GIF file ready exactly as you’d like it to appear before you upload it to your account. Once it’s in your Emma account, you won’t be able to resize the image or rename the file.
If you’re ready to experiment with animation in your email, but aren’t quite sure where to start, Style Campaign has a terrific guide to creating animated GIFs in Photoshop.
Have you had any interesting adventures (or misadventures) with animation in the inbox? Share your story in the comments section.
Designing email stationery and more for Emma clients
Taylor Schena shares how reading and nonstop scribbling help her stay inspired and on task
Sometimes I wonder if I was born wielding a pencil. I’ve always been a chronic doodler, and I don’t think I could go an entire day without some sort of mindless drawing or scribbling. And while it’s definitely a habit that comes in handy when I need to flesh out my ideas, it is, of course, only part of the process for creating a new design.
The ideal evening: drawing robots and drinking beer at the neighborhood tavern.
My schedule includes a wide variety of projects — so my process is flexible. The common thread, though, is the basic need to find a delicate balance between putting my nose to the grindstone and freeing my mind for more creative thinking. When it comes down to it, my design process always comes back to these four steps …
Research
Before jumping into the actual concept and creation of the design, I like to research what my client does and find out what makes this particular brand special. Email design is of course a bit less in-depth than larger scale projects such as, for example, logo creation — but it’s still important to understand the identity of the brand your work will represent.
I typically start by clicking through the website and reading its content. I’ll check out their product, service and employee pages and maybe even take a look at competitors’ sites and offerings. This step doesn’t eat up much time, and the time spent is well worth it. Getting an accurate feel for who a client is and what they’re about can make or break a design.
Inspiration
This part of the process is my favorite. On one hand, it’s ongoing. Regardless of which project is in front of me, I’m always looking for inspiration: whether it’s a gem buried in my RSS feed, a trip to the flea market, a conversation with a friend or a weekend hike in the woods. As a designer, I think it’s crucial to be immersed in your environment and culture. You never know when a random experience will lend itself to an idea.
Preliminary sketches of designs from my notebook
Sketching
Some designers prefer jumping right from the design request to the screen, but I find that I need that hand-to-paper part of the process — even though I don’t always have as much time for it as I’d like. Even if all I’m doing is sketching out how I plan to code an email, that visualization can sometimes save me from revisions or coding mistakes down the line. Sometimes, I let myself get into detailed drawings and ideas, but even when time is short, a quick sketch works in a pinch.
Creation
Once I have my concept in place, it’s time to jump in and get my hands dirty. I take all the various materials I’ve accumulated, the conversations with the client, inspirations and sketches, and I start putting the pieces together. All the previous leg work typically makes this part a fairly seamless one. When the design is ready to go, I code it, place it in the client’s account and answer any questions they might have.
If the client is unhappy with the design, or if I find myself stuck and just not certain with how things are turning out, I know my best bet is to don a thick skin and ask my colleagues and design friends for a quick critique. As a designer, it’s important not to take things too personally. Sometimes a client isn’t satisfied, and you have to be open to that criticism.
In those situations, listening is most important. Why isn’t the design satisfactory? Why doesn’t it achieve what the client was hoping? Is it a question of aesthetics or simply a miscommunication? Take the assessment and suggestions, ask your colleagues for their opinions and thoughts and head back to the drawing board.
Remember that creating a design for someone else’s brand is a chance to connect with another person, learn something new and make a little magic. And the best part of my job is that I get to do this every day with several clients. Every project is a new adventure.
+++++
Is your email stationery in need of a new look? Request a Concierge Design or Studio Design from the Emma design team.
Emma is a member of the Email Sender & Provider Coalition and the Messaging Anti-Abuse Working Group.
Copyright © 2003 - 2012 Emma. All rights reserved.