Hey everyone and welcome to Developer Tea. My name is Jonathan Cutrell. I'm your host and today I'm interviewing Dan Denney Dan is a front-end web developer at code school.com Code school is one of the largest online code education platforms that in existence really Dan writes a lot of the front-end code for the main website, but he also writes HTML emails now You might have experienced the pain of writing HTML emails Dan is going to talk a little bit about how to ease those pains today Dan's actually creating a course which we'll talk about a little bit probably in the show as well And then I'm actually going to talk with Dan a little bit about the conference that he used to be the organizer for the front-end comp Friend and Conf is still in existence So you should check out front-end Conf as well and of course you can find Dan Denney in the show notes His Twitter account etc But for now, I hope you enjoy the interview, but for now. I hope you enjoy the interview with Dan Denney Hey, Dan welcome to the show I really appreciate your time coming on the show today and I think a lot of our listeners We'll also appreciate your time especially because I think a lot of people Who come to the show to this episode are going to be wanting to know about your Well about two main things which are the two things we're going to focus on Your experiences with front-end Conf and then HTML email the course that you're building on HTML email So let's start out with a little bit of an introduction. What do you do these days? I'm a front-end developer at code school and And so normally like that would entail working on the site and or some courses But for the past four or five months I've been solely on Creating HTML emails and then working on content for a course for HTML emails. I Probably got one of your emails today Are you guys are you working on the plural site emails as well? Oh, no not yet Not yet. I mean, but no, we haven't we haven't like talked about doing anything like that yet Okay, well then maybe I didn't get that one. Maybe that one wasn't wasn't your handy work then But I probably have received some from you before because of code school So for any of our to any of the listeners who are living under a rock and don't know about code school Can you give like the 30 second pitch on what code school does sure? So code school is an online training site and are we create the ability for people to learn in the browser? So if you want to learn a new technology say Ruby or JavaScript HTML you can jump into a course do some video training and then actually Do some challenges in the browser so you don't have to do any type of local setup to learn a new technology Wow, yeah, and what's cool about that to me is that it kind of lowers the barrier to entry for people who You know don't know how to get like Ruby version manager setup on their local machine quickly or like they don't want to commit to the time commitment of getting that stuff set up and Instead they just want to see you know does my brain work with this language or whatever I agree all hardly because that's always the biggest challenge for me is that initial setup of Getting an app up and running the first time you've actually achieved that is to big accomplishment Sure, yeah, and I think it's there's a lot of tools that kind of help with that barrier to entry but learning is a different like a different part of that like We've got tools in the production realm for people who kind of already know how to build somewhat build an app but on the learning side I think there's there's still like Most of the read me say all right, so installation, you know, and it's like going through the compile You know all those all those steps that a lot of people may or may not want to actually take just to get like hello world in their browser or whatever Yeah, that's very true. I don't want to take it too far off But nowadays you almost have to have some kind of build Set up in order to even grab Repos from GitHub. It's a really interesting thing. Yeah, yeah, no kidding. So but you're a front-end developer, right? So Like you said you've been working primarily with emails, but on the actual primary site You've been involved with some of that as well. Is that correct? Yes I've worked at Coastgover almost three years and I started doing emails about two years ago But other than that we work in a rail stack so the dot com site is you know Ruby on Rails app We do the front-end development for that using like SAS and Hamel and then we also have a separate app that runs the majority of our courses And that is actually an angular app With a Rails backend also that we work on to actually create the newest courses Interesting so what I'm really interested in and and maybe this is not the not the time to discuss it But how in the world you guys get the like the REPL working in the browser For like something that's not Ruby like I'm guessing that there's some kind of sandboxing that that happens to where you know you can run An environment in the browser. I'm sure there's a bunch of these things. I'm just not familiar with it quite honestly But I would imagine that it's pretty involved to get a secure uh REPL running a given language for somebody to play around with Yes, so I haven't actually ever done that but I do know that it is our biggest technology investment So anytime that we want to be able to teach a new technology that is the big upfront Cost both in hours and everything is just to get that executor running to process that other language And because it's safety right that's the big that's the big problem on the same it yes Yeah, there's a lot of work that has to go into allowing someone to run code on a server. Sure. Yeah Well, so we won't talk too much more into that because I don't think either one of us is is ready to talk about that right now but uh what we can talk about is Is what you are doing there the HTML emails which is probably about as complicated as As the other HTML email is just full of painful Painful parts right the the hard parts and the kind of dumb parts unfortunately um, but maybe you have a more loving relationship with HTML email than I do Can you maybe go over like the 32nd overview of the pains of HTML email for people? Sure So I might have a positive like Stockholm syndrome going on or something like that But um But yeah, I would say that the biggest pain is actually updating So when you're when you're working with more than one email that goes out for a product And anything changes that requires a change that has to touch every single file that you have for an email going out So I would say the biggest pain point is having multiple emails that you can never update them all at the same time Right beyond that you've got the standard things so figuring out a process to write table code and um Test in multiple clients those are the other big challenges That's really interesting that you mentioned updating because I don't really think about that as often as I probably should A lot of the time I'm thinking about like oh how painful is it to write inline styles? You know and there's tools to help with that so it's it's become a little bit easier I'd be interested to know kind of what your toolset is which we'll talk about in a second But the updating is is something that I'm so used to being able to do elsewhere that I don't really think about it in emails Because so often emails are kind of the afterthought in an application. It's like okay Well, we're we're gonna build the core functionality. We're gonna build onboarding or whatever and then look we're gonna tack on the emails at the end right Yeah, so it comes with a big a big challenge sure are you are you guys using uh the built-in mailing system in rails No, so act not action mailer. No Okay, so what are are you I heard recently on shop talk that you are using mandrel what are your other tools that you are using uh in terms of templating as well as uh the actual uh Ruby gems or whatever it is that you're using in are are you using rails to send your emails at all The only thing that's actually I guess rails driven would be the API request to send emails so we have some like mailer rb files in our app That hook up with the mandrel API and then fire request to send off transactional emails Okay, so you're sending data over to mandrel and it's kind of filling in the template for you essentially Yeah, so sometimes like a template might be on mandrel, but a portion of it is created within our app and then other ones Yeah, we're just sending along data Okay, okay, that makes sense So what about tooling in terms of like processors or uh really what I want to know is kind of what your basic workflow is because I know again on the shop talk episode where you're talking with Chris Corrier You mentioned that you had worked with jeckel at one point. What are you using now uh to actually create those those editable template Um, so I the one interesting thing is I almost never create an editable template Um, nothing beyond editable meaning that you could go into the source code on mailchimp or um, if you have access to the mandrel templates to change something in there Um, so I do work locally, but everything that I create is basically like the end product that's going to get pasted into One of the services that we use and the reason I do that is I want to keep a GitHub repo up to date with all of our emails So if I'm ever hit by a bus or anything that happens all of that stuff is Easily picked up by anyone else right away. Yeah So as far as like building them goes I use I wanted to use hammer So I started using jeckel and then now I use middleman And that's because middleman's like the popular pet project tool amongst the friend end of team at code school Oh, okay, okay, and so that also gives I mean the opportunity to use pre-mailer So I've been testing that out a little bit because up until this point or up until the last couple weeks I've always written all of my styles in line on my own Um, and that was just keep natural having learned tables when I was first learning uh Cmo and CSS Wow Some ways to automate that a little bit too because there are some benefits that you get from being able to just write off an Assess file But I haven't gotten to the point where I like it yet. So I might not be keeping that Unless I can find a different holds her how different uh gem for it sure So and A lot of the time really to write an effective email you don't need a ton of markup anyway It would you agree with that? Definitely a lot of it is repeat Yeah sure and and and i mean ultimately comes down to this A good email focuses on a clear and concise singular message Uh and and that's testable which is the next thing I'd like to talk to you about Is testing but a good emails Typically have a a clear message and they aren't extremely long and they don't have like multiple columns usually Um or if they do they're very simple columns It's not like you're kind trying to create a full web page that you send to somebody's inbox. That's not the goal with an email Yeah, I definitely agree with that um and it's it's something that we try to focus on a lot Especially because these are product-based emails. So really our goal Isn't for you to stay in your inbox and consume anything like if you are running like a typical newsletter The real goal is for you to take an action from the email whether that's play a course Check out a new screencast something along those lines. Sure. Yeah, so uh, so that leads me to my next question I know that there's a lot. I mean one of the things that comes along with With email campaigns everybody talks about analytics and everybody talks about testing So there's two different kinds of testing that are relevant to To you and me one is like testing the effectiveness of the email the other of course is just testing whether or not it looks right Um, are you guys doing a b testing and if so what are you using to do those and what kind of a b tests are you running? We do a limited amount of that and that is actually a really awesome guy that I work with on the marketing team his name is Corey And he does A b testing but pretty much just for subject line and or from address Okay, he's able to find a lot of very a lot of interesting results by testing those two But the limitation that I've run into so far with the service that we use is that seems to be the only Things that you can test. I haven't found a way yet to test Multiple templates to see how they perform sure interesting Okay, and so so you are doing a little bit of it, but it's mostly Uh, with with the two what I would say the probably the two most important pieces which is the subject line In the reason why that's important is because it's the first thing people see is subject line and from address and so It's whether or not they open that and then from there it's more uh, it's the the job of the copy uh to lead them into that final call to action right true Cool. Yeah, okay, and then so in terms of testing for rendering Um, well first how many people on average would you say are getting your emails? Um Typically at this point on ascend Uh, we're close to one million Wow, so that is okay Maybe we should have led with that that's important Ha ha ha and the reason that's important is because a million emails is like Oh man, so let's talk about this for a second Ha ha emails important guys Ha ha ha I don't know if you know this, but email is important and the reason email is important is because it's still is uh, one of the highest Um, convert convertors right so people get emails and they click on them more than they do when they just visit a website Uh, a conversion metric for an email is is generally much higher And the only thing that it falls short to i believe if i remember all of my statistics correctly is actual physical mail Uh, and maybe it may even be rising on that as well, but The reason email is important is because everybody uses email and it's there generally their primary means of communication Especially for people who are doing code school It's very likely that they're in their inbox Um, a large portion of the day and so having a million emails I don't know what I could say that's equivalent to Uh, but that is a lot of emails to be sending out and so you have the ability to do Uh, pretty i would imagine that you have to test pretty much every single Uh, every single email thing. What is it email client, right? Uh, you would think so, but no Uh, really i live in like the dream world of html uh email clients You get responsive html email, right? right yes And um, fortunately i can test just over like 80% of our opens on all of the equipment i have right in front of me And that is because with an iPhone and a Mac i can hit just over like 80% of all of the clients of people are using That's incredible So you're talking about And the reason for that presumably is because most of the people who are on code school are using Mac products or they're using something that mac has either an emulator or or what how does that work? Yeah, so like a large portion would be using gmail with chrome That's a you know significant number of our opens Um, beyond that though, we do get it the next ones up would be apple mail and ios mail Interesting. Yeah. Wow. And so what that means for you is that you aren't having to do like virtualization which would take forever All right, so i do have to So it's not it's like The bulk of our people and so like this is one of those things that when you start playing with numbers, it's kind of interesting Right So when you talk about two percent do you worry about two percent of you know something when you're talking about supporting a technology Oh when you're reaching in the area of like 800,000 900,000 a million that number is really big When you send that out like if i send that out we're talking like 20,000 emails could look really broken if i send out something looking awful and outlook So yeah, i do still send i do still use virtual testing tools. Uh, litmus is amazing for that Yeah, i was gonna ask you if you guys use litmus because i've used litmus in the past and it's been Generally, i've had a really good experience with it and so if anybody is listening to the show and you're looking for a tool To do email rendering testing litmus is a good one Uh, do you have anything actually native on the iphone or or another kind of app on mac that does this kind of stuff Uh, that is it other than the fact that i have Probably four clients on the mac and six my phone Okay, so you're probably testing and like the mailbox and in those kinds of things definitely And i would hurt my feelings for a long time because i love it so much But they had some some issues with rendering early on that have been great now they do they they're great at this moment So that that brings up a good question. What is the worst email client that you're you that you're having to build for right now Uh, gmail gmail is a killer. Yeah, and so i don't like gmail alone Makes it so that that's the reason why we have to do inline styles So that's one thing But then the bigger thing is their apps that they put out are just notoriously bad for viewing emails and interesting people use them lots of people use them And that is the one where i'll usually get my hate mail from It's kind of counterintuitive too because you think like okay the maker of chrome Would be like at the forefront of this of of of email or i'm sorry of inbox rendering Uh, but apparently not right yeah, definitely not and it's it's a big deal They've uh they've put out a couple posts this year and there's been a little bit of like a social media buzz like you know Like fix email and some putting some social media pressure on them to to fix things Huh interesting Well cool and so I've led up to this because i wanted to wait and And address the the final piece of this which is that you're creating this course for Uh for html email and i'm assuming that you're creating it for code schools. All right. Uh, yes So tell me a little bit about how that's gonna how that go how that's gonna go for people who are listening and might want to take the course Sure, so we're gonna focus on the basics It's only gonna be talking about like creating a design and hand-coding that into inline styles That works across I heard you much all of the popular clients Okay, so above that 80% number probably right yeah, no, we're definitely touching the the outlooks The only thing that i haven't really addressed is Lotus notes i haven't addressed that in any way it does so it's still out there Uh, i haven't ever seen it and so i haven't been able to Include that one yeah, it's kind of tough to test for something that you can't get your hands on anyway I think there is a sir i'd like let miss might have it there is some service that does testing for it But i just have never even seen it on a chart so Yeah, so i have another question i'm so interested in this because it's such a different uh a different form of front-end development How do you um How might would how would you approach the idea of progressive enhancement Uh when it comes to emails what can you leave out and for instance i know that gmail doesn't render images Unless you click the button that says show me the images how does that affect your workflow It's like a tug of war all of the time so you know that popular gif what's there there's like CSS and he's like pulling on the window shades Yeah, it's it's like that um, so you you kind of like you take an inch and then you have to go back and figure out Some sort of hack to be able to go that one extra step for one client and then not break things for everything else And people have gotten insanely creative on hacking the various clients because most of the known issues are out there They're documented and then people Have found really interesting ways like targeting webkit with media query Just various ways to allow you to do a lot of the fun stuff, but then not break things for the older clients Very cool very cool. So uh so this html email course uh i'm guessing The best way for people to find out about it is just to stay tuned to you on twitter and probably to code school.com right? Yes, uh, we'll definitely make some noise about it for sure Thanks so much for listening to this episode of Developer Tea with Dan Denney of course the next part of the interview will be in the next episode If you have any feedback from me you can reach out on twitter at at Developer Tea or you can email me at Developer Tea at gmail.com Of course the show notes for this episode and all of the other episodes can be found at developertea.com And there's also a contact form on developertea.com If you're enjoying the show please consider leaving a review and a rating in iTunes It's the best way to help other developers just like you find the show Now not everybody can support the show monthly But I want to extend a thank you to the few who can Those of you who have decided to support this show. I appreciate Your donation so much if you would like to join them You can go to developarty.com front slash donate even the smallest amount is is a huge help So thank you so much To those of you who have decided to support the show on a monthly basis Until next time enjoy your tea