Taking Mobile Optimization to the Next Level: Hover Effects + Layout Changes

[ 0 By

The Learning People is a Brighton, UK-based company offering eLearning courses in IT and Project Management. The company converted their emails to responsive designs shortly after launching a new responsive website, and have seen some fantastic results!

Why take the responsive route?

Mark Robbins, Marketing Executive at The Learning People, explained,

Using mobile optimized emails is a no-brainer for me. More and more people are opening emails on their mobile devices and the click-through is significantly higher with responsive design.

How about the results?

Before they moved to responsive email, about 30% of clicks were coming from mobile. These mobile clicks were rising steadily and shot up after the redesign—now they’re seeing over 40% of clicks coming from mobile devices, and some campaigns have even seen over 50%! Better yet, conversion rates on these mobile-optimized emails has increased 33.35% since January—wow!

Responsive Email in Action

The strategy behind this email campaign was driven by the redesign of the landing page. Through the use of a 4-step media query—utilizing breakpoints at 600px, 500px, 400px and 320px—this email imitates a true responsive design: fluidly resizing and scaling beautifully.

lp-html

Desktop version

lp-mobile

Mobile version

Through the use of media queries, The Learning Company is able to scale down the email to be easily readable on smartphones and tablets. Through careful planning and responsive strategy they were able to:

  • Remove imagery in the header, so that the text is able to scale the entire width of the email
  • Stack columns on top of each other to better accommodate the small screen of a mobile device
  • Remove text in the footer

Coaxing a horizontal list (from the desktop view) into a vertical list (to the mobile view) was a big challenge for The Learning People. Design-wise, the sleek presentation of the horizontal list was appealing. However, on a mobile device, a vertical list made more sense due to the limitations of a small screen. This was an easy fix for their website, but due to poor support for floats in email clients, it became a bit of a problem for their new emails.

Mark explained that moving three columns into one for the mobile view is a trick he frequently uses. However, to get the numbers to appear beside the text (rather than above it) he had to use two sets of images for the numbers and add an extra zero-width column to hide the images when not in use (and ensure compatibility in less-supportive clients like Gmail). He utilized a 3-stage method to hide the images intended for the mobile version, only showing them on smaller screen sizes:

  1. Setting the image width and height to “0”
  2. Adding a special class set to “display:none;” in the CSS
  3. Including an Outlook-specific conditional comment set to “display:none;”

The large numbers are set to display on desktop screens; while the small numbers remain hidden:

.lg-numbers {
 display:block; 
 }
 .sm-numbers {
 display:none;

But when viewed on smaller screens; a media query swaps them out, hiding the large numbers and revealing the small numbers using “display: block;”

@media screen and (max-width: 500px) {
 [class="lg-numbers"] {
 display:none;!important;
 }
 [class="sm-numbers"] {
 display:block;!important; 
 margin:0px 5px;!important;
 width:70%;
 height:auto;
 }

The resulting effect is pretty cool:

lp-horizontal

Desktop version

lp-vertical

Mobile version

Extra Design Tricks

Mark explained that their primary target market is men aged 18-34, and research has showed that their audience likes contemporary design, clever animation and interactive elements. After playing around with a few ideas, they decided to add CSS animation to the hover function of the buttons on the website, as well as a fixed position background to the testimonials section.

Mark then set out to find a way to emulate these techniques in email.

“The fixed-position-background just worked. It’s not using anything too clever in the CSS so I was optimistic about this. While it’s not compatible with all email clients, where it works, it looks great, and it’s not something I’ve seen done on an email campaign before.”

Mark had previously played around with hover functionality in email campaigns before, giving text links a hover color by adding a hover function in the style block at the top of the email:

.cta:hover {
background:#ff6e00;
border: 3px solid #ff6e00;
}

They saw a slight increase in click-throughs on those campaigns, but haven’t done further testing on it yet.

For this particular campaign, Mark wanted to emulate the CSS animation from the landing page: the button gets slightly bigger and the round corners turn square in the hover state. In order to achieve this, he used a transparent PNG, added a background color to square off the corners, and a border to increase the size.

Hover
NoHover

Hover

No hover

Here it is in action:

There are some amazing and unique design tricks in play here! And believe it or not, Mark has only been at The Learning People for a little over a year, and had never coded an email—nor heard about responsive design—before starting there! So, while it definitely takes some extra effort to “go responsive” and use unique design tactics, it’s definitely plausible!

HAVE AN EMAIL THAT YOU THINK SHOULD BE FEATURED?

Have you produced or received an email that you think is inspiration-worthy? Send it to us at inspiration@litmus.com — we’d love to take a look!