It’s 3 a.m. Do you know who’s reading your email? A recent Return Path survey revealed 16% of email is viewed via mobile devices and 1 in 3 Americans own a smartphone. Chances are, at least one insomniac with a donut in hand will be reading your email. Design accordingly.
Since mobile is gaining so quickly, I asked Anna Yeaman, creative director at Style Campaign, to share her experience with designing emails for mobile devices. Read on for her six tips to optimize your email campaigns.
+++++
1. Rework your creative for touch
Fingers are less accurate than a cursor, so you’ll need to increase the size of your links and spacing. In Apple’s Human Interface Guidelines, they recommend a minimum target area of 44 x 44 points. Elements you’ll need to rework include CTA buttons and stacked links, e.g. table of contents and navigation.
2. Push the contrast
Low contrast is not advisable on small screens, as elements become hard to read. Email on the Kindle is B&W Webkit, another reason to run a quick grayscale test.
3. Disable auto-scaling fonts
If your text is under 12px, the iPhone automatically scales it up, potentially breaking your layout. HTML navigation and pre-header text are particularly vulnerable.
To turn off auto-scaling add the following code:
style=”-webkit-text-size-adjust:none”
Better yet, make your fonts bigger. Windows Phone 7 recommends no smaller than 15 points; Apple recommends a 17 – 22 pixel font.
4. Define the viewport
Safari on the iPhone uses a 980px wide viewport. This means any template hosted on the web that’s less than 980px wide will appear zoomed out. To correct this, you need to define the viewport for your mobile version and mobile landing pages.
Here’s the code:
<meta name=”viewport” content=”width=width of your layout, initial-scale=1.0; minimum-scale=1.0, user-scalable=yes” />
5. Put some content on the first screen
You don’t want branding and navigation to take up the first screen, burying the content users want.
It requires a lot of scrolling to get to the first article in the Smashing Magazine newsletter. While I like that the table of contents has jump tags, the links aren’t designed for touch.
6. Narrow the width
When email is viewed on an Android, only a portion of the screen is visible by default (roughly 320px). Unlike the iPhone, the Android doesn’t scale content to fit the screen. To make navigation even more difficult, the min/max zooms are extremely limited.
If 320px (iPhone 3 screen width) is too skinny, try a layout between 480px-520px. The Android, Windows Phone 7 and Blackberry all have popular devices that use a 480px resolution.
+++++
Anna Yeaman is the creative director and co-founder of email creative agency Style Campaign. Visit Style Campaign’s blog for more ideas and examples, and follow Anna on Twitter at @stylecampaign.
But hang on. You’re playing with email fire. Servers are more likely to filter emails with large images, meaning the campaign will end up in junk folders rather than your recipients’ inboxes. Moreover, large images take a long time to load, and your recipients may move on to the next email in their inbox without viewing yours. And for email programs like Gmail and Outlook that block images by default, your campaign has no text to anchor it, and it’ll look like an empty or broken email. Not good.
If that’s not enough to deter you, there’s another limitation to image-only campaigns worth mentioning. One image can only link to one URL, limiting your ability to include links to multiple articles or landing pages — and your ability to track your audience members’ response activity.
So, do you have to scrap your large image entirely? The good news is that you can repurpose one large image into smaller, sliced images. We call it a slice and dice campaign, and it’s something that our design team has been offering to our customers since we expanded our set of design options.
And now we’ve created a downloadable guide so you can build a slice and dice on your own. Armed with this guide and a bit of HTML know-how, you’re able to slice your large image into more digestible pieces, link those pieces to any number of URLs you desire and safely send to your audience. You’ll enjoy better delivery rates, and your campaign will properly render in all of the major email programs. Now that’s good for you and good for your audience.
Download Emma’s Guide to Building a Slice and Dice Campaign here. (There’s a lot of juicy content in there, so give it time to download.)If you’d rather request a slice and dice campaign from our design team, fill out our online design form, and a design consultant will reach out with a quote and turnaround time.
The great Oscar Wilde, when commenting on the editing process, once said, “I was working on the proof of one of my layouts all the morning, and took out a <br /> tag. In the afternoon I put it back again.”
Or … maybe I’m paraphrasing.
If you’re like us, though, you could indeed spend a lovely summer’s day tweaking every aspect of your code to make your email look just so. But when it comes to the basic structure of your campaigns (and their ability to render across email clients), we know it can be frustrating to discover that many of your hard-earned, über-fancy web design skills are, quite frankly, useless in the email environment. Hey, we’ve all been there. Email is simply a different kind of beast.
But cheer up – help has arrived. In addition to our updated tips on HTML for email, you now have access to the code that lives behind the scenes of our content layout templates. Feel free to incorporate these into your designs if you’re using an Upload Your Own HTML template or if you’re an Emma agency using Stationery Builder.
Each one consists of clean, email-friendly table structure that is Emma-tested and Emma-approved for proper rendering across all major email clients. Just replace “Insert your text here” and “<img src=”insert your image url here” border=”0″ alt=”" />” with your own content, and you’ll be ready to go.
The code is hosted by the folks over at GitHub, a secure web-based hosting service for code and software development. All you have to do is click on the layout link of your choice, and then it’s just a matter of copying, pasting and editing the code.
So come on, go nuts! It’s time to geek out on HTML and have a little fun. You can always come back to the source code if things start getting wonky (that, of course, being a technical term).
Just remember the cardinal rule of coding campaigns: test every email, every time, in as many email clients as you can. You might even consider using Litmus or Email on Acid to conduct more thorough testing, especially if you’re going to be making lots of changes to the provided code.
And if you get stuck, never fear! We do offer code correction services through our design department. Just give us a shout and we can provide a quote for the work.
Ready to start coding? Click here to get the HTML for our most popular content layouts.
If you’d like to get more HTML help, check out Molly’s post about the recent changes to our help section, or Taylor’s aptly titled tip sheet, “Email Is Not a Website.”
Jimmy Thorn is a man of few words, but he has saved some of them just for you. Take a look at his tips for beginners, or skip right ahead and check out his more advanced ideas below.
1. If you have the capability, drop shadows on transparent PNGs are a great way to add a little depth to your email.
2. Rounding your image corners or giving your image a unique shape will add a visually interesting twist.

Design Coordinator Kelley Kirker poses with Brian the Bunny, found this past spring in the Emma parking lot. Notice how rounded corners and a drop shadow give so much more depth and definition to the version on the right. (Disclaimer: It may *look* like Brian is in a death grip, but we promise no animals were harmed in the taking of this photograph.)
3. Similarly oriented images used in a similar manner should be the same size.
4. Make sure your design says one thing well. If you overwork your design, it will say several things ineffectively.
5. Wacky visual gimmicks might be eye-catching at first — but good, solid design will keep your audience reading, scrolling and clicking.
6. A certain level of consistency is key. If your first article headline is blue, bold, 14-point Times New Roman, then don’t make the second one red, underlined, 16-point Verdana.
7. When you finish a campaign, ask yourself: What was my point? Did I clearly make it — both textually and visually? If not, go back to Edit mode.
8. If you’re sending us a predesigned stationery for us to code — or if you’re using an Upload Your Own template to design your own — make sure the borders can expand vertically to accommodate different amounts of content. (And keep in mind that images can’t stretch.)
9. If you try to shoehorn your brand guidelines for other media into your email design, it will show (or you’ll have delivery problems). Instead, try to adapt and enhance your branding for the specific world of email.
10. Use your data to improve your next campaign. Do your readers typically click text-based links? Buttons? Photos? Every time you send, your readers talk back. Make sure you’re listening.
Introducing a brand new help section for HTML designers
Sending an email is much like making a first impression. It’s an opportunity to show off your brand, familiarize your subscribers with what sets you apart and entice them to stick around to hear what you have to say. That’s why we want to help you create fetching and effective emails, no matter where you fall on the design chops continuum.
What might that continuum include, exactly? It includes the customer who’s juggling 45 other tasks during the day and wants to log into Emma to send a quick-and-easy campaign. (That customer is best suited for a custom stationery and custom layout, by the way, because that means he’s only responsible for typing in the content. No extra styling necessary.) It also includes the customer who’d like to spend a little extra time laying out copy and images, all within a custom stationery frame. (That customer might work with an Emma designer to get a Concierge Design, or even a Studio Design.) And it includes the customer who’s an HTML wizard and wants free rein to design her own HTML email from top to bottom.
That last customer type — Is it you? Hello, our HTML-savvy friend! — is the one we’re talking to today. (Not sure where you fall on the continuum? Take a look at all of the design options that Emma offers.)
If you’re a web designer who’s been tasked with creating code for your company’s HTML emails, we want to help you build rock-solid HTML that’s suitable for an email environment. You may have caught Taylor’s post about the differences between HTML for email and HTML for the web, and the distinction is only becoming more true.
I know what you’re thinking: Now I have to design HTML that not only works in all the browsers out there, but also works in all of the mail clients? This sucks.
But it doesn’t have to suck. It’s actually fairly simple — and even a bit fun — once you get the hang of it. Just ask Emma designer, Dean Shortland, a self-taught HTML expert and one of those guys who likes solving tricky problems. (Case in point: He recently sent around an email to our staff, inviting us to join a “Campaign Rendering Issues” collaboration group. Fun times.) Lucky for HTML designers building their own HTML emails in Emma, Dean’s developed a brand new section of our Help Guide: HTML for Email.
In this section, you’ll learn all about properly coding HTML for an email environment, including such topics as:
If you’re an Emma customer who’s already building campaigns using an “Upload Your Own HTML” template, make sure to check out the new HTML for Email help section, and spot-check your code to ensure it’ll work in all email clients. If you’re not using an “Upload Your Own HTML” template yet, let us know and we can easily add one to your account. Happy coding!
A few best practices and design ideas for the beginning email marketer, including how to talk to your designer.

Here, the Emma Design Team might *look* fabulous, but our photo is breaking the Sample Stationery. An image this big is bad for your SPAM score, and it's bad design: the photo is so wide that it's forcing the right border to move far out to the right, way past the edge of the header.
Jimmy Thorn is a man of few words, but he’s saved some of them just for you. And though he just moved to Emma’s User Experience team, Jimmy’s work has been an integral part of Emma Design for the last three years. We’ll certainly miss our man JimJam, but we’ll always remember these words of wisdom.
1. Keep your content brief. Your audience’s attention span is much shorter than you think. Pique interest with teaser paragraphs, and link to the full story elsewhere.
2. Don’t use too many fonts in one email. Call attention with different font sizes, not different fonts.
3. Using a lot of crazy, bright colors might sound like a great way to get attention — but in reality, it’s a turn-off for your audience and a big turn-on for SPAM filters.
4. Comic Sans, Papyrus and other non-traditional fonts are suitable for a very narrow range of purposes. Generally speaking, they have no place in the majority of professional marketing materials.
5. Giant images do not tell the story well; they can actually get your emails flagged as SPAM. Live text is a much more efficient way of getting your message across.

Ah, that's much better! Now the image has a prominent spot in the campaign, but it isn't breaking the stationery. The borders are rendering properly, and everything is aligned as it should be.
6. The more information you can give your designer, the better your design will be. Despite our best efforts, we are not mind readers — so it’s a safe bet that we are not going to design exactly what you had in mind.
7. If you say “clean” and “modern,” we will take you at your word — and you will probably get a design with more white space than you actually want.
8. When providing art direction to a designer, descriptive words or tangible ideas will yield better results than “jazz it up” or “make it pop.”
9. Designers are used to hearing the word “no.” Don’t feel like you will hurt our feelings if you do not like the design. Just give us some good, solid direction, and we’ll move on and get it right.
10. Make sure your design reflects your company accurately and conveys its true story. Giant flames, for example, might be great if you own a motorcycle shop — not an investment firm.
Stay tuned for Part 2 of Jimmy’s Design Tips, which will offer Jimmy’s famously sage insight for the more advanced email marketer.
Want more now? Take a gander at Kelly’s 5 Tips for Visually Effective Email Campaigns.
If you’re an Emma customer, you’ve probably heard about this little thing called Studio Design, which is an entirely different (dare we say, groundbreaking) approach to custom design. But as thrilled as we were to launch it, our customers’ enthusiasm quite simply made us feel like dancing.
And so, with the helpful feedback of our community and fellow staffers (except this guy, who really just did the dancing), we’ve put together a handy-dandy user’s guide to our own little design revolution. Which, of course, is not to be confused with Dance Dance Revolution, even though they do, on occasion, look quite similar.
Studio Design is a new way to get custom stationery that relies more pointedly on *your* art direction. One particularly astute customer noted that requesting Studio Design vs. Concierge Design is a lot like answering a multiple choice quiz vs. a short essay question. With Studio Design, we provide a hefty assortment of styles and motifs, and from there, you choose your own design adventure. Side note: Never fear! At Emma, said adventures never end in shipwreck or scurvy.
If one or more of the following sounds familiar, then you could be a great candidate for Studio Design:
If you’re an existing customer, just head on over to the online form.
If you’re interested in joining the Emma community, we’d love to chat and get you started! Just give us a ring at 800-595-4401, email us at hi@myemma.com or fill out a quick form.
The first step is to give us your basic brand information: your logo or company name, your slogan and your color preferences. You can then choose a background texture and up to two design elements to complement and enhance your brand. There are dozens of graphics in several different styles, and you can filter them thematically if you’d like (e.g. “Illustrated,” “Modern,” etc.) to help you find the imagery that will really make your brand shine.
The turnaround time for a Studio Design stationery is two business days from the date we get your request. Keep in mind, of course, that the form does not generate a preview of your stationery. That’s because each header is handcrafted by a real designer, who uses his or her graphic design skill after you submit the request to make judgment calls on things like scale, composition, opacity and angle.
So what if you chose the most perfect shade of green, only to realize that it wasn’t so great after all? Rest assured that you can ask your designer for a revision if you change your mind about any single aspect of your stationery.
Of course, we’re still offering Concierge Design too, our completely custom option where your Emma designer designs a new stationery from scratch, based on your branding and/or art direction.
To see real-life examples of both Studio Design and Concierge, check out our design showcase. Ready to request your stationery now? Click here for the Studio Design form, or here for Concierge.
[ Post updated on 7/12/2011 to reflect changes to the Studio Design process. ]

Two Emma customers that use images effectively in their email campaigns: Hooprama and Goddess of the Hunt.
Wondering how to improve your next effort? Creating an email campaign can seem daunting sometimes, so keep these tips in mind for your next big send.
1. Don’t be shy – use images.
There’s nothing less inviting in your inbox than opening an email only to see text, text and … oh, yeah, more text. Although your information is no doubt interesting, your readers’ time and attention spans are limited. So make your campaign fun!
Pictures are eye-catching little gems that make your content feel more readable and personalized. Thanking your audience for their support? Show a picture of your appreciative staff to put a face on your gratitude. Advertising an upcoming event? Sprinkle in some pics from last year’s shindig so potential attendees know what to anticipate. We can be vain creatures, we humans, and if there happens to be a photo of moi in your write-up of last week’s mixer, well, you can bet I’ll not only feel special, but I’ll also share it with my friends and open your next email with gusto.
Of course, if your readers’ email programs have images turned off, they may not see your photos at first, so make sure your campaign is still visually appealing by formatting the text in creative ways. Which brings us to…
2. Break up your content.
Yeah, yeah, breaking up can be hard to do (we know), but it’s vital in your email campaigns.
Visually let your readers know that even with their busy schedules, your email is quick and easy to read.
3. Keep it a little consistent.
Every Monday, I get a newsletter from Oprah. I admit it. (It’s a good read, OK?) And every Monday at work, I cringe at the thought of someone catching me read it. But what keeps me hooked is that whenever I open it, I know exactly where to direct my eyes for a hasty once-over. Before I know it, my “I-don’t-want-anyone-to-see-me-reading-this-touchy-feely-email” attitude gives way to intrigue as I start clicking the links that appeal to me. On top of that, the email stays consistent within itself, using only a couple fonts (in reasonable sizes) and sticking to a uniform, easy-to-read color scheme.
If you build a campaign that is somewhat predictable in terms of timing, content and placement, with a little restraint shown in your font and color choices, your readers will know when and where to find their favorite pieces.
Of course, for every rule, there is an exception…
4. Now spice it up.
You have to know the rules before you can break them, so once you’ve figured out a general framework for your campaigns so that readers know what to expect, find a way to still keep it fresh. Disrupt the norm occasionally with a new banner graphic that calls attention to a big event or sale you’re advertising. Keep readers guessing a little, so they never feel like they’ve read it all before. If you have a column on basket weaving every week, but this week you have nothing to share on the topic, don’t fill the space just to stay consistent. Put something new in its place or try a simplified mailing with less content this time.
Which raises another issue, really…
5. Keep an eye on that length.
Mark Twain once said, “I didn’t have time to write a short letter, so I wrote a long one instead.” Long-winded email campaigns, my friends, won’t always endear you to your audience. Although it may seem slightly counterintuitive, creating long messages is an easy (and quick) mistake to make.
And it’s understandable — after all, you’re an amazing organization doing great things, and you want to share it all. The truth is that it’s harder to spend time figuring out what’s most important to your readers. The key is to take the time to do just that. When your email campaign is too long, readers are less likely to read your content. Such a paradox!
So here’s the secret: Don’t give it away all at once. You want to direct readers to your website, right? Well then, leave a little to the imagination and make them want more. Give only a headline or a brief teaser to an article so they can easily scan for topics that pique their curiosity. Then direct your readers to the full story with a “see more” or “continue reading” link, which will take them straight to your website. Right where you want ‘em.
And now, with your images, easy-to-read chunks and manageable length, your readers won’t feel over-or-under- whelmed with the “body language” of your email. Prepare to be heard (and seen).
How knowing about the eye’s Foveal viewport may change the way you look at your next campaign.
At Emma, we’re always thinking about audiences and the important role design plays in communicating your message. We also do a lot of thinking about the concepts behind the why. Why is one campaign more effective than another? Why do some links get clicked more?
We often talk about reasons like headlines and timeliness, but here’s another concept you might want to be consider: the Foveal viewport. The fovea is the part of the eye that makes it possible for us to have 100-percent visual acuity. So what the heck does that mean? Well, when we look at something, we see only a small area of it in complete focus. We may think we see the whole picture clearly, but we don’t. Leonardo da Vinci was actually the first person to discover this issue with sight lines. Elements that fall outside this area get blurry – they get blurry quite fast, actually. As our eyes move, or to use a fancier term saccade, this area of complete focus moves as well. This area of complete focus is called the Foveal viewport.
For example, when we look at this web page, we may think we see the whole page in focus:
But here’s our reality, with only the Foveal viewport in complete focus:
Another way to see the size of this is to hold your thumbs up next to each other — the area of your two thumbnails is roughly the same size as the Foveal viewport.
So how can you apply this to email design?
+ You can place your most important content where your audience is most likely to see it when they first open your campaign.
+ You can place pieces of related content in close proximity to each other.
+ Since the Foveal viewport moves as a person looks at something (and our eyes look for things that stand out), you can place any calls to action as close as you can to the related content.
Let’s say you’re creating a campaign with an announcement about your new deli lunch menu.
Not bad. Appealing photo along with hunger- and thirst-inducing copy. (Excuse me while I go grab a pop.) Ah. Now, let’s take a look at the Foveal viewport.
Your first thought might be that the viewport will move, so no worries (that’s what I thought too). But it’s been shown that people often don’t even see items that fall outside the viewport. So what if you shortened the copy a bit to get that button closer?
Much better. Besides the copy being easier to scan, the button you want people to click on now falls within the same Foveal viewport. Pretty cool.
It’s also worth noting that too much focusing between saccades can cause fatigue. This refocusing happens hundreds of times every minute without us even knowing it, but the effort adds up, so you might want to avoid making your audience work so hard when they’re reading. Because let’s face it – do you really want your audience to feel tired after they read your emails?
Here’s what you can do:
+ You can minimize the amount of content you’re asking people to look at.
+ You can minimize the amount of content you’re asking people to decide between.
+ You can be sure your email templates aren’t too wide.
Knowing what Leonardo da Vinci knew about how eyeballs work just might change the way you look at your next campaign. With a few tweaks to your designs, you can help your audience see things the way you want them to see them.
Editor’s note: This post launches a new series from Emma’s UX team – they’ll be sharing ideas, tips and expertise about email usability (and perhaps occasionally mentioning medieval geniuses).
Emma is a member of the Email Sender & Provider Coalition and the Messaging Anti-Abuse Working Group.
Copyright © 2003 - 2012 Emma. All rights reserved.