Community Spotlight: Justin Khoo

[ 0 By

The Community Spotlight is a blog series highlighting some of the amazing members of the Litmus Community.

This month, we’re chatting with Justin Khoo, an email coder, writer, and elusive (email) bug hunter. Be sure to follow him on Twitter and check out his website.

Who are you and what do you do?

I am Justin Khoo and I have an email design blog FreshInbox that covers the latest developments in interactive email. I also run Campaign Workhub—a service that helps streamline the email campaign review and approval process.

justin_headshot

When did you first get involved with email marketing and design?

I first got involved with email design as a developer at Everyone.net, which operated a webmail service. Although my primary duties involved coding the system, I was also tasked with helping out with the email newsletters since I understood the quirks of “email HTML.” That was pre-mobile and media queries so email wasn’t as challenging or exciting as it is now.

About two and a half years ago I discovered that interactivity in email was possible after noticing that LinkedIn’s Intro email app was inserting interactive widgets using CSS into emails. That was when I got hooked on trying out various interactive experiments to see what’s possible in email clients.

What are some of your favorite tools for building, managing, and sending email?

The tool I’m most excited about is Litmus Builder and its near instantaneous snapshots of the email clients. This is very helpful when testing experimental emails as I’m able to quickly get a sense on whether a code snippet would render badly in any email client.

As for creating and sending emails, this might come across as a surprise but I’m pretty old school. I build each email by hand with Sublime and some copious copy and pasting.

You’ve been working with the Outlook team to help improve their products. How’s that been going and do you think we’ll see more interaction between email app vendors and email marketers?

Julia Foran from Microsoft reached out to me after I posted an article lamenting Outlook’s poor HTML and CSS support. She wanted to gather feedback from the email community on the sorts of issues designers are facing with Outlook. There was a lot of momentum early on as the community got together and provided a lot of feedback and email examples. Things have been quiet lately which is a little worrisome—although I’ve been told Microsoft is still working on improving Outlook’s CSS support.

It is unfortunate that in order to get the attention of the email client vendors, we often have to resort to getting it out through public forums like conferences, through blog posts, or social media. The developers building the email clients frequently have no idea how their changes affect email rendering. But once they understand that having better rendering improves the experience for their users as well, I’ve found they are generally sympathetic.

Yahoo! Mail had a particularly nasty media query bug for years, but once we managed to get their attention about how it affects emails, the issue was fixed in less than a month.

Although Gmail is getting a bad rap for being a particularly gnarly client to work with due to its lack of support for embedded CSS—among other issues—I think the outreach efforts are beginning to show some promise, as they’ve acknowledged that responsive email support is an issue that they’re looking to address. I’m optimistic that Gmail will support embedded styles and media queries sometime in 2016.

That said, I’m not as hopeful that there will be any sort of formal ongoing interaction between them and email marketers due to the email client vendors still seeing email marketers as being “on the other side.”

Do you think there’s anything the email community can do to help change email vendors’ minds? Or are we stuck with calling them out in public forums and hoping for the best?

This is a question I think about often but don’t have good answers for. The key is to make the email vendors aware that email is no longer stuck in the 90’s and that, just like the web, email needs to evolve to make the content responsive to the screen it is rendered on—and that requires modern HTML/CSS support.

Email vendors occasionally introduce programs such as Gmail’s Schema.org that require the participation of senders. Joining these programs is an avenue for those of us who are passionate about changing the status quo as it is an opportunity to interact with the developers working on the email clients.

I also feel a wider adoption of interactive email will help. One of the reasons I’m passionate about interactive email is that it has the potential to get the attention of the email vendors and make them realize that they too could leverage better HTML/CSS support for their email enhancements. We’ve seen the vendors attempt proprietary interactive email solutions such as Hotmail’s Active Views, Gmail’s carousels, and Yahoo and AOL’s CertifiedCommerce (through their partnership with Goodmail). Those attempts failed because they were technically complex and required programmer resources which most email marketers just didn’t have. If the email vendors realized the potential for interactivity using just HTML/CSS, it may encourage them to embrace better HTML/CSS support.

You’re known for finding and fixing some obscure email bugs. What’s your process for testing and finding workarounds?

I like to tinker with email but I feel strongly that the hacks should be usable in real campaigns, hence the need to test them on all the major clients. I have written some templates that allow me to see if something has unexpectedly broken in a client. I’d love to release these templates but unfortunately they are pretty obscure at the moment. However, I publish the results of the tests on the FreshInbox blog.

Part of Justin's  Kinetic Email CSS Support resource.
Part of Justin’s Kinetic Email CSS Support resource.

One of my more popular workarounds was the method to prevent the Gmail app on iOS from drastically increasing the font-size of an email. It involves adding a bunch of non-wrapping dashes or non-breaking spaces ( ) into the email. I noticed that Gmail wasn’t applying the changes to some emails, so after a few hours of analyzing those emails, I discovered that Gmail would revert the change if it detects that the change causes emails to become too wide. I crafted a simple fix that would make that happen in any email.

Two of my favorite debugging tools are the Chrome browser’s element inspector and Charles, which is a HTTP proxy sniffer. A free alternative to Charles is Fiddler.

What’s your favorite email hack?

I’m an email hack aficionado, so there are just so many cool hacks to like. I’ll name a practical one and a cool one.

My favorite practical email hack is the workhorse for hybrid or spongy design—the Outlook ghost table hack that allows the use of min-width and max-width in email designs.

My other favorite hack is what can be referred to as the nested checkbox hack. Mark Robbins first got me excited about the checkbox hack—using labels to trigger invisible checkboxes to toggle states in an interactive email. However, webmail clients don’t support the “for” attribute in labels so in order to toggle the checkbox states, the checkboxes need to be nested within the labels. I’ve found that you can do some pretty crazy stuff by nesting multiple levels of checkboxes and labels.

What do you see as the biggest challenge in email today?

Definitely fragmentation. Because there’s no established CSS support guidelines in email, many new email clients introduce their own quirks. What is worse is that even established email clients from Yahoo!, Google, and Microsoft introduce new breaking quirks every couple of months that designers have to scramble to find a fix for. Thank goodness for the Litmus Community.

What do you think email will look like in five years?

Within five years Gmail and Outlook will have addressed their deficiency in HTML and CSS support. Hopefully, much sooner than that. I believe email client vendors will have come to some consensus on CSS support and email design will lose its hackish reputation.

I also think we’ll see email client vendors layer smart email features based on aspects of Schema.org. Gmail introduced Schema.org as an open way to add more intelligence in email by embedding meta-data markup in email. Google has used it to power enhancements in Gmail as well as Inbox. AOL’s recently relaunched Alto Mail uses Schema for their cards feature. It’s a pity Grid View, one of the more exciting Schema.org developments, didn’t pan out, though.

And… more kinetic emails! (Sorry Kevin).

Any advice for people just getting into email marketing and design?

There are many resources available for someone new to email design. My first piece of advice would be to prepare yourself for a very different world if you’re coming from the Web, as you’ve just taken the red pill (The Matrix reference). Take your time to familiarize with the major email clients and their various quirks. Then start your learning journey with one of the popular templates. Start from something simple like Lee Munroe’s Really Simple Responsive Email Template and graduate to more sophisticated templates like Nicole Merlin’s media query-less responsive template.

Taking a look under the hood of interesting emails you come across is a good way to learn as well. For this, I recommend Litmus Scope.

Join the Community

Not a Litmus Community member? Join the best minds in the email industry as they discuss the latest email news, cutting-edge techniques, and solutions to even the trickiest email design problems.

Join the Community →