Archive for the ‘Design Tips’ Category

Emailioriation Monday, 7-16-12: Find Your Fold

Monday, July 16th, 2012

You have seen email advice articles I’m sure that advise marketers to make sure that the most important content within a message is “above the fold.” If the call to action or key content element is visible as soon as someone opens the email, the assumption is that the message has its best chance of succeeding.

But there is an assumption inherent in that piece of advice that bears challenging – that being that the space “above the fold” is where the greatest engagement is driven. This may not be true. The kernel of the recommendation then is to place your most engaging content wherever in your email drives the most engagement. It may be above the fold, or it may just as likely be in a sidebar, in pre-header text, the middle of the third paragraph or even in a postscript.

To figure out where your engagement hotspots are, use Click View tracking to see which sections of each message capture clicks, and then experiment with different content types in each of these sections. You may find your fold is not where you expected at all.

Each week on “Emailioration Monday”  we spotlight a single tactic you can implement this week in order to improve your email marketing. Share tips of your own on Twitter at #Emailioration, and see the full collection of Emailioration tips here.

A Guide to Enabling Images for Different Email Clients

Friday, February 17th, 2012

When you begin creating your email content, it is very important that you design with images turned off. Many email clients will disable images and links until the subscriber downloads or “enables” these features. The subscriber can enable these features either by email, sender, or for all emails. I have put together a list of popular email and webmail clients on how to enable images for each.  Let me know what you think and leave a comment if you have any strategies to get your subscribers to enable your images by default.

Microsoft Outlook 2003

To display images for individual emails - Right-click on one of the missing images and select “Download Pictures” or click the Microsoft InfoBar at the top of the message and click “Download Pictures”.

Microsoft Outlook 2007

To display images for individual emails – Click the Microsoft InfoBar at the top of the message and click “Download Pictures”.

To allow picture downloads for all emails from as email address or domain – In an open message that was sent from the email address, right-click one of the blocked items. On the menu, click “Add Sender to Safe Senders List” or “Add the Domain @domain to Safe Senders List”.

Microsoft Outlook 2010

To display images for individual emails – Click the Microsoft InfoBar at the top of the message and click “Download Pictures”.

To allow picture downloads for all emails from as email address or domain – In an open message that was sent from the email address, right-click one of the blocked items. On the menu, click “Add Sender to Safe Senders List” or “Add the Domain @domain to Safe Senders List”.

Hotmail/Windows Live

To display images for individual emails – Open the desired message. Click “Show content” in the yellow security bar right at the top of the message.

Yahoo

To display images for individual emails - Click the “Show Images” button at the top of the email message.

To display images for all senders – Click the Options link and then Mail Options button. The Mail Options screen will open and then click on the General on the left navigation bar. Under the Spam Protection section, choose “Always, except in Spam folder” or “Only from my contacts”. Click the “Save Changes” when finished.

Comcast

To allow picture downloads for all emails from as email address or domain – Click the Preferences at the top and then select Email on the left navigation bar. Under Display, check the box “Download images automatically in HTML Email”.

AOL Webmail

To display images for individual emails – Click “Show images” button at the top of the email.

To display images for individual senders - Click “Don’t block this sender” at the top of the email.

Gmail

To display images for individual emails and senders – Click “Display images below” in the box above your message. Or, if you’d like to always view images from a particular sender, click “Always display images from email@domain.com” instead.

Thunderbird

To display images for individual emails – Click the “Show Remote Content” in the alert bar at the top of the email message.

Lotus Notes

To display images for individual emails and senders – Click File followed by Preferences. Select the plus sign beside Mail and click Internet. Uncheck the box next to “To ensure privacy, do not show remote images without my permission”. This will change it to automatically display the remote images for any email you receive.

iPhone/iPad

To display images for all emails - Go into the My Settings icon app. Under Settings on the left, select Mail, Contacts, Calendars. Under Mail on the right, go to “Load Remote Images” and slide the bar to display ON.

Until next time, stay relevant, stay engaged, and get delivered!

Chris Arrendale is Sr. Director, ISP Relations and Deliverability for Real Magnet.

Why URL Shorteners Are a Bad Idea for Email Marketers

Friday, February 3rd, 2012

Here at Real Magnet, the deliverability team scours through bounce logs on a daily basis to gather details as to why our customer’s emails are bouncing. One bounce trend that we continue to see is customers that use URL shorteners in their email marketing content. Many major blacklists have blacklisted URL shorteners like goo.gl and hotshorturl.com and networks will block those emails that contain them.

URL shorteners are a service, paid or free, where you enter in the full URL in a text box and it will shorten it. The shortened URL will point to the same site as the original URL, but the URL will be a lot shorter. Social networking sites that have a character limit can benefit from URL shorteners. The problem with that is many spammers also use this service to point to a malicious web site that may install a virus, malware, and/or steal information from you. Spammers are also creating their own URL shorteners and using them when their current shortener gets blacklisted. The issue is the end user that clicks the URL shortener link will not know where the link takes them until the page and full URL has loaded.

For email marketers, getting your emails delivered is of utmost importance. Testing your content and URLs should be a part of your email marketing plan. Remember to use full URLs when you can and avoid URL shorteners. Until next time, stay relevant, stay engaged, and get delivered!

Catching Up With Mobile

Tuesday, May 31st, 2011

If there were any lingering doubts about the magnitude the impact of mobile is having on e-mail marketing and deliverability, they’ve just been dispelled by new numbers reported by ReturnPath earlier this month.

The deliverability services firm reports that mobile penetration has increased a whopping 80% since October, due in large part to the growing popularity of tablet computers (like the iPad and iPad2). In addition, the new breed of smart phones running operating systems like Apple iOS, Google Android, and Microsoft Windows Mobile seem to be well on their way to dislodging the dominance of non-HTML-capable phones (like some older models of RIM’s venerable Blackberry franchise) in many enterprise deployments.

The new numbers confirm the trend expounded upon in remarks by Google’s Executive Chairman Eric Schmidt this past winter, in which he observes that mobile adoption is “happening faster than all of our predictions”. E-mail marketers can act now to optimize their content to meet the mobile wave, before it can wash away hard-won gains in open rates and ROI.

Recently, Real Magnet published a whitepaper of best mobile practices, which provides specific, tested steps you can implement right now to ensure your mail looks just as appealing and is as usable on mobile devices as it is on the desktop. Here are few tips to get you started:

Keep it simple: Designing for mobile devices is challenging because of the wide variety of operating systems and hardware devices available. Ultimately, senders are tasked with creating a single message that will work well with all of them. The best rule of thumb is to keep the design simple and clean. The more sophisticated the design, the greater the chance it will break.

The width of your email should be 100%: The content should occupy the full width of the recipients’ mobile devices without requiring them to scroll horizontally. To achieve this, code the outermost container of the message using a 100% width. This ensures that the e-mail will wrap properly, given the mobile e-mail application’s width constraints.

The width of images in the message should be 300 pixels or fewer: Smartphones render images in e-mail with arguably more inconsistencies than desktop or webmail applications. Some smartphones will automatically scale the images so they fit within the display screen perfectly, while others will zoom the entire email out in order to keep the images at the designer’s intended proportions. Play it safe: use smaller images so that they will be seen at the size they are meant to be seen and not force horizontal scrolling if they are downloaded at actual size.

Leave plenty of space between links: Touch-screen users will need to click links with their fingers, and many mobile devices display the e-mail zoomed out by default (e.g. iPhone). This leaves very little room for error in clicking, so leave ample space between links to ensure that your recipients can easily identify and click without accidentally clicking the wrong link.

Don’t use complex images that must fit together seamlessly: In order to design graphically interesting emails, many designers will slice complex images to fit precisely within the confines of a table structure. Commonly used examples are rounded corners or tabbed navigation. The more complex the layout, the less likely it will render correctly across various mobile devices.

Mobile design can be a real challenge, given the all of the different screen sizes and functionality available on mobile platforms and devices. But with some careful planning and design choices, senders can ensure that their messages can keep up with their recipients, where ever they may go. The full text of the whitepaper is available, free for the clicking.

Tools for Mobile Email: PC-Mobile Hybrid Templates

Tuesday, September 28th, 2010

With the proliferation of smartphones and tablets, you can be sure that a certain percentage of your emails are being read on mobile devices.  One of the critical questions for designers and marketers is what percentage.  If the percentage is low, it may not be necessary to make any design changes to your messaging (except that it always makes sense to use the mobile web version).  If it’s high, then radical design changes may be needed in order to accommodate your mobile recipients.  So before you start editing your email messages into narrower, mobile-optimized designs, you should analyze whatever audience operating system and device data is available, and decide which design techniques make the most sense for your list composition.

In the Tools for Mobile Email release, a series of templates have been added to the Template Library that customers should consider using under a third scenario: their list has a large percentage of both mobile and PC viewers.  The goal of these “PC-Mobile Hybrid” templates is to produce messages that are easy to read and interact with in both mobile and PC environments.

These are some of the templates’ key attributes:

  • They’re coded so that your content is optimized for both PC and mobile viewing.
  • The banner is comprised of a small image (aligned left) and surrounded by a background color that compliments the image.  Together, these elements give the illusion of a banner going all the way across the top of your email.
  • The layout is constructed using one-column and utilizes borders and background colors to separate content sections.
  • Images are used sparingly, and when they are used, their width is 300 pixels or less.

Here you see an example of how a message using a PC-Mobile Hybrid template renders on an iPhone and a regular PC:

photo

Hybrid Template – iPhone Rendering

PC_version

Hybrid Template – PC  Rendering

To access the PC-Mobile Hybrid templates, name your message and click the red “edit” button under the Messages tab.  Next, click the Template Library link in the left navigation bar.  Once on the Template Library page, simply navigate to the last category and you’ll find a series of themed templates under the PC-Mobile Hybrid category.  Like the other templates in the Template Library, these are free of cost.

Finally, be sure to test your message in both mobile and PC environments prior to broadcast.

If you have any questions, please call support at 301-652-5074 or email support@realmagnet.com

While it is important to be aware of how your email is rendering across mobile devices, it is more important to be mindful of what percentage of your audience is reading email on their phones, and what percentage is reading email on their PCs. Before you go all-in with a narrower, mobile-optimized design, you should analyze whatever audience operating system and device data is available, and decide which design techniques make the most sense for your list composition

Tools for Mobile Email: Creating Mobile Content

Wednesday, September 15th, 2010

If your organization is like most others, certain recipients view your emails on a mobile device and others on a PC. And some are viewing them on both! These unpredictable behaviors pose a dilemma to marketers: should the email you send be optimized for mobile or PC viewing (assuming you’re not segmenting on mobile vs. PC viewership and creating separate mobile and PC messages)?

New content creation functionality included in Real Magnet’s Tools for Mobile Email release offers a useful option.  This functionality allows you to create a web page of your message that is optimized for mobile viewing. This mobile version is accessible via a link at the top of the message (see below).  In fact, it’s the same link that recipients click to view the traditional “web version” of the message.  The beauty is that there is only ONE web version link.  If the recipient views your message on a mobile device, it will render the mobile-optimized version.  If it is viewed on a PC, it will render the PC-optimized version…automatically!

mobile-web2

Here’s how it operates:

Step 1: Create your email message like you normally would and save.

Step 2: Click “Mobile Version” in the left hand navigation.

Step 3: Real Magnet will auto-generate a mobile version of the message by stripping out images and applying a 100% width attribute to the message.  The latter will size the message content to to fill 100% of the recipient’s mobile display screen, unless an image or table exceeds a mobile device’s screen width (hence, we recommend a width no greater than 240 pixels for images and tables).  You’ll have full flexibility to edit the mobile web version any way you see fit.

Note that if you’re using a template, the template will be removed. Stay tuned for a future blog post that will provide Real Magnet’s design tips for creating a mobile version of your message.

Step 4: Next, go to Tools and select Manage Web Version under Message Tools.  Follow the instructions for creating a link to the web version.  Use language such as “Click here for Mobile or Web version” or any other derivation you desire so recipients understand that both mobile and PC-optimized web versions of your message are available.  This functionality is an account-level setting so the language you use (and the link itself) will be included in every message emanating from the account.  Again, recipients who click the link via a mobile device will get the mobile version, and those that click from a PC, will get the standard web version.

If you have any questions or want further information, please contact us at support@realmagnet.com or at 301-652-5074.

PC version of sample message

PC version of sample message


iphone_tp2

View of mobile web  version of the same message

Tools for Mobile Email – Coming in September!

Wednesday, July 28th, 2010

“Already 64% of key decision makers use their smartphones to check and read their email.” — MarketingSherpa

As the market for mobile devices powers forward, more recipients are viewing your messages on smartphones, iPads, and other gadgets. In September, Real Magnet will release a tool set to help you market more effectively to this expanding group of mobile recipients. These tools for mobile email are comprised of three components:

Mobile Content Creation Tool

You’ll be able to create a mobile version of your message with new content editing tools. With a click, Real Magnet will auto-generate a web version of your message that is optimized for mobile rendering. You’ll have maximum flexibility to edit this mobile-web version according to your own requirements.

Mobile Indicators and Geo-Location Tracking

Real Magnet’s message tracking is expanding to include new metrics on how and where your messages are being viewed. This data can play a critical role in your targeting efforts. For each message, you’ll now see:

  • Open % – mobile vs. PC
  • % breakdown of Opens by mobile devices
  • % breakdown of Opens by browsers (PC and mobile)
  • % breakdown of Opens by Operating System
  • Opens by recipient location

On the main tracking page for each message, you’ll see the graphic below.  You can mouse over the pie charts to see percentages and drill down to get the details.

Mobile Tracking

Overview Technical and Geo-Location Display

Mobile Rendering Previews

Just like the email in-box you use on the web (Outlook, Yahoo!, Gmail, etc.), different smartphones will render your HTML messages differently. As part of this release, a rendering preview feature will be added that provides the actual display of your content in the most popular devices, such as iPhones, Blackberrys, Window mobile, and others), so you can avoid design mishaps BEFORE sending your message.

Preview of Blackberry

Preview of Blackberry

Preview of iPhone

Preview of iPhone

In the upcoming weeks, more information on the Tools for Mobile Email release will be available right here, so stay tuned!

Redesigning Your Email’s Cockpit

Friday, May 7th, 2010

This month in MediaPost I wrote a column about redesign. Appropriate, of course, given all the changes around here this week. In fact, the topic wasn’t coincidental. Everyone here has spent a lot of time getting to know the new interface and features (love the new Reports module), and we devoted a lot of time leading up to the launch discussing how our customers would respond to it. Ultimately we concluded that change is good, and pushed onward with the redesign.  At the same time, it occurred to me that as email marketers, we face the same dilemma when considering whether or not to update the look and feel of our emails. How will our subscribers respond to the change? Will the new features wow them, make them dizzy, go unnoticed? How does our current design reflect our brand? How should it? The article addresses these questions, though doesn’t ultimately answer them. Design is important. And your design, in particular, is too important to leave to someone who doesn’t know your business as well as you do.

Redesigning Your Email’s Cockpit
by Mike May
published on 5.5.10 in MediaPost’s Email Insider

At Real Magnet, we just flipped the switch on a redesign of our application. Like any website relaunch, it feels as if you’ve just bought a new car. You step in and the vital controls are still where you expect them to be: steering wheel, brake and gas pedals, mirrors benefit from some design improvements, yet otherwise function exactly as before. But there are new gadgets and features everywhere: in-dash navigation, Bluetooth integration for a phone, more electronic indicators on the dashboard providing feedback on fuel efficiency or outside temperature, and twice as many cup holders. There are also enough cosmetic differences to create an entirely different impression from the last car. Who would have guessed that changing the dashboard illumination from eerily glowing red to eerily glowing purple could have such a profound impact on the user experience?

For many businesses, email is their cockpit. It is through email that their customers experience much of the company’s brand, and how they navigate through and into the company’s offerings. Like a car, it’s comforting to step in and find everything exactly the way you like it. But also like a car, it’s exhilarating to upgrade to this year’s model, with modern looks, features and smells. When you’re considering an email redesign, how do you strike a balance between consistency and innovation? How do you find the middle ground between boring and inscrutable?

I don’t know the answer. Maybe I’m supposed to for these articles. I suppose I could follow the pundit’s formula and mix together a hypothesis, an anecdote and a wild guess, into something I’d call a best practice. I could convince some of you that this was the answer, and probably a few more that I at least believed this was the right answer.

But the truth is that design is just too important to fake, and too individual to each company to provide generalized advice. Design’s resistance to convention and best practices makes it especially difficult to master. We pour hours of resources into tracking and analyzing the way our emails perform, but precious little into the way they feel. Often our objective is to get people through the email as quickly as possible, instead of taking full advantage of our brief ownership of the inbox. Why do we work so hard to drive people to our websites to experience our brand, when they’re experiencing it already in the comfort of their own preview pane?

But email — you may argue — isn’t about feel; it’s about immediate results, measurable ROI and accurate attribution, right? Isn’t the effectiveness of email design visible in the performance data? It is an easy argument to agree with, in part because doing so relieves us of the burden of allocating to design the discrete resources it deserves. Agreeing that design is contained within performance data is logical, yet vaguely unsatisfying. Design is powerful in an emotional, intangible, perhaps inexplicable way. Looking for it in click-through rates is akin to deconstructing the Sistine Chapel with a brushstroke analysis.

If you believe I may be onto something here, you’re certainly in the minority. I expect I lost most of you at the word “feel.” Better for you though; if competitive advantage can be achieved through design, the fewer of your competitors who get it, the better. For the few of you still reading, here is my complete catalog of recommendations for redesigning your email, the cockpit of your brand:

1. Put more resources into design. Even if it is not a ROI windfall, better design certainly can’t hurt. Besides, you’ve probably already tried to optimize every other aspect of your email program, with varying degrees of success.

That’s it: my entire list. Anything else would presume I know something about your brand, what it stands for, how it’s positioned, and what role email plays in how your customers perceive it.  All of that is for you to figure out. When you do, will you have the design to show it?



Building your nest: trading in rowspans for nested tables

Tuesday, February 23rd, 2010

We at the design team here at Real Magnet have spent a good deal of time tweaking html code to look just right in as many email clients as possible. By far, the one that gives us the most headaches is Outlook 2007. Just when you think you’ve got your code just right, there might be a space or misalignment in your design that, no doubt, was not accounted for in your html. We do get a fair number of calls from clients with similar problems. The good news is that many times, the culprit causing the major misalignments and unexpected gaps in your design is rowspans.

As we’ve progressed in the web design world from table to CSS-driven layouts, the email world has lagged behind and still requires that all layouts use tables to render properly across most email clients. A basic table layout for email is simple: header, content and footer. But what happens when you want to span an image across multiple table rows, or you’ve sliced up a design in Photoshop with complex images that need to fit together seamlessly? The standard solution: use a rowspan as we’ve all done in Word, PowerPoint or Excel as seen below:

row1
row2
<table cellpadding=”0″ cellspacing=”0″ width=”300″>
<tr><td rowspan=”2″ width=”250″><img src=”http://bit.ly/caiPHW” width=”250″/></td>
<td>row1</td></tr>
<tr><td>row2</td></tr>
</table>

Most of the time, depending on your layout, Outlook 2007 will ignore the rowpan causing unexpected spaces in your layout, here’s how we get around that: nested tables. Set up your table as you normally would, but instead of the rowspan, put a table into the cell where you’d like the two rows to be, as seen here:

<table cellpadding=”0″ cellspacing=”0″ width=”300″>
<tr><td width=”250″><img src=”http://bit.ly/caiPHW”/></td>
<td><table cellpadding=”0″ cellspacing=”0″>
<tr><td>row1</td></tr>
<tr><td>row2</td></tr>
</table></td></tr>
</table>

This can get pretty tricky as your designs become more complex, but don’t worry – it becomes second nature quickly! I would recommend thinking through your whole design first, where you’ll need to span more rows and use the nested tables. Draw out your tables; this will save time in the end when you are trying to sift through tons of <td>s and <tr>s trying to find the exact spot where you’d like to add your extra tables. This probably isn’t the solution to all of your Outlook 2007 woes, but is certainly a good place to start!