Those horses are back (don’t they ever stay in their pen?) with more about optimizing your content’s display for whatever device your audience is using to consume it.
Rather than design a specific version for tablets, smartphones, etc. that might overlook certain types of tablet or web users with different monitors and resolutions, responsive design allows you to customize your work in a way that regardless the way you view the content, it’s going to look right – or left, depending on the flow of traffic.
Now for the lightning round, with UX Designer Cale Mooth and Senior Product Owner David Wright:
What goes into changing one of Emma’s templates for mobile?
Cale Mooth: For our templates in particular, it’s going through and looking at the widths of the template, going from a fixed width to a more fluid width, something that’s going to expand to whatever environment that template is now in on the mobile site.
David Wright: If you’ve got a one-column layout, there isn’t a whole lot of extra attention you need to take. When you think about multiple columns, I guess general considerations would be we’re assuming that the left column is the primary column. The content that gets fed into that primary column is going to show up first. There are other things you can do like putting in jump links, a table of contents and summarizing the mailing with some content up top.
Who benefits from mobile optimization?
Wright: When content’s formatted for the device that people need to use it on, it’s a win. All of our customers would benefit. Continue that user path completely on a phone or completely on a tablet without having to get halfway through the version they’re looking for. I think mobile is not going away. We thought it was important to optimize our gallery templates, which are available to any one of our customers.
I don’t have an iPhone. How do I know how iPhone users are seeing my emails?
Mooth: Actually send the email and look at it in the webview link. That way, you can shrink the browser down really small to kind of simulate what it will look like on the phone. In our case, our emails will, if you’re on a desktop machine, the email will look one way, and then on a smaller device like a phone, it’s going to look a little different. The idea is that both versions of the email will be adaptive to that particular device.
Wright: With mobile in general, if you think about how someone interacts with their mobile phone, they’re using it for quick tasks, at-a-glance information, social media – That is a little bit different than the task focused when I’m at my computer and sitting down to purchase something on Amazon. When designing for mobile, there’s more emphasis on that leading image and a quick call to action.
Besides using an optimized Emma template, what else should I be doing?
Wright: My recommendation would be to think mobile first in terms of trying to create that conversion. Subject line is important, so split testing comes into play there. As more and more customers are going to be interacting on mobile anyway, a super-long email is extra prohibitive. I would think a quick call to action in any case is important. If you think about the customer who’s going to be magnifying to view it, taking them to a mobile optimized experience if possible, a call to action would be a second-best option.
Find a mobile-optimized template in our design collections
Emma customers can look for the "mobile-ready" label on templates in the drag & drop editor.
How to find the right stock images to support your marketing message
.(JavaScript must be enabled to view this email address) | Mar 25, 2013
From Bigstock: New message
No matter how often you speak to customers through regular emails, selecting a template that succinctly conveys the message of your brand is a must.
To really entice someone to click through from their email to your website, you'll need a format and layout that not only engages customers, but makes them want to see more. Many businesses leave space for a big image either at the top or in the middle of their emails to break up text and keep people happy.
But choosing just the right image for your newsletter, depending on both the context and the content, can be difficult. Here are three tips to keep in mind the next time you're looking to add imagery to your email marketing:
1. Reinforce the message
From Bigstock: On target
The most important thing to remember is that everything in your emails must ultimately come back to the purpose of the email. Images that don't directly serve or illustrate that purpose will be perceived as out of place and distracting.
No matter what message you're trying to communicate – whether offering an update, promoting a deal, or doing a survey – the images you use should support it. For instance, if you're trying to get word out about a limited-time promotion, make sure that the pictures accompanying it deliver a sense of urgency.
Perform a sample test on yourself or your colleagues when picking your photo and think about the particular call to action. What are the emotions behind it, and what type of picture would push you in that direction? Then trust in yourself as a sample subscriber.
2. Keep things cool
From Bigstock: Abstract dots
One mistake businesses sometimes make is giving the image too much attention. Treat images as if they're in a supporting role, appealing to the more photo-oriented minds in your community, but within reason.
If you use bold colors, it says something, likely more than you intend. Keep it subtle and attractive. At times you may want to include photos of recognizable objects that draw the eye, but in other cases a pattern might do just the trick.
It's something to look at, but it doesn't pull you away from the key message at hand. You want people to walk away more informed or excited about an opportunity. If the image speaks too loudly, you won't reach the viewer where it matters most.
3. Be subtle
From Bigstock: Elementary playground
With so many images available, it can be difficult to select just one. The best advice when making your picks is to err of the conservative side; don't take any chances or else you might rub someone the wrong way. Give them something familiar, but also dynamic.
Suppose, for example, your company is launching a new feature and you want to invite your community to come check it out. You might want to include a general business photo to appear in the middle of the announcement.
By selecting an image that represents the opportunity for growth, progress, and success, you'll pull everything together and leave a good impression.
And to start brainstorming on the types of images you'd like to use, check out Shutterstock and Bigstock's image trend report!
Today's guest post is written by Danny Groner, manager of blogger partnerships & outreach for Shutterstock and Bigstock.
+++
Emma customers get 5 stock images on us through March 31. Not yet a customer? Try Emma free.
Emma’s a strategic gal. When the time is right to release a new product, there’s much thought that goes into what the story is that we want to tell our customers. That story – ranging from the latest Zadie Smith to Are You My Mother? – is inspired by our own habits as well as what we’re gleaning from you.
Toward the end of last year, Mashable called 2013 "the year of responsive design." Their article speaks largely about web design, but if you’re anything like us, you wear glasses while consuming emails on a variety of platforms, too: smart phones, tablets, laptops and desktops.
That’s why it’s important to optimize your email campaigns so that they look their best and brightest, no matter the stage.
What responsive design means at Emma
Our product developers and designers have been thinking about mobile-optimizedemaildesign for a while now. And with the release of our new drag & drop editor and new template language to go along with it, Emma is poised for responsive design in the inbox. Wherever that inbox may be.
So, how do we go from being poised for responsive design to actually achieving responsive design? We experiment with our own email newsletter, of course.
We coded our last email newsletter to change format when viewed on a mobile device.
Emma UX designer Cale Mooth – who’s done the actual template work, coding, CSS, HTML retrofitting, whozywhatsit to optimize our own email and some of the templates in our readymade design collections – said adaptive emails improve your recipients’ experience.
“Looking at something on a small device versus a desktop or laptop, it’s a totally different experience,” he said. “So if you can cater to those specific devices, I think it’s just one more chance for users to identify with the content you’re putting out there, react with it, interact with it.”
So what is mobile optimization, and should you be scared? It means that your email design responds and adapts to the device your recipients are using to experience it. And yes, of course you should be scared: Haven’t you noticed the uptick in zombie TV shows and movies?
According to eMarketer, the average American adult spent almost an hour and a half a day last year on their mobile busy with non-phone activity – That’s twice what it was in 2010 and a 50 percent increase from 2011.
“There’s been a big trend just in overall website design, not so much apps, just as far as conveying messaging to let that content be optimized,” said David Wright, a senior product owner at Emma who has researched trends in the market. “With the trend of more and more email being read and interacted with on a mobile phone, you’re not tethered to a computer anymore or tethered to a big screen.”
Are you ready to optimize your emails for mobile?
Emma customers can access mobile-ready templates in our collection of free readymade email templates. Our design team is working on optimizing each free design, but for now you can spot the mobile-ready ones at a glance.
Stay tuned for next week's conclusion of Emma's Responsive Email Design: Zombie Slayer.
80% of people opening your emails are scanning, not reading, which means that compelling images in your email are key to grabbing attention.
What's all that mean? It's a good time to brush up on your image smarts, which is why we've just published our Brainiac Guide to Images in Email. You'll find five practical tips for making the most of your images with visuals (of course!) that help make the point.
But wait, there's more: all month long on the blog, we'll be going into more detail about leveraging the power of images in your email newsletters. We'll share real-world examples, expert interviews and videos. Check back often or, hey, just subscribe here or follow us on Twitter for the latest.
Also during the month of March, Emma customers can get 5 stock images on us. It's to celebrate the brand-new Emma integration with Bigstock that makes about 12 million stock images searchable right from your account -- and makes it easy to always add the all-important image to your next email campaign.
Maybe you were waiting for us to sweeten the deal? Alright, alright.
Yup, that's right. Now through March 31, you can purchase up to five stock images right from your Emma account, and we'll take care of the cost.
How it works
To claim the offer *and* find the perfect images for your next mailing (or the one after that – there's no pressure to use 'em right away), simply follow these steps:
Click create a new mailing in the drag & drop editor. (If you've been with Emma for a while, this is the "Your mailings: beta" editor that's in the second section of the page.)
Click any image placeholder and in the window that appears, navigate to the stock images tab to start searching by keyword or phrase.
When you find an image you like, purchase it, and we'll remove the cost from your next invoice.
Repeat up to four more times by March 31st to take advantage of this stock image giveaway.
How to edit images
Remember that Bigstock has more than just photos in its library; you can also find illustrations and vector sheets to add visual appeal to your emails. That means you may want to crop just the part you want or edit an image before using it in your mailing.
Emma's new image editor, which is powered by Aviary, lets you crop, add filters and more. This video walks you through the steps:
So what are you waiting for? Log in now to get started.
+++
Want more tips for using Bigstock and Aviary? You'll find 'em in our resource center.
Love is in the air and in your Emma account, thanks to a new collection of free Valentine-themed email templates.
These are just some of the designs available in your account. Log in to see them all!
Our designers have handcrafted new templates for events, promotions, newsletters, and of course, love notes. I bet these new designs have your heart fluttering and your marketing wheels turning.
Thinking about using a Valentine template for an impromptu email campaign, but don't have a lot of time?
No problem! It's a cinch to whip up a sweet email when you have access to 12 million stock images, right inside your account.
Yep, customers using our new drag & drop editor can search for and purchase stock photos, illustrations and vectors (from our partner Bigstock) to drop right in their email campaigns.
And a big, bold image is the perfect way to capture the attention of your audience and get your message across quickly.
Watch us create our own Valentine email in just 83 seconds, then log in and craft one of your own.
And even though we eagerly watched the opens and clicks tally with each send-off, I saw an opportunity to start the new year off with a look at all the emails in one place.
There's nothing complicated or high tech about this exercise, unless you count not being certain about which office printer I sent my files to. It just takes wall space, Post-its, and a few brains to make sense of it all.
I made a timeline of emails sent over the last six months, adjusted each one's height on the wall according to the open rate, wrote out each subject line, labeled key metrics and trends, and – here's the important part – pulled together a small group of Emma staffers to soak it all in and make some insights.
We took note of what jumped out to us:
In general, emails that feature new template collections get the most opens and clicks, so we'll be making more of those.
But our simplest (and kindest) subject line, "Thank you," yielded our highest open rate – 43%! (Psst...read more about how saying thanks yields more opens.)
Big, bold login buttons get the job done and drive customers to check out what's new.
A text link that appears just below a compelling image often gets more clicks the image itself (we link them both to the same place).
And then we let that shape our conversation about the kinds of emails we want to send in the coming months.
Did you do an email retrospective? What did you learn, and how many Post-its did you use?
+++
Have you subscribed to our emails? Sign up to get expert advice and product news on our website.
A new batch of don't-miss articles for creative types
.(JavaScript must be enabled to view this email address) | Jul 02, 2012
We love email marketing around here. (Not obvious at all, right?) And we love helping agencies, small businesses and nonprofits create share-worthy email campaigns that help their businesses grow.
We're so very excited about the recent launch of our new content editor, and we can't wait to see how you'll use it to create emails that stand out in the inbox. Here are a few reads that'll help you do just that.
Articles for the writerly types:
Bookmark the 9 must-have components of compelling email copy. It contains the basic concepts as well as specific details for pulling great subject lines, calls to action and more, making it a good read for beginners and email marketing veterans alike.
Skip to the head of the class by reading Graham Charlton's What I've learned from writing 2,000 blog posts. His article is geared toward blog posts, but it's easily applicable to email as well. (Be sure to check out the "headlines" section for subject line know-how.)
Articles for designers:
Rethinking mobile email design is more important than ever as mobile email readership continues to grow. No longer a temporary until-I-get-back-to-my-desktop solution, mobile is increasingly the chosen platform for consumers (especially in bed or during a TV show). Edit call-to-action buttons and spacing for touch screens using these pixel recommendations.
Haven't had your fill of mobile tips yet? Read this ClickZ article on designing for a reader who's on-the-go. It might just convince you to move away from a mobile version of your email, and instead just design your primary campaign so it works for all readers.
Catch up on campaign goodness from the Emma blog:
Every picture tells a story, or ideally, helps you tell your brand's story. Follow these seven rules to choose images that pack the most punch, and then try Emma's new image editor.
We think you're in for a treat with our new campaign features, and we'd love to help you along the way. If you need account assistance, visit our searchable help section, or reach out to our support team. If you're an Emma Agency with questions about supporting your clients, our agency relations team has you covered.
A roundup of articles for small busness owners and Emma Agencies
.(JavaScript must be enabled to view this email address) | Apr 05, 2012
If you’re anything like me, then your day consists of asking yourself this question countless times as you scroll through your Twitter app, Facebook feed, Flipboard and RSS reader: Is reading this article going to be worth my time?
Content marketing has afforded us more free resources, case studies and education than we could possibly have time for. In this roundup, I’m cutting through the noise and sharing some of my favorite recent reads.
Your personal online reputation and your business: Even with privacy settings, your online life probably bleeds into your business, especially if you’re a solopreneur. This app scans your online activity and reports back any red flags.
Look professional on video chat: Lighting, angle and technology matter; use these pointers to make sure your video chats with customers come across as polished as possible.
Part two: for the agency owner who's managing multiple client accounts
Email is not dead: All the stats you need (and more) when clients ask about the ROI and relevance of email in a social world.
Are you falling into the pricing trap? You’re not just pricing your services, you’re valuing them. Choose your rates wisely with this perspective in mind.
I’ll be back next month with more articles worth reading, tweeting and bookmarking. And please share your favorite reads with me in the comments section below.
Become an Emma Agency: stylish email marketing for you and your clients.
Elizabeth shares tips for customizing your email's format and making your content stand out
Elizabeth works … and wears her thinking cap.
Around the Emma office, designer Elizabeth William is better known by her nickname, Lizard. You've seen her work in your inbox if you receive Emma's Roundups and all over the Emma website (like the imagery in our homepage video). Get to know her a bit better today, as she shares email design wisdom that'll help your messages stand out.
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.
There's no shame in making daring font selections (well, daring in the realm of web-safe fonts). But you've got to have the design reasoning to back it up. In Uppercase's email (I just love Uppercase, by the way!), they clearly want you to read the text in the serif font [the main article section] first. So they set it apart using a different style of font than the rest of the mailing — and they also bumped up the size a few points to create an obvious hierarchy.
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.
Oh, interesting question. The color scheme for the campaign was decided before our photo shoot. I actually played off of our Emma green and used magenta as an accent color to give it a fresh feel since it was all about New Year's Resolutions. We edited the photos accordingly, and then enhanced her lipstick with that purply-pink text color to tie it all together. Photoshop is fun.
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.
