Geek Pride Day Trivia Success!

Thank you to everyone who submitted a trivia stumper for our Geek Pride Day Trivia! Our teams had a great time competing in five categories: Entertainment, Sports, History, Geography, + Whereoware. A valiant effort was made by all teams but Yer a Quizzard Harry is the winner!

Whereoware will donate $1,500 to the Loudoun County Animal Shelter! Check out all the fun we had – below!

yer a quizzard harry

Marketing Tip – Abandonment 101

As much as we’d like to think that everyone who goes to a site searches, adds items to the cart, and purchases – that’s just not always the case. Customers abandon the process either at the stage of searching, browsing, adding items to cart, or finishing a process (here’s looking at all you service companies).

Let’s take a closer look at the types of abandonment + emails to re-engage:

Search Abandonment:

Visitor uses the search feature on your website to look for “Birthday Outfits” the page returns all the products that match that description. The visitor doesn’t click on a specific product, but instead closes out of your website – abandoning the search.

Send a follow up email targeting search abandoners featuring the same products that the search term returned.

mudpie search abandon

Browse Abandonment:

Visitor looks at different products on your website, either across differing product categories or the same category. The visitor doesn’t add items to cart or checkout, but instead closes out of your website – abandoning the browse.

Send a follow up email targeting browse abandoners featuring the one or more of the products they viewed. (See how Plow and Hearth increased engagement with their browse abandonment campaign).

potterybarn browse

Cart Abandonment:

Visitor looks at different products on your website and adds items to cart. The visitor doesn’t checkout, but instead closes out of your website – abandoning the cart.

Send a follow up email targeting cart abandoners featuring the product(s) left in the cart.

saks cart abandon

The above three types of abandonment are e-commerce-centric, but that’s not to say service companies can’t get in on the re-engagement fun too.

Process Abandonment:

Visitor starts a process but abandons the process before completing all steps.

Send a follow up email targeting process abandoners showing steps left to complete.

evernote

Re-engaging website visitors and customers in order to convert is paramount regardless if you’re an e-commerce or services company. Use your customer data to enhance the website experience whether that’s browsing and purchasing a product or registering for a service. Did the examples above leave you wanting more? Well, you’re in luck! Check out the behavioral email inspiration sheet we put together.

PPC Tip – increasing pay-per-click ad spend ROI

Who

Fitz and Floyd is a leader in designing and manufacturing hand-painted ceramics, dinnerware, gifts, collectibles, and home décor.

Challenge

Whereoware developed pay-per-click (PPC) campaigns to drive traffic to FitzandFloyd.com, but these campaigns were underperforming for revenue in January 2016.

Solution

Whereoware’s search team analyzed Fitz and Floyd’s current PPC campaigns and identified three areas for improvement. Read the short case study (right) to see how  small changes to their under-performing campaigns ultimately grew the return on ad spend 105%.

Try To Outsmart Us – Geek Day Trivia Competition

We’re so pumped that Geek Pride Day is this Wednesday, May 25!

We’re celebrating in typical geek fashion with a battle of the brains – a Whereoware Trivia competition!

Our trivia superheroes teamed up to win $1,500 for charity, but we need your help to stump them! Please send us your trivia questions, using the form (protected by our green superhero, CEO Eric Dean).

Categories are Entertainment, Sports, Geography, History, and Whereoware Fun Facts.

Your trivia question might decide whether Yer A Quizzard Harry takes the title of Whereoware Trivia Master, or whether Revenge of The Nerds wins big.

Check out all our teams + their charities, and thanks in advance for sending us your trivia stumpers!

Whereoware Geek Day Trivia Competition

 

Behind the Glasses – Frank

Frank BTGEach month, we interview one of our fab employees here at Whereoware. For May, we get to know Frank, our Vice President of Finance + Administration, a little better.

WHO:

What’s your name? Frank Policastro

Job title: Vice President of Finance + Administration

BACKGROUND:

Favorite food: Pizza or anything Italian.
Hidden talent: I am a world champion pizza spinner! Ok, maybe not “World Champion”, but definitely the best in my family!
If there were a movie of my life, I’d be played by: Matthew Broderick.
One item you would bring to a desert island and why: A pizza cutter! Which would come in handy to crack open coconuts and fresh crab legs (and of course any cold beer that may drift ashore)!

NERD QUIZ:

Facebook or Twitter: Facebook
iOS or Android: iOS
‘Nerd’ or ‘Geek’: Geek
Star Wars or Star Trek? I am embarrassed to admit that I have never seen Star Wars or Star Trek!

What’s the best part about working at Whereoware?

I am inspired each and every single day to have the opportunity to do my small part in enabling our very talented, dedicated, and fun teams with the tools needed to achieve excellence in delivering a customized and personalized web and mobile experience to our amazing clients!

Email Tip – Behavioral Email Inspiration Sheet

Thanks to everyone who joined us for our webinar with Internet Retailer – Transform Your Email With Behavioral Data.

In a traditional email campaign, the marketer develops an offer like an eBook, infographic, or whitepaper. Then they create a segment of people that might find that offer valuable. Lastly, they email that group of people, often out of the blue.

Behavioral email is all about adopting a user-focused approach to sending email. In other words, it is the actions of leads and customers that dictate what emails they receive, not a decision made by a marketer.

Behavioral emails are automated, targeted emails that use your customers’ interactions with your company across multiple channels: social media, email, your website and beyond to provide the most relevant information to them when they need it most.

As promised, we’ve cultivated a few of our favorite behavioral emails to inspire you to do the same for your organization – download the email inspiration sheet above. If you missed the webinar, check out the presentation below!

Web Tip – B2B personalization in action

Did you miss our recent webinar with Episerver, Getting B2B Personalization Right: A Buyer-First Blueprint? (We embedded the video below, so you don’t miss a thing.)

B2B-Personalization-Delights-CustomersWe’re just OBSESSED with personalization. We admit it – we’re head over heels for the stuff.

Whereoware has been in the personalization business for more than 10 years, long before it became a trendy buzzword. We’ve proven how personalization can help resolve brands two biggest challenges: making customers happy, so they’re forever brand loyal; making business operations more transparent, consistent, and effective.

Today, we recap why we’re pretty much addicted to making B2B business more personal and relevant.

About B2B Personalization

“Personalization” simply means collecting everything you know about your business (a customers’ actions on your website, a sales reps’ actions in the field, how your audience interacts with your email, etc.) and letting this data tell you what strategic changes to make or targeted promotions to create.

Every brand has preconceptions about their business and reasons they operate the way they do. Personalization cuts through the “what we think we know” preconceptions into the concrete story your data is telling you.

What does personalization look like?

B2B personalization might be hard to picture. Here are three examples:

You see customers start your five-step checkout process, but don’t complete it. Many keep stopping at step 4: complete their address. You update your checkout process to be three simple steps with a visual indicator showing customers where they are in the process (so customers know what to expect and are less likely to get frustrated ). You personalize the process by pre-populating address information, so the contact can breeze through this step. Your website data told you where customers were getting stuck, so you could fix it. Pre-populating the address makes the checkout process quicker and easier, so fewer customers drop off.

You work for a software company and see that Prospect A downloaded a white paper about your newest software. You email him a complimentary FAQ sheet about the software. When he visits your website a second time, the hero image offers him a free, no-pressure demo of the exact software he browsed (but everyone else sees a default software). Again, your website data told you which white paper the contact downloaded, so you could offer an additional relevant asset, enhance his experience, and guide him towards a demo.

Sound like a bunch of witchcraft to you? Our client Sullivans, a B2B wholesaler, knew based on their data that retailers were only shopping from one product line, not all three.
Instead of emailing their whole database with the same promotion, they grouped their retailers into three, product-based buckets (called personas) – Everyday Items, Artist Collections, or Seasonal Products. By segmenting their audience into personas, Sullivans now sends relevant, targeted emails showcasing the products recipients want, and their website is also personalized to display persona-based content and imagery to each visitor.

Sullivans_personalized_homepage

B2B personalization makes shopping easier

B2B personalization aims to make the interactions between businesses more seamless and efficient.

For example, our client Mud Pie’s B2B website caters to busy retailers stocking their stores. In addition to an entirely personalized website that displays imagery and content to suit each website visitor’s product interests (similar to Sullivans’ website. Read about their product-based personalization here), Mud Pie wanted their Retailer Portal to be more personal and relevant for each retailer.

Personalized Retailer Dashboard Mud Pie

Their new Retailer Portal gives retailers access to past orders, account information, resources, and customer service from one intuitive dashboard. Mud Pie leverages order and browse activity data and their site’s recommendation engine to suggest Frequently Purchased Products, Top Selling Products, and Recommended Products that suit each retailer’s needs. Quick Inventory Lookup lets retailers look up items by the SKU number, and they can even create and send customized product wish lists and presentations.

By giving busy retailers simple and effective tools tailored to their unique stores, they’re more likely to make Mud Pie their one-stop-shop to fulfill all their inventory needs.

B2B Personalization is better business

Personalization uses behavioral data to interpret how to enhance customers’ experience with your brand. Subsidizing a business’s big picture goals with granular data offers real-time insights cemented in reality (not preconceptions). It tells businesses how to better target customers with the right product or asset they’re seeking, suggests creative promotions more likely to boost conversions, and also helps businesses pinpoint operational waste and inefficiencies.

Want to talk about getting more personal with customers? We’re here if you need us – gabbing endlessly about why personalization is a better way to do business. (Also, don’t miss the webinar video below)

Getting B2B Personalization Right – A Retailer-First Blueprint

Email Tip – Responsive Email Build

Liz CordeiroThis week, we welcome a guest post from our Online Marketing Manager, Liz Cordeiro. Liz is excited to take over this post + dive into mobile responsive template building with you!

 

So you’ve noticed that mobile sessions on your website are up, and that more users are opening your emails on a mobile device. The next natural progression is to start making your emails look better on a mobile device, but it can be daunting to get started. Did your eyes get wide when you Googled responsive email building and saw words like media queries, fluid, conditional statements PLUS the more advanced code than your typical HTML builds? Take a breath, I’m here to help.

I’ve designed and tested an email to look as good as possible at both desktop and mobile sizes, and I’m going to break down the code for you in a way that’s easy to digest. This is a long post, but I didn’t want to leave anything out – so stay with me!

Setting up header elements

The email will need several bits of code set up in the header. This includes everything between the initial <html> tag & the opening <body> tag. Start with the right Doctype – this will allow you to use all of the code to make it responsive. Here’s an example of how to implement a Doctype – it should be the first 2 lines of code:

!DOCTYPE html

Then the email needs the right viewport. Using this basic one will cause the email to scale to 100% on different screen sizes. Place the viewport before the <title>. Learn more about viewports here.

meta name="viewport" content="width=device-width, initial-scale=1"

Give the email a title.  Seems pretty easy so far, right? Now we reach the part where all of the CSS goes. CSS, or Cascading Style Sheets, is a quick + easy way to implement styles on all of the elements in the email. Elements are the components used to create the email – examples of elements include a <table>, <div>, or <img>.

Not all ESPs (email service providers) accept CSS, but we’ll insert some anyway to make the email look good across most platforms.

The code below targets all images in the email, using the <img> element. It’s telling every image:

  • no border
  • no outline
  • no underline of any kind
  • to keep their natural height/width proportions
  • not to stretch wider than their natural full width
  • to look smooth when resized (for mobile)
img {
  border: 0;
  outline: none;
  text-decoration: none;
  height: auto;
  line-height: 100%;
  max-width: 100%;
  -ms-interpolation-mode: bicubic;
  }

Then, add in the following code to prevent tables from creating extra space.

table {
  border-collapse: collapse !important;
  }

Now that we’ve added in some header elements and basic CSS styling, it’s time to set up a media query!

Media queries

Media queries are far and out the simplest way to make your email behave differently on mobile. Once you understand the syntax, media queries are easy to use + have a variety of uses. Here’s how to write a simple media query:

@media only screen and (max-width: 500px) { CSS mobile styling goes in here }

What’s the media query doing, exactly? When the screen size hits 500px wide or less (called the break point), the email will behave based on the CSS mobile styles you put within that media query. I like to go with 500px, because I think that’s the point at which an email needs to shrink to the mobile version. You can set your break point to be anything, and can even use media queries to target larger screens.

Then, it’s time to set up some basic styles. There are a few things I plug into every media query. First, I put my mobile class – this will make any element with a set width go to a 100% width. Using a percentage means the width of the element will be relative to the width of the screen. I also make sure all padding and margins are removed so it fills the space:

.mobile {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0;
  padding: 0;
  }

Keep in mind that class names are arbitrary. Use what makes sense to you, and make sure your system is easy to understand. Other class names for the mobile class could be wrapper, full-width, or container.

Writing out styles in classes means that you can apply that styling to any element using class=”classname”. If you want to target only specific elements, like a <table>, <div>, or <img>. you would write it like this:

td {
  text-align: center;
  }

That can be tricky though, as the above code would make all of the cells center, which you might not want. If you’re unsure, avoid styling elements altogether within media queries and use general classes that can target any element.

Now I’m going to set up a class to hide elements, and a class to center elements. The hiding will come in handy for hiding the desktop navigation, and the centering will be useful to center something at mobile. Notice how classes are simply separated by a line break.

.hideme {
  display: none;
  }
.center {
  text-align: center !important;
  }

My final class to set up will show some elements only at mobile, that are otherwise hidden at desktop. Don’t worry too much about what everything means, I’ll explain later.

.showme {
  overflow: visible !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: auto !important;
  font-size: 20px !important;
  }

Now that all of our main classes are set up, it’s time to turn to the HTML.

Building your email with tables

The members of the front end development team shudder every time they hear me say “table”. Tables are a pretty old-school method of HTML design, and it’s rare you’ll find a lot of modern websites using them. However, they are the only option for email development. Most ESPs are also old-school, and haven’t updated their rendering engines in years.

So, I’m going to use a lot of tables to make this email happen.

First, add this code to your <body> tag to make sure no margins or padding appear at any screen size.

<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">

“But wait!” you might be saying, “Why don’t we use a class for that?” Well, remember how I told you that ESPs don’t accept CSS in the header? It means we’re going to have to inline every style that we need in order to target every ESP.

Moving on. Between your body tags, plug in your first table and add this code to it:

<table style="border: none; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 600px; border-collapse: collapse;" class="mobile">

The most important thing to note here is that you put a set width on the table + gave it the mobile class. This means the email will be 600px wide at desktop, and then go to the relative 100% width once you hit a screen that’s 500px or less.

The email should consist of tables using this exact same code, all sitting on top of each other. Then, you place all of your content inside the different tables. The email is made up of multiple rows. Row 1 is the preview text, row 2 is the logo, row 3 is the navigation, and so on. Each row then becomes its own table that can be manipulated and styled individually, without affecting the other rows.

Remember too that some rows will be a table within a table. The navigation for instance, might consist of the main wrapper table (what has been outlined above) with one cell that contains another table, this one with 3-4 cells, each of which contain links that navigate to a different part of your website. I put navigation in my email template and you can see how I made it work.

Using classes to make your email responsive

There are 2 facets to responsive email design: starting with a mobile-friendly layout + knowing what you want to change at mobile. Mobile friendly layouts are usually one-column, with content being centered. Knowing what you want to change means deciding whether or not you want a mobile-only navigation, different social buttons on mobile, and/or different font sizes at mobile.

If you want something to behave differently on mobile, simply create a class under your media query, and append it to the element you want to manipulate. For example, my template includes desktop navigation that I want to hide at mobile. So I simply add this to my outermost navigation table:

class="hideme"

Then on mobile, the email recalls this piece of information (the hideme class I already created):

.hideme {
  display: none;
  }

Therefore hiding the table!

Another trick is to change font sizes. Usually, I make fonts larger at mobile. First, pinpoint what size an element is and what size you want it to be. If your first headline is 20px, and you want it to be 24px at mobile, make a class in the media query:

.twentyfour {
  font-size: 24px !important;
  }

Then add class=”twentyfour” to your <p> or <td> (whatever element contains the headline).

Alternatively, you can use <h3> to accomplish the same feat. In that case, wrap your headline text 0in the <h3> tag (even if it’s inside a cell). Then put this in your media query:

h3 {
  font-size: 24px !important;
  }

No need to add a class, as you’re already targeting that specific element.
One more trick is to show elements only at mobile. This is often useful for showing mobile-only navigation. As you’ll recall, we already created the ‘showme’ class. Here it is:

.showme {
  overflow: visible !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: auto !important;
  font-size: 20px !important;
  }

Then, you need to put together the table structure.  I have all the navigation links inside the cells. The code below will hide all of the mobile navigation at desktop, and show it at mobile. This is the order the elements needs to go in:

<table width="100%" cellspacing="0" cellpadding="0" border="0" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; border-collapse: collapse;">
  <tbody>
  <tr>
  <td><!--[if !mso 9]> <!-->
  <div class="showme" style="mso-hide: all; display: none; overflow: hidden; max-height: 0px; font-size: 0px;">
  <table border="0" cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; border-collapse: collapse;">
  <tbody>
  <tr>
  <td>NAVIGATION 1</td>
  </tr>
  <tr>
  <td>NAVIGATION 2</td>
  </tr>
  <tr>
  <td>NAVIGATION 3</td>
  </tr>
  </tbody>
  </table>
  </div>
  <!-- <![endif]-->
  </td>
  </tr>
  </tbody>
  </table>

Now comes stacking.  Sometimes, a 2-column layout is the way to go. One popular way of stacking items is to put two cells side-by-side, then at mobile use this class to stack them:

.stack {
  display: block;
  }

This is a really simple method, and works perfectly almost everywhere – except Android 4.4 and the Gmail app.

I’m going to show you a way to stack that actually does work everywhere! Here is it, using a table structure + the center class to make the elements center at mobile:

<table cellspacing="0" cellpadding="0" border="0" align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 600px; border-collapse: collapse;" class="mobile">
  <tbody>
  <tr>
  <td><table cellspacing="0" cellpadding="4" border="0" align="left" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 300px; border-collapse: collapse;" class="mobile">
  <tbody>
  <tr>
  <td class="center">LEFT COLUMN</td>
  </tr>
  </tbody>
  </table>
  <!--[if mso]> </td> <td> <![endif]-->
  <td><table cellspacing="0" cellpadding="4" border="0" align="left" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 300px; border-collapse: collapse;" class="mobile">
  <tbody>
  <tr>
  <td class="center">RIGHT COLUMN</td>
  </tr>
  </tbody>
  </table></td>
  </tr>
  </tbody>
  </table>

Notice that I included the mobile class on all of the tables to make them 100% width at mobile, and I added the center class to the left and right columns.

See it all together

It can be hard to imagine how all of these bits and pieces I explained fit into a larger email, so here’s a quick wrap up of all the steps:

Responsive Template Code Screenshot

Making your emails mobile-responsive is important if you have a large mobile audience, and creates a better digital experience. It can be hard to know where to start, so I provided an email template for download that you can have for our own use (you’re welcome)!

Case Study – Colonial Candle April Fool’s Day Campaign

Brands send a flurry of emails leading up to important shopping holidays like Black Friday, Christmas, and New Year’s, but there are so many under-celebrated holidays throughout the year. Sometimes, brands’ offbeat holiday promotions make an even greater impact, because they face far less inbox competition than on larger holidays.

April Fool’s Day is one overlooked holiday that allows brands to step out of their comfort zone + engage customers in ways that would NEVER fly any other day of the year. (Did you see what we did?)

Our client Colonial Candle took a creative approach to their April Fool’s Day promotion. See how it paid off big time.

Colonial CandleWho:

Colonial Candle is a B2B+ B2C retailer of candles + candle accessories.

Challenge:

Colonial Candle wanted to celebrate April Fool’s Day without being gimmicky. They intended to intrigue customers with different creative than their typical email designs and drive them to the website to ultimately convert.

Solution:

Colonial Candle Email > WebsiteColonial Candle created an April Fool’s Day email campaign announcing their new product – the world’s tallest candle.

The email’s subject line: We have breaking news!! + snippet text: Find Out what we’ve done, click “shop now”! convinced customers to open the email. The mobile-friendly email template ensured a seamless experience for users across multiple devices.

When customers landed on the website, the special April Fool’s promotion was revealed – “We’re going wild with our largest sale EVER.”  Customers used the promo code: FOOLEDYA16 to get 55% off all full priced candles, a higher discount than most of their typical promotions.

Results:

Compared with their recent March Madness 40% off promotion, Colonial Candle saw amazing results with the April Fool’s Day campaign:

  • 150% increase in Revenue
  • 123% increase in website sessions

The PPC + Facebook ads run for April Fool’s also saw high returns.

Takeaway:

Customers are on the lookout on April Fool’s Day to see if their favorite brands will try to trick them. Colonial Candle’s playful “largest candle” hoax drove customers to the website, but the fantastic offer convinced them to purchase.

Start thinking about your plan for next year’s April 1 (and other ignored holidays), + you could see “wild” results like Colonial Candle.

April Fool’s Day Winner Announced!

Our April Fool’s Day prank was a great success! Thank you to everyone who checked out our redesigned website and took part in the fun. We not only met our visitor goal, but exceeded it, and we couldn’t have done it without you!

(No idea what we’re talking about? Check out our post from last week.)

We’re happy to announce our April Fool’s winner is…..

Jacolyn Gleason! Jacolyn nominated The Cystic Fibrosis Foundation to receive Whereoware’s $2,000 donation ($5 for every visitor to our prank homepage).

Winner - Jacolyn Gleason“Thank you Whereoware for using April Fool’s Day as a platform to do good, and thank you for allowing me to not only be a participant, but to humbly win such a generous donation for Cystic Fibrosis Foundation.”

“The Cystic Fibrosis Foundation is very dear to my heart. Two of my uncle’s, who I grew up with as my brothers, passed away from the disease.

For my family, part of keeping their memory alive is continuing in the fight to find a cure. Since their passing, now decades ago, there have been significant advancements in treatment, life expectancy, etc. This is due not only to the hope and strength of those suffering and their families who support them, but through the help of donations like this.

I am humbled to accept this donation to the Cystic Fibrosis Foundation. I would like to dedicate Whereoware’s donation to my Uncle Owen and my Uncle Robert, and anyone else who is affected by the condition.”

Thank you Jacolyn for playing along with our April Fool’s Day prank, and we are honored to make this donation to the Cystic Fibrosis Foundation.