Achieving Mobile Cohesion Across Email and Websites

[ 0 By

A subscriber’s journey doesn’t stop at your email. In fact, your email is just the starting point! After convincing users to move forward with the call-to-action, they typically land on, well, a landing page of some type. If that landing page is difficult to read or interact with, the chances of your subscribers abandoning ship are pretty high. As a result, it’s important to make sure your emails and landing pages (or web site) are optimized for viewing in all environments.

While analyzing mobile traffic as part of 99u.com‘s website redesign, Behance noticed that about half of their email subscribers were opening their newsletter on mobile devices. They were already working on a responsive website, but realized that they needed to redesign their newsletter to match their new branding, too. Their goal was to achieve mobile cohesion between their newsletters and website. Let’s take a look at the journey Behance’s subscribers are now taking—from mobile newsletter to mobile website!

A LOOK AT THE REDESIGN

99u’s newsletter showcases articles about real-world best practices for making ideas happen. And, through their newsletter’s design, they are showing a real-world example of how to make an excellent responsive email!

behance

Let me state the obvious—the layout and design of this email on the desktop is fabulous. It’s sleek, streamlined and, while it has a lot of content, the amount of white space in the email prevents subscribers from feeling overwhelmed. In addition, each section of the email is clearly distinguished by different layouts, visual elements, fonts and borders. They manage to put a lot of content in the email without making it too busy or difficult to identify the calls-to-action.

The responsive elements are no less impressive. Through the use of media queries, Behance transforms this email into a one-column design when viewed on devices that support media queries with a screen size of 599px or less. While the desktop view of this email is extremely sleek and attractive, it would be difficult to read and interact with on smaller screens due to the amount of content and small text in some areas.

By modifying the layout to a single-column layout in the mobile view, the email is sleek and extremely easy to interact with (although a bit long—I had to scroll for a while until I got to the end!). The fonts are large, the imagery is clear, and all of the CTAs are touch-friendly—it doesn’t get much better than that!

COMPLETING THE MOBILE EXPERIENCE

behance-landing-mobile-sm
Mobile-optimized landing page

Since Behance accounts for the entire user experience, the landing pages are mobile-friendly, too! For example, when I tapped to click into the first article in the newsletter, “The Smart Creative’s Guide to Dressing for Work,” I was brought to the following page.

For starters, the page flows very nicely from the email with the same imagery and similar fonts. And, like the email, the landing page is very easy to read and interact with on the small screen of my mobile device.

Behance accounts for every step along their subscriber’s journey and it definitely pays off! Not once during my interaction with the email and the landing page was I turned off or dissuaded from continuing my “journey.” Nice work!

THE RESULTS

Behance’s results have been nothing short of amazing! The day they sent their first responsive newsletter ended up being their highest traffic day ever—and resulted in their biggest week ever! In addition, their spike in mobile traffic after sending the newsletter exceeded their total traffic for the same day a week before—wow! While several elements contributed to this, Eric Snowden, Behance’s Lead Product Designer said that the newsletter was a major component. They are currently in the process of making several other emails responsive and hope to have similar positive effects on their traffic!