Is Your Email Still Responsive If No One Can See It? (The Importance of Email Rendering Testing)

[ 1 By

We are (obviously) big advocates of testing your emails before the final send. Proofreading, checking links, and verifying how your email renders across all of the major email clients are just three crucial steps in the QA process.

Not only can an error-ridden email result in unsubscribes, but it can affect your reputation as well. So, while you may have an excellent, well-thought out strategy, if it isn’t executed and tested properly, all of your hard work may be overlooked.

When we recently received an email from Smashing Magazine, we were really impressed with its fun imagery and design.

smashing-full

A peek at the HTML revealed a media query, so I eagerly opened the email on my iPhone to view the responsive version. However, I was surprised by what I saw. Let’s take a closer look!

GETTING THE OPEN

Optimizing your from name, from address, subject line and preheader are crucial — a subscriber’s experience with your email starts long before they open your email.

Let’s take a look at these aspects in Smashing Magazine’s email:

  • From name: Smashing Magazine
  • Reply-to address: marketing@smashingmagazine.com
  • Subject line: Smashing News: Latest eBook Releases and Upcoming Smashing Workshops
  • Preheader: Sorry, but why am I receiving this? If this email is not displayed properly, view the online version.

While the preheader could use some work (we’ll get to this later), the from name, from address and subject line are definitely a success in my book! The from name is simple — Smashing Magazine. Since it’s likely the first thing that subscribers will see, the simple, straightforward from name is recognizable and trustworthy. Smashing Magazine also uses a friendly reply address, which increases the trust factor. While “marketing” seems a bit promotional, it’s nice that it isn’t a “no-reply” address. The subject line of this email is straightforward and fun. It simply states what it inside the email — eBook releases and upcoming workshops — and uses “smashing” language which adds a little fun to it.

While I like the permission reminder at the top of the email (it links to an explanation of the emails they send), I wish it was located after a more informative preheader. Since some email clients (Gmail, Outlook, iPhone, Windows Mobile 7) will display the first few lines of text in your email as “preview” or “snippet” text, this portion of the email can be optimized to follow up on the subject line or display other useful information.

smashing-preheader

ATTRACTIVE IMAGERY & LAYOUT

What immediately attracted me to this email was the playful imagery and S-curve design. The graphics are bright and inviting, yet not obnoxious or obtrusive. While the top of the email is filled with colorful images, as you scroll down the email they become a bit more muted which prevents it from being overwhelming. In addition, the little “book people” are adorable and I love the S-shaped bookcase — nice branding for Smashing Magazine!

I’m also a big fan of the layout: by alternating text and image between the left and right sides of the email, Smashing Magazine follows the natural reading pattern of most users and encourages scrolling. The hierarchy of the email is also clearly defined by sub-headers and visual differentiation between the subscription sign up, latest additions, and upcoming workshops sections. However, the workshop headlines and “read more” CTAs at the bottom of the email are the same font, text size, and link style — a better defined hierarchy between these elements may have helped differentiate the content and get more clicks.

smashing-hierarchy

RESPONSIVE EMAIL DESIGN

Now it’s time to get to the responsive design of this email!

In the email on the left, you can definitely see the responsive elements — the “S” bookcase is removed, the library books are smaller, text has scaled, columns have scaled and more — yet, something’s not quite right… the email is rendering very strangely. It’s obvious that a lot of time was spent on the responsive elements of this email design but, unfortunately, two full-width images in the email don’t scale appropriately. When these two images are removed, the email renders as intended (and looks great!).

smashing-compare

Left: The original responsive email with images at desktop scale.
Right: The altered email with responsive design restored

The designers over at Smashing Magazine deserve a lot of credit for incorporating several elements in their responsive email design. The bookcase near the top of the email is hidden, enabling the text to spread across the screen in a more readable format. In addition images and text scale in the “latest additions” section. Another impressive aspect of the design is how they deal with a three column layout in the “workshops” section. You really have two options here: either shift the three columns into rows (which also alters the content hierarchy), or scale the columns to fit a smaller screen. Smashing Magazine chose the latter: scaling the columns to fit on a narrow screen. While this approach preserves the content hierarchy, it does break the text into 1-2 words per line, which can be a little awkward to read.

smashing-long-responsive

Original desktop version and altered responsive/mobile version

ADDITIONAL FEEDBACK

Remove Blue Links on iPhone and iPad
Phone numbers, addresses, and dates frequently turn blue and underlined on iOS devices. These links can be handy: they help users by automatically linking to other iOS applications to assist with making a call, launching a map, or creating a calendar event. They can also detract from a carefully planned color scheme or branding palette. Luckily, restyling or removing the links is easy with a bit of embedded CSS, allowing users to save the webinar dates while staying in sync with the other link colors in the email.

Use of Embedded CSS
Speaking of embedded CSS, its use in email can be tricky. Since Gmail strips out the <head> tag in emails, any <style> blocks will come right along with it. So while it’s perfectly okay to use embedded CSS to fix an issue on iPhone and iPad (these devices leave the styles intact), all the styles will be removed in Gmail. In this case, I noticed that some of the text styles displayed in a different font and color in Gmail. It’s always best to move your CSS inline for consistent results across email clients.

Images-Off Optimization
Due to heavy use of live text, the email remains completely legible and hierarchy is maintained in an images-off environment. This is a major positive — about half of email clients block images by default (and many subscribers don’t change these settings!).

smashing-off

Further images-off optimization efforts may have included ALT text. Styled ALT text in the banner at the top of the email and for the CTA button would have been a great addition. To take it even a step further — a bulletproof button would have been amazing!

THE IMPORTANCE OF TESTING

While it’s hard to say exactly where and why the testing process went wrong (we’d love to hear more details from Smashing Magazine!), this carefully crafted message didn’t render properly. It’s especially unfortunate that the images that were causing the issue weren’t crucial to the design or message. The content was just as valuable (and easier to read!) when the images were removed and the responsive design was restored. The moral of the story? Test, testTEST!

All the hard work and planning that Smashing Magazine invested into their responsive email design was almost overlooked since it didn’t render properly. Using a preview tool to see how your email renders in different email programs and mobile devices will ensure that investments made into mobile email strategy are flawlessly executed and visible to users.

  • http://www.litmus.com Justine, Litmus

    The image of the two iPhones side by side illustrates the issue: in the email that was sent out, two images weren’t properly resized in the media query, leading to a strange result on the phone. It was a great email, but had a problem with how the mobile version displayed.

    When we say “we don’t know what went wrong,” we meant that we’re not sure why Smashing Magazine didn’t catch the error before sending out the email. Maybe they didn’t test, maybe a step got missed, maybe there was an issue with a template.

    Hope that helps clarify! Let us know if you have any additional questions.