by
Adam Sutton, Senior Reporter
CHALLENGE
The emails at CareerBuilder, the largest employment site in the U.S., are never "finished." They are tested constantly. Every 12 months or so, the marketing team scraps them and starts over.
"Every year, we kind of throw out everything and do a new template test," said Scott Burdsall, Senior Email Marketing Manager, CareerBuilder.
When it came time to redesign the site's "relationship emails," the team noticed a surprising trend in the program's readership. The percentage of people who opened the emails on a mobile device was almost twice the company's average.
"We were a little bit ahead of the curve and we knew we had to address this shift in where people were reading our emails," Burdsall said.
CAMPAIGN
CareerBuilder had no way of knowing whether a given subscriber would open an email on a desktop, smartphone or tablet. The team needed to find a design that accommodated an array of devices.
Step #1. Pick a responsive style
Responsive emails automatically adjust to a reader's device or software when opened. For example, a person can open an email on a smartphone and see one layout, then open the email later on a desktop and see another layout.
The goal is to deliver a better experience and hopefully better clickthrough rates.
Different types of responsive
A way to make an email responsive is to have it automatically adjust its width to match the reader's screen, Burdsall said.
"It doesn't give you as much control over the creative elements in the body, but it’s still responsive," he said.
The team wanted to give mobile readers a better experience. They chose to design the email to adjust its entire layout to match a reader's device. This was done with the "@media" rule in the cascading style sheets language, or CSS (see the Related Resources section below).
Step #2. Design the email
Since CareerBuilder's
relationship emails had a large mobile readership, Burdsall envisioned subscribers reading them on-the-go.
"I had in my head someone on their way to work checking the email on a bus or a train and only having one hand available to look at it," he said.
This in mind, the team incorporated the following elements into the new template:
- Easy to scroll — Zooming and scrolling in all directions is not easy with one hand. To simplify navigation, the email used a one-column layout when opened on a smartphone or tablet and a two-column layout when opened on a desktop.
- Easy to click — The calls-to-action in the new design were larger and brighter, Burdsall said. This made them more "tapable," i.e., they were easier to tap with a thumb as opposed to a mouse. The team also cut the number of calls-to-action.
"We cut out a lot in order to really make room for the calls-to-action that we wanted to highlight," Burdsall said.
- New preheader — The preheader of the older email had a view-in-browser link and a small batch of HTML text, which "wasn't the most mobile-inbox-friendly," Burdsall said.
The updated preheader complemented the email's subject line. For example, a subject line of "We have new jobs in Chicago" might have a preheader that states "come search for new jobs," Burdsall said.
Step #3. Run an A/B test
The new design applied to what Burdsall calls the company's "relationship marketing emails." These messages are sent to registered users who recently visited the site or engaged an email. The buttons and links highlight jobs and articles, some of which are dynamically personalized for each recipient.
The audience is segmented into five groups ranging from the newest members to the least-engaged recipients. To test the new design, the team ran a 50/50 split A/B test across all the segments for three weeks.
"I really wanted to see the value of having this updated design and also this responsive element," Burdsall said.
RESULTS
CareerBuilder's new responsive email had great results with each of the five segments. The improvements ranged from:
- 21% to 24% higher clickthrough rates
- 15% to 17% higher open rates
But, the team had only started.
"That [design] then became our control for that particular program, but it also allowed us to open the door to adding a responsive element to existing templates for other programs," Burdsall said.
"It allowed me to go to other groups and say, 'Hey, we saw this kind of increase as a result of incorporating this new design tactic in our emails, and we recommend you guys do the same.'"
The team tested the responsive layout in its
job recommendation email without changing the email's preheader.
The results:
- 7.5% higher clickthrough rate overall
- 15.2% higher clickthrough rate for mobile readers
The improved open rates in the first test also persuaded Burdsall to test more preheaders.
"That was a big takeaway for us, incorporating that into other programs, but that’s a really easy thing to do that doesn't require a developer or coder like the responsive design element," he said.
Creative Samples
- Relationship email — old template
- Relationship email — new template, desktop
- Relationship email — new template, mobile
- Job recommendation email
Source
CareerBuilderRelated Resources
Responsive Email Design with CSSEmail Marketing: 58% of marketers see mobile smartphones and tablets most impacting emailMobile Marketing: 31% of marketers don’t know their mobile email open rateEmail Marketing: Simple design change to incentive raises clickthrough rate from the dead by 48%Email Design How-to: 5 insights to improve open and clickthrough rates
