Posted by: Aaron Pearson, Sr. Graphic Designer

In a recent webinar, I discussed Listrak’s approach to responsive design and mobile engagement with best practices for navigation, text size, stacking and resizing content, retina graphics, and the use of media queries for mobile styling. There were many great questions asked by our viewers following the webinar, but the two topics that were most popular seemed to be retina images and stacking content. In the paragraphs to follow, I will review these topics and provide a clearer understanding of how they work and why they’re important.

Retina Images

You may not realize it, but you probably look at a retina screen every day. Most smart phones, tablets, newer models of laptops and even desktop monitors have high-resolution displays. These high-res displays jam 2 or 3 times the number of pixels into a small screen, enhancing the quality of photos and making text clearer and easier to read. However, we need to make sure our graphics, text, and photos are optimized for these higher density screens.

The most common pixel density for retina is 2x, meaning there are 2 times the number of pixels per inch. A screen that is 320 pixels wide will be 640 pixels across, and because of this, images need to be double in size to appear crisp on a retina screen. Images that are not scaled correctly will appear blurry and unfocused on a retina screen. A 200px wide image needs to be 400px wide to match this resolution. In email, we achieve this clarity by doubling the size of important graphics as well as images that contain text.

Below is a sample Listrak email. The first example shows the Listrak logo and social media icons saved at their normal size; note how they look blurry on a smart phone with a retina screen.

When the images are saved at double their natural size, they will be optimized for the 2x resolution of a retina screen. It’s important to note that images must be large enough to be saved at double their natural size, or be vector graphics that can be scaled without distortion.

The Listrak logo, for instance, is being forced to display at 175 x 38, but the natural size of the image being referenced is actually 350 x 76. A retina device will be smart enough to use the larger referenced size, yet still display the image at the size specified in the <img> tag.

Consider the file sizes of your images. Make sure when saving for web that you choose the most appropriate file type and quality. Gifs are typically better for flat graphics and text, while Jpgs are better for photos. Doubling images for retina will increase the file size of your email and cause a slower load time if it isn’t optimized correctly.

This final example shows an image that is large enough on the desktop version of the email to scale to half its size on mobile and be optimized for retina.

The desktop image is being displayed at 500 x 400. A media query was added to style our email for screen sizes less than 480px, and a class of mainImage was added to the <img> tag. Now we are able to style the class with CSS so that our image will shrink to 250 x 200 on a mobile screen — half the size of the image’s natural size — and also be optimized for retina.

 Any questions? Let us know in the comments section.

View our post explaining stacking images

Posted by: Aaron Pearson, Sr. Graphic Design

In a recent webinar, I discussed Listrak’s approach to responsive design and mobile engagement with best practices for navigation, text size, stacking and resizing content, retina graphics, and the use of media queries for mobile styling. There were many great questions asked by our viewers following the webinar, but the two topics that were most popular seemed to be retina images and stacking content. I think it would be good to review these and hope to provide a clearer understanding of how they work.

Stacking Tables

Stacking content in an email requires more than just an understanding of good ol’ fashioned table structure. Planning out our design ahead of time in a grid with appropriate dimensions is an essential part of the process, and a bit of thinking outside the box. We are really pushing tables and nested tables upon nested tables to the limit.

Let’s start out simple, with a 2 column layout that will stack to 1 column on a mobile device. Here is our design:

Desktop:

Mobile:

The two columns we would like to stack are the location and date. Each of these columns will be coded as a separate table, one aligned left, the other aligned right, and a wrapping table.

There must always be space between tables, in this case between the blue and green tables. Outlook is quirky and adds padding to tables that are aligned left or right. Adding the border-collapse styles to the table does help, however the amount of space does not seem to be consistent. When there is not enough space between the tables, Outlook will force one table below the other. Always be sure to test.

We have added a class to each table that will style them as 100% when viewed on a mobile device. When the tables become full width, they will no longer float next to each other, but will stack, giving us the appearance of 1 column.

Here is the CSS for the mobile styles:

Adding additional columns can be tricky. There are two ways multiple columns can be achieved.

1. The first method is the simplest, but for someone who is pixel perfect, not exactly ideal. Any number of tables can be aligned left to form multiple columns. The key here is to fix the width of each table to fit within your layout. Remember to leave room to allow Outlook to add space to the aligned tables.

2. The second method will give you much better results, but requires more planning and math; but it is basic math, no reason to be afraid. Similar to the Listrak example that was explained, each table should contain two tables, one aligned left and the other aligned right. To add a third column, the first two tables need to be wrapped in a table that itself is aligned left, and the additional table will be aligned right. This can be repeated for any number of columns, each nested table containing just two tables.

Try each of these methods and let us know which you prefer. Something else to try; with CSS you can make your widths become 100% to create a 1 column layout on mobile, but you can experiment with 50% widths to give yourself a 2 column layout on mobile. This works great for product layouts.

Any questions? Let us know in the comments section.

Read our post explaining Retina Images

There is plenty - and varied - information available on using symbols in subject lines. Below Listrak Account Director Karen DiClemente shares some thoughts and best practices: 

When using symbols in subject lines, retailers are primarily trying to drive higher open rates. I encourage ALL clients to A/B test subject lines with and without symbols to see if the symbol actually made a significant impact on open rates.

Prior to using a symbol, here are a few questions I tell clients to ask themselves:

• How does using symbols in a subject line impact your brand (will they be seen as juvenile? Is this the brand impression you want your subscribers to have?)
• Does the content of the email warrant a symbol in the subject line?
• Make sure you are using symbols for a reason (not just to “use a symbol”):

1. Symbols can be used as a separator or punctuation
2. Symbols can be used to replace an actual word (ie. using a ♥ to replace the word “heart”)
3. Symbols can be used as a decorative design element

• Not all symbols render in all email clients – make sure you are using a rendering tool (ie. Email on Acid or Litmus) to ensure the symbol you chose will display correctly

The guide below provides some more detail: 

Subject Line Symbols by Email Client

Outlook 2010 – all symbols render correctly; color does not change

Outlook.com – all symbols render correctly; color changes based upon specific symbol

Comcast – all symbols render correctly; color does not change

Gmail – all symbols render correctly; color does not change

Yahoo - all symbols render correctly; color does not change

AOL/AIM – changes the 8th symbol; color does not change

Android – only the yellow symbols render correctly; color does not change

iOS (iPad/iPhone) - all symbols render correctly; color changes based upon specific symbol

Windows Phone - all symbols render correctly; color changes based upon specific symbol

It is no secret that we tout the modal popup as the ultimate tool for building your email subscriber base, and we have the research to prove why. There are still those, however, who avoid using this time-tested tactic for fear that they will annoy – and potentially lose – prospective customers. 

Recently, while discussing the effectiveness of exit popups, Listrak Senior Solution Consultant Joe Devine met with the popular popup objection. We thought his response was worth sharing:

The best strategies surrounding pop-ups, side bars, footer overlays, or any other sort of whirligigs are often hotly contested by marketers. Some folks see them as the utter dissolution of all brand integrity, while some of us see them as a necessary engagement tool when trying to achieve revenue goals. 

The truth is engagement KPIs are lifted when you strategically increase acquisition. However, with such a broad spectrum of sentiments, one thing is clear: One size will not fit all and testing is key to driving adoption.  After years of deploying and testing these technologies, it may seem brash, but the simple fact is, these tools work and work well. For every naysayer, I would challenge you to prove that the revenue results are not achievable or that any detriment to your brand or UX can’t be overcome. 

I have said many times, for each member of your audience who abhors the technology, there are 100 more who will engage and interact with it. Marketers and brand strategists can take their windfall of profits from the 100 shoppers who convert at significantly higher levels and send flowers requesting forgiveness from every disgruntled website visitor, leaving plenty of profit for the bottom line (literally, a beautiful spring bouquet of fresh flowers!). With the right strategy, you can win your audience over. 

Some retailers seem to have missed or dismissed the concept of “selling.” I believe that many audience members, on some level, want to be engaged during their shopping experience. Just as a sales rep on the floor of your stores should be greeting and interacting with patrons, so too should your website. Will you please everyone? No. But who is out there today pleasing everyone?  If we make marketing decisions based upon the small audience we can rarely please, we miss the opportunity to please the audience that is ready, willing, and able to engage with us.

Once again, Listrak will be at the intersection of commerce and couture when we participate in Fashion Digital LA on May 7. At the show, Ross Kramer will be leading the panel discussion Measure What You Manage: Customer Acquisition and Retention Strategies, where industry experts will discuss their measurements for success and what ROI looks like across different channels. 

Find out more about FDLA and all of Listrak’s upcoming events on the News and Events page of our website. 

Travis

In case you’re not aware Gmail is currently doing a field trial that allows you to view image previews of promotional emails. It’s referred to as the grid view. I signed up for the field trial and it’s definitely something retailers will want to take advantage of. There was however an issue I noticed. Some of the emails did not have an image preview. With a little research I discovered there are a few things that can cause this problem. This article at FreshInbox provides some helpful information about fixes for the issue.

Listrak client Naturopathica was recently recognized by the Web Marketing Association as a winner in the 2014 Internet Advertising Competition Awards. The manufacturer and retailer of professional skin care was honored in the category of Best Fashion or Beauty Email Message Campaign.

The email campaign that earned Naturopathica the prestigious honor was a series of welcome emails created by Naturopathica Director of Direct Marketing and Sales Sarah Falcon, Marketing Associate for Digital Content and Creative Suzie Morgan and Creative Director Eon Kim, in conjunction with Listrak, the company’s Email Service Provider.

Sarah Falcon describes the winning campaign. “The series of three emails serves to introduce new subscribers to the Naturopathica brand and features gorgeous branded photography to set the stone for the Naturopathica experience. The first email welcomes the new subscriber and offers a discount on her next order;

the second provides insight into the brand with a note from our company founder and CEO Barbara Close;

and the third highlights the products that make Naturopathica the spa industry’s best-kept secret.”

The automated welcome series of emails is triggered through the Listrak platform when a new subscriber signs up through a modal window on the Naturopathica homepage and results in exceptional engagement and conversion rates. Falcon shares, “The winning campaign has more than a 48% open rate, a more than 10% click through rate and a more than 24% conversion rate – the highest overall engagement of any of our email campaigns. “

She continues, “Since it launched, sales from our Welcome Series alone has lifted our total eCommerce sales by more than 6% and total web traffic by more than 12%. In addition, new customer sales have lifted more than 107% year over year.”

Listrak CEO Ross Kramer comments, “We are thrilled that Naturopathica has received this well-deserved honor that puts them in company with some major world-class brand marketers.  We recommend that any client follow a new email signup with a series of welcome emails, because they come at a time when the subscriber is particularly engaged with the brand and therefore typically return some of the best results of any email campaign. For Naturopathica, this, along with exceptionally well-crafted messages and stunning photography, is clearly a winning combination.”

 About the Award

Each year the Web Marketing Association’s IAC Award Competition names the Best Email Message Campaign. The winners are selected by judging the entered creative using seven criteria – design, ease of use, copywriting, interactivity, use of technology, innovation and content.

 About Naturopathica

Nearly two decades ago, clinical esthetician, aromatherapist and herbalist Barbara Close realized that clients at her Healing Arts Center & Spa struggled to find the ideal anti-aging skin care solutions. At the same time, medical studies were proving that chronic inflammation and irritation are at the heart of aging and weakened skin. In response, Barbara created NATUROPATHICA—a breakthrough line of

professional skin care that delivered real results and yet was safe enough even for sensitized skin. Today, NATUROPATHICA is trusted and recommended by professionals in over 350 of the most renowned spas across the USA and Canada. www.naturopathica.com

Welcome to the first installment of our new Partner Perspectives blog post series. Under this header you will find valuable information shared by our omnichannel marketing partners who, like Listrak, are dedicated to helping retailers succeed.

Our debut post comes courtesy of our friends at Groove: 

Big Data Insights: Identifying & Retaining Your Best Customers

Some online customers are better than others – there, I said it. Shocked? You shouldn’t be. These are the customers that spend more money, buy more often, and think your products and services are fantastic; they’re your unofficial brand ambassadors and their continued support for your business is essential to maximizing revenue potential, particularly over the long-term. But just how important are these “best customers” for eTailers as we push forward in 2014? How do you properly identify this group and then actually retain them? To tackle these questions, I joined forces with big data pro and Content Marketer Janessa Lantz of RJMetrics, an emerging business intelligence SaaS based out of neighboring Philadelphia that has partnered with a number of impressive brands that include Bonobos, Fab.com, Frank & Oak, and Threadless, among others. 

Part 1: Janessa

What Big Data is Telling Us

In our 2014 RJMetrics eCommerce Benchmark Report, we analyzed customer data across hundreds of our eCommerce clients to find the answer to the question posed earlier: just how good are your best customers? The answer is profound.

Wow, right?! This group isn’t just slightly better, they’re far and away your most important customer segment as they spend 30x more than your average customers over the course of their lifetime. They also make 4x more purchases than your average customers and spend 5x more per order. To put this all into perspective, your best customers spend as much as the entire bottom half of your customer base over the course of their expected purchasing history. If you’re ever going to lose a customer, these are not the ones that you want to lose.

Wow, right?! This group isn’t just slightly better, they’re far and away your most important customer segment as they spend 30x more than your average customers over the course of their lifetime. They also make 4x more purchases than your average customers and spend 5x more per order. To put this all into perspective, your best customers spend as much as the entire bottom half of your customer base over the course of their expected purchasing history. If you’re ever going to lose a customer, these are not the ones that you want to lose. 

How Do You Identify The Best of the Best?

Step 1: Calculate Your Store’s Average Customer Lifetime Value (CLV)

To find your best customers, you’ll need to look at more than just your “biggest orders ever.” This isn’t about one-off purchases; this is about finding (and keeping) the kind of customers that buy again, and again, and again. For this, you’ll want to look at customer lifetime value (CLV) which is an absolute paramount metric to use for calculating marketing ROI, finding the needle in the marketing spend haystack, and identifying your very best customers. It measures the profit that your business makes from any given customer over the course of their purchasing history. While this may be a particularly extensive exercise if you have a large customer database, it’s an important one and worth the resource investment. This formula can be equated in a few different ways (and also vary slightly by industry), but here’s a simple B2C version if you’re new to the concept:

CLV = (Avg. Order Value) x (Orders Per Year) x (Avg. Retention Rate)

Start by taking the data from your entire customer database so that you can calculate an overall average customer lifetime value – this will serve as your basis for comparison later on.

RJMetrics Pro Tip:  Want to take the above customer lifetime value formula a step further by including factors such as Customer Acquisition Cost? Check out our sweet (and totally free) CLV Calculator; sneak peak below:

Step 2: Segment Individual CLVs to Identify Outliers

After calculating your overall average CLV for your store’s database, you’ll want to dive into individual CLVs by creating customer segments. How you develop customer segments and dive into the data at the individual customer level is an art form and can be daunting depending on the size of your database. If you have a tool that can properly leverage consumer data for intelligence reporting (cue my RJMetrics pitch), this is definitely the time to use it. After your segments are created, and you’ve calculated CLV at the individual level, compile a list of your best customers based on those furthest north of your average mark from step 1. Treat this list like gold and know that if you lose just one of these customers, you could take a major hit to growth long-term and wind up looking like this guy…

Step 2: Segment Individual CLVs to Identify Outliers

After calculating your overall average CLV for your store’s database, you’ll want to dive into individual CLVs by creating customer segments. How you develop customer segments and dive into the data at the individual customer level is an art form and can be daunting depending on the size of your database. If you have a tool that can properly leverage consumer data for intelligence reporting (cue my RJMetrics pitch), this is definitely the time to use it. After your segments are created, and you’ve calculated CLV at the individual level, compile a list of your best customers based on those furthest north of your average mark from step 1. Treat this list like gold and know that if you lose just one of these customers, you could take a major hit to growth long-term and wind up looking like this guy…

Step 3: Study Your List of Best Customers

Once you know exactly who these best customers are, it’s time to get cozy with them. Use quantitative data to understand the products they purchase, acquisition source, their behavior patterns on-site, etc. Likewise, don’t overlook the value of qualitative research. Take some time to survey them, pick up the phone and give them a call or even send a friendly email. Make it your top priority to understand why these customers love you so much and start thinking about how you create that same attachment in other customers. Bottom line: the more patterns that you’re able to identify in these top customers, the easier it will be to recreate this process and recruit other customers into this top tier.

Part 2: Back to Tom

Retaining Your Best Customers

To piggyback on the research from Janessa and the folks at RJMetrics, I just wanted to list a few practical tips for retaining your top customers once identified.

Tip #1: Give ‘Em VIP Treatment

We’ve had several clients here at Groove upgrade their top customers to a VIP -like group based on what we’ve been able to collectively determine best customer qualifications. Perks for these groups have included: Free Ground Shipping, $5 Flat Rate Shipping w/ No Order Minimum, and Free Samples & Branded Giveaways. While these have typically been small investments from a monetary standpoint for our clients, that little “extra” always seems to garner extremely positive feedback from the customers, hence why big players like Zappos have been championing this system of surprise upgrades for years now. Think you’re too small to do the same? I challenge you to find your top few customers, offer them a perk, and then evaluate the response. While it might take some trial and error with the perks offered to see how these customers respond, it should serve as an extremely enlightening exercise.

Magento Pro Tip:Are you on Magento and have already figured out how to create new customer groups but feel limited by the promotions that you’re able to offer out-of-box? Don’t feel like doing everything manually? Consider checking out these extensions:

J2T Auto Add to Cart - allows you to automatically add products to a customers’ shopping cart based on rules and conditions that you create (i.e. a free branded giveaway if a customer logs into an account that’s part of your VIP group).

Special Promotions by Amasty - offers a ton of new promotional opportunities and rule combinations; see sample of new rules available below:

Tip #2: Reward Referrals

Love the idea of turning your best customers into brand advocates? Maybe they’re already referring you to friends but you need a way to reward them so that they continue to do this? Well if you’re targeting a sophisticated platform approach to this, you need a tool that can easily integrate with your website, preferably in multiple locations (i.e. product pages, CMS pages, and your post-purchase page) and offers clean social sharing to make the referral process as seamless and painless as possible. My guess is that you’ll need a third party platform for this.

Magento Pro Tip: Depending on your business model and how involved you want to get, you may want to consider a point-based reward campaign, in which case you can find excellent platforms in SweetTooth and 500friends.

Another option, that removes the whole “point system”, is a platform called FriendBuy, Why do I like these guys? Aside from partnering with some serious brands that include Dollar Shave Club, Warby Parker, and Birchbox, I’ve had an absolutely great experience implementing the platform on Magento. Setup is minimal, their template offerings are extensive, conversion reporting is great, and social sharing is made extremely simple. Check out an example of FriendBuy in action with our client Dormify (this is taken from a CMS landing page, though we do have links to the widget on product pages and their post purchase page as well):

Tip #3: Get Personal

My roommate has placed several orders over the last six or so months from the UK-based Men’s Clothing shop, Charles Tyrwhitt, and absolutely loves their shirts (he has roughly 10 now). With his latest purchase, he received a handwritten note from their Director of Customer Service thanking him for the order as well as his brand loyalty over 2013. The message was short but extremely effective — my roommate placed another order a week later because of how impressed he was with the level of personalization and proactive outreach. Being the eCommerce nerd that I am, I ran a search query on Google to see if this “letter” was something that Charles Tyrwhitt has done before and/or does on a recurring basis. What did I find as one of the very first images listed in results? Brace yourself…

My response?

#AreYouKiddingMe? I could not have been more impressed here. The quality and level of personalization coming directly from the CEO of the company (who also doesn’t even MENTION his title) coupled with the free gift voucher is just a double whammy of epic proportions. Could he have written 100 of these same letters and just swapped out customer names? Does the gift voucher really only equate to just $13.54 in USD? Could this have actually been written by an entry-level assistant? Yes, yes, and yes. But still, come on… this is impressive. Consider writing something along the lines of the letter above and adding it to a few of your next best customer orders — that 30 minutes of your time should pay off plenty in future business.

Conclusion

While this is by no means a complete list of strategies for retaining some of your best customers, they’re a few that I find to be effective and relatively easy to implement. 

Janessa Lantz, Content Marketer at RJMetrics

Co-blogger Janessa Lantz is a Content Marketer at RJMetrics, an emerging SaaS business intelligence platform for eTailers, with clients that include Bonobos, Fab, and Threadless. In her spare time, she’s usually reading, napping, or delivering spontaneous lectures on her current topics of interest.