In the 48th episode of The Email Design Podcast, hosts Kevin Mandeville and Jason Rodriguez sit down with email developer Kristian Robinson to discuss his email development workflow and his latest adventures into email gamification with his Sonic the Hedgehog emails. Be sure to follow along and join in the discussion on Twitter using #EmailDesignPodcast.
Watch the full video above or listen to the audio-only version below.
In this episode:
- (0:53) How did you start learning code and get into email? Kristian actually started learning HTML and CSS with email for an interview thanks to his friend Matt Slaymaker about 4 years ago. He started with the basics of editing content and learned more along the way, including reading Jason’s book Modern HTML Email and experimenting in his downtime.
- (4:45) What does your role as an email developer at Two consist of? Kristian started working directly with clients to build emails. Now, he leads a team of three email developers and focuses more on improving his team’s process, doing more experimental things in email, and practicing more for client pitches.
- (7:15) What are some of the challenges you’ve faced in educating clients about email? Unlike past roles where he wasn’t allowed to communicate with clients, Kristian does so now at Two and enjoys being able to display his passion for email. He tries to keep the focus on the experience for users and framing progressive enhancement in a positive light—showing the possibilities of email, and not the limitations.
- (9:30) Do you have different sets of packages for different implementations? Two focuses on two approaches for email builds: Traditional hybrid and a custom semi-hybrid (which relies more on media queries).
- (11:20) What tools do you use for email design and development? Kristian uses a combination of Dreamweaver, Sublime Text, and Litmus Builder for editors, depending on his use case. His team also is fragmented on which editors they use – mostly a mix of Dreamweaver and Sublime Text. They don’t have a solid process in place yet for version control down and are still using a file system.
- (14:00) How do you test your emails? Two uses Litmus Builder, in addition to having a local device lab and local webmail accounts.
- (15:40) Has your process for implementing background images changed at all since the Gmail rendering update? Despite the Gmail update, Kristian believes you still need to view background images as a progressive enhancement and not much has fundamentally changed because of that. But he does believe this will lead to designers using more full width and full bleed background images.
- (21:20) Where did you get your inspiration for your Sonic the Hedgehog email experiments, and what was your process behind it? The inspiration came after his Interactive Christmas Tree email, which made him think more about email gamification. He wanted to mimic an advertisement and liked the simplicity of the Sonic game, which was also timeless in his view. There was also an abundance of pre-existing assets of Sonic for him to use.
- (23:55) How did you use animated image sprites for these Sonic emails? All of the image sprites are background images – the actual background of the email and Sonic himself. The sprites are animated using the CSS steps function. There’s also a <div> around Sonic which animates and controls his position. The animation for Sonic is turned on using the checkbox hack for the “Run” and “Jump” buttons.
- (27:30) Is there anything you want to improve in the implementation? Kristian wants to improve the ending and enhance some of the CSS animation which has some limitations around hiding and showing content. Kevin would love to see this be a full width experience for desktop and even use keyboard shortcuts for actions.
- (30:21) What role do you think interactivity is going to play in email’s future? Kristian believes it’s going to be a major factor in the future and that we’re only in its infancy stage just experimenting with how to implement it. He believes there is massive potential for email to expand its engagement.
- (31:48) Apart from interactivity, what do you want to see next in email? Kristian is keen to see more full width emails and increased focus on user experience. Kristian’s greatest fear is email design becoming too cookie cutter and modularized.
- (33:38) How did you implement your second Sonic the Hedgehog ring hunt email? Just like the first Sonic email, all of the elements are background image sprites. All of the rings and scoreboard values are radio buttons. The scoreboard values are checked by default and they have the same id as the rings, so when the rings are checked the scoreboard, which is absolutely positioned with an overflow of hidden, gets pushed down to the next score which is checked.
Follow the Email Design Podcast
- Follow on SoundCloud
- Subscribe on iTunes
- Subscribe on YouTube
GET THE LATEST DELIVERED STRAIGHT TO YOUR INBOX
Want to get more tips and advice like this? Subscribe to our weekly newsletter and get the latest content for email design pros delivered straight to your inbox. Every week.