Inspiration: Help Scout Shines with Mobile-Friendly Design

[ 0 By

When Help Scout’s email announcing the Help Scout API arrived in my iPhone’s inbox, I was extremely impressed. It looked fabulous on my smartphone!

Help Scout iPhone

This email is extremely mobile-friendly; in fact, when I went through the “Anatomy of the Perfect Mobile Email” checklist, Help Scout’s email, essentially, had it all! Here are some aspects that make it so mobile-friendly:

  1. Enlarged fonts – The headline, “The Official Help Scout API,” has a font size of 28px and the four subheaders have a font size of 22px, which makes them all easy to read, even on the small screen of a mobile device.  However, the text under the four subheaders is only 13px, which is somewhat illegible. I recommend that the body copy should be a minimum of 14px.
  2. Call to action – The main call to action, “Visit the Developer Site,” is extremely prominent. It is at the top of the email, so it is one of the first things that subscribers will see. In addition, the button is touch-friendly so readers that are interested can simply touch the button and complete the call to action.
  3. Layout – The one column layout of this email accommodates the smaller screens in mobile devices and can help increase legibility.
  4. Using images – While images are not blocked by default in iOS, they are blocked by many desktop and mobile email clients. Help Scout uses an appropriate balance of images and HTML text, which enables this email to look great in a mobile device – whether images are disabled or not.

Are there any aspects of the email that aren’t mobile-friendly? Like I mentioned before, the text in the body of the email under the subheaders is on the smaller side and somewhat illegible. In addition, since many mobile operating systems don’t scale your emails to fit your device, you may want to consider designing a mobile-friendly email between 320-550px wide. This email is 600px wide, which is a little too large and may cause some subscribers to have to resize it or scroll left and right to view the whole email. Other parts of the email that aren’t very mobile-friendly are the links to the “Web Version,” “Forward to a Friend”, “Unsubscribe,” and social media links. These items look extremely tiny on a mobile-device and are not touch-friendly.

So it looks great in mobile devices, but how does it look in desktop email clients? It looks, well, the same (just bigger, obviously)!

Help Scout Images On

What I love about this email is it’s hierarchy and how streamlined it is. The main call to action is at the top and has the largest text and image in the email. It also has a button, which makes it stand out among the other calls to action. The other four calls to action are stacked on top of each other and very clear and easy to read. The email is simple, streamlined and draws readers’ eyes down the email so that they read the entire thing.

Another major positive about this email is how great it looks with the images disabled.

Help Scout images off

The hierarchy and organization of the email with the images off is still very effective. Subscribers can clearly distinguish the five calls to action and which one is most prominent in the email. Another great aspect of the email when images are disabled is Help Scout’s use of ALT text. Even with the images off, the ALT text enables subscribers to view a summary of what the image is. However, Help Scout did not use ALT text for the social sharing buttons, so a subscriber would not be able to identify what those images are if images are disabled.

Are there any aspects of the email that could use some room for improvement? Besides the ones that I’ve mentioned earlier in the post, there aren’t many more – the email is great! However, when going through the email previews test results in Litmus, I noticed that the email rendered very poorly in the early versions of Lotus Notes.

Help Scout Lotus Notes

As you can see, there are red boxes throughout the entire email where some of the images are supposed to be. The Help Scout logo at the top, the call to action button, the spacing images between the secondary calls to action, and the social sharing buttons all have a red box around them and the images are disabled. Why are these images disabled but some of the others aren’t? The images that are disabled are PNGs, while the images that you can still see are JPGs.  Early versions of Lotus Notes do not support PNGs, so that is why they are disabled.

Another area of the email that could use some improvements is the preheader since, well, there isn’t one! In her post, “Get Your Emails Opened: First Impressions Make an Impact,” Justine discusses the importance of preheaders, since they are the third thing your subscribers will see. Since some email clients (Gmail, Outlook, iPhone, Windows Mobile 7) will display a portion of your preheader text as a “preview” of what’s inside the email, it is important to include one in your email. Since there is no preheader, those email clients will just show the first few lines of text in the email.

Help Scout Preview Pane

The screenshot above is the email preview in Gmail (Chrome). Since it just pulled the first few lines of text in the email, the preview is: “Help Scout Logo The Official Help Sco.” How confusing is that?! A preheader at the top of the email would have solved this problem.

What are your thoughts on this email? Are you as impressed by it as I am?