Email Design Podcast #60: How CodePen Approaches Email Design and Marketing with Chris Coyier

In the 60th episode of The Email Design Podcast, hosts Kevin Mandeville and Jason Rodriguez sit down with CSS guru Chris Coyier to discuss how CodePen approaches email design and marketing and thoughts about HTML email development from web designers’ perspectives. 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.

Download the MP3

In this episode:

• (1:44) How did you learn HTML and CSS? Chris actually took a programming class in high school and went on to study it in college. He ultimately didn’t like back-end programming and switched to a major in art. He ended up getting into HTML and CSS from building WordPress sites, including his famous CSS Tricks site.
• (8:05) Were there any early resources you used to learn? Chris is a big fan of Dan Cederholm and his book Bulletproof Web Design.
• (9:27) What was your core inspiration for creating CSS Tricks and what was your vision for it? Chris says the original idea was to spin up a whole bunch of WordPress sites with content over popular technology, such as InDesign Help to generate traffic to make money off of them. CSS Tricks wasn’t actually popular initially, but it was the one Chris really enjoyed and wanted to keep as a personal journal of his learnings from building all of these different sites.
• (11:48) What is CodePen? CodePen is a “playground for the front-end web.” It works by allowing you to create “pens,” which are sets of HTML, CSS, and JavaScript, and is a social network for developers as well, akin to a Dribbble for code or even a Litmus Builder for front-end development. They more recently launched Projects, which allow you to work in a local front-end development environment.
• (14:30) What is the vision of CodePen? It’s a balancing act. CodePen wants to grow as a business, but also needs to keep its community strong, happy, and healthy. Especially as a small team of eight with limited resources, they really need to focus in on core priorities.
• (17:15) What is email marketing like at CodePen? What types of emails do you send? A recent endeavor in email has been the CodePen Spark, a weekly collection of the coolest recent Pens. CodePen actually built a custom CMS to help manage and build the email, which also publishes to the CodePen website for archives. The email is built off of Rails templates which gets CSS inlined and compiled from the CMS data. Chris then inputs the email into Litmus to test and makes any necessary tweaking. CodePen uses Sparkpost to send their emails. Recent projects Chris hopes to do for email at CodePen is merging their email preferences inside the CodePen web app and building out onboarding and triggered emails based on user activity.
• (23:53) How have you weighed out building custom solutions versus buying into other email platforms and services? Chris feels that most of the email service providers are too expensive to justify. CodePen has the unique challenge of having a small team but a large 1M+ user base where costs are really high. So for CodePen at the moment, it makes more sense to invest their time into building out their tools.
• (28:31) How do you plan for emails you have to send? CodePen uses Google Docs to plan email marketing activities.
• (32:47) Do you know what your subscriber audience makeup is? CodePen doesn’t pay much attention to their subscriber audience at the moment and simply focuses on getting the email to render in all popular email clients. They approach their email development using a mobile-first approach.
• (35:00) What are your core pain points with email design and development? How could it be easier for you? Chris struggles with figuring out what is the right layer of abstraction for HTML emails. He doesn’t want to be manually building HTML emails, but doesn’t want to become so abstracted that it becomes too removed and hard to pinpoint or edit errors when troubleshooting. He believes the single source of truth should be Litmus in the testing process.
• (36:59) How do you try to solve rendering issues you encounter? Chris recently ran into an Outlook bug with ~100px random block of space. Chris didn’t see any bugs in the code itself and didn’t know how to research for that particular kind of bug online – he just used Litmus to try a bunch of things for troubleshooting until it rendered properly.
• (39:10) What’s the weirdest bug you’ve encountered? Chris has had trouble with using retina images in email, mostly because of Outlook behavior and getting them to work properly for responsive email.
• (41:13) How do you gauge the success of CodePen emails? Given the nature of its small team and not having a dedicated email marketing or analytics person on the team, they don’t look at the email analytics of every single email. They approach it from more of a qualitative view from feedback of users.
• (45:00) Why does the web design world have a negative view of HTML email? Chris says it’s no mystery as to why the web hates email: Because it’s not modern and they can’t code the way they want to. He also points to the fact that even in web design, people don’t enjoy cross-browser testing. Render testing isn’t an enjoyable part of the job for most and that’s magnified when it comes to email.
• (48:54) How can we educate the web world more about email? Chris believes it would be beneficial to drive home how much email has evolved in rendering support and how simple it can be. Being able to say you don’t have to inline CSS or use tables would make a huge impact on the perception of email.

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.