Building HTML email newsletters with Fabio Carneiro

Paul Boag

This week on the Boagworld Web Show we are joined by Fabio Carneiro who will help us through the horrors of HTML email.

Skip to the interview or this week’s links.

This week’s show is sponsored by the teams at Opera and Media Temple. See, people must think this show is decent!

Paul: Hello and welcome to Boagworld.com, the podcast for all those involved in designing, developing and running websites on a daily basis. My name is Paul Boag and I am joined as always by Marcus Lillington. Hello Marcus!

Marcus: Hello Paul!

Paul: I am feeling very abrupt today for some reason. I don’t know why.

Marcus: Where are you in the country? This is my new fun game.

Paul: It’s your new fun game? I am actually still in Minehead.

Marcus: Oh, you haven’t got very far in a week then?

Paul: No, we got distracted. Because we have relatives….see it’s a funny thing isn’t it…I go to Minehead at least once a year to go and see my relatives that live here. And I never go anywhere in the area. Do you know what I mean? It’s like you never visit the places that you live around.

Marcus: True.

Paul: Some people do, but I don’t. And so we thought let’s explore. So we’ve been up on the moor which has been lovely. And Dunster Castle which is you know—Americans I imagine wet themselves whenever they see Dunster Castle—because it looks straight out of Harry Potter. Even to the point of… what’s the little town that’s near Hogwarts?

Marcus: I don’t know, I am looking at Dunster Castle. Oh yes, that’s very…

Paul: That’s it! It’s even got the little village with the stone cobbles and the whole works, so we went there and spent a bit of time there. So it’s a lovely area. I should be paid by the West Somerset Tourist Board really.

Marcus: But yes, that looks very nice Paul.

Paul: It is, it’s absolutely stunning. I’ll put a link in the show notes to Dunster Castle because it’s a National Trust Property. I’ve tweeted earlier today that I now spend my life trundling around in a motorhome, going to National Trust Tea Shops. I’m like sixty at the age of forty aren’t I? I’ve basically prematurely aged.

Marcus: Yes, I am not sure what you are meant to do at forty though. What should you be doing instead that’s more appropriate? Because I read that and thought well… erm… errr. Going to work?

Paul: Yes. Going to work! Essentially I have retired early.

Marcus: Yes.

Paul: But I’ve kind of managed to fit some work in around it as well. I mean I am going to have to do proper work next month. I am going up to Scotland next month – for a whole month I am working up there. So we are taking the family up and we are going to explore Scotland a bit which is very exciting.

Hey, there is something really important that I want to talk to you about.

Marcus: Really?

Paul: Yes. I need your opinion, ok?

Marcus: Ok.

Paul: Because I watched the Apple keynote that came out on Monday.

Marcus: Have you seen the Apple, the Spanish Apple engineer video?

Paul: Oh I laughed my arse off at that link.

Marcus: That’s got to have been the funniest thing I’ve seen for a very, very long time.

Paul: I’ll put a link in the show notes to that as well. Talking about the MacBook Pro or MacBook and their decision to remove all the ports.

Marcus: Yes.

[Laughs]

Paul: It makes me laugh just thinking about it. What I want to know, was what he was originally talking about before they subtitled him.

Marcus: I know, because you’ve never seen someone laugh so much have you?

Paul: Oh my word, did they laugh.

Marcus: So yes, my opinion?

Paul: So you’re a watch lover, right?

Marcus: Yes.

Paul: You would spend a lot of money on watches if you had a lot of money?

Marcus: Yes.

Paul: And you’ve got really good taste in watches and I’ve seen you point out gorgeous watches in magazines. And every time we go to an airport, you are always taking me to show me the watches. Would you really pay £10,000 for an Apple Watch made with gold?

Marcus: I wouldn’t no.

Paul: I get positioning the Apple Watch is like an everyday watch, I kind of get. But gold? It’s just damn ugly compared to the gorgeous watches you like.

Marcus: I don’t really like any watches in gold, so I am probably the wrong person to ask. Rolex do gold versions of their steel ones, and I think the steel ones look way better and they are a tenth of the price. So it’s a no-brainer then. Same thing applies to the Apple Watch really. But I thought you were going to ask me ‘Should you buy an Apple Watch’?

Paul: The difference is that I like technology, so I’d buy the Apple Watch just because it’s a piece of technology and it does cool things.

Marcus: That’s where we disagree because I don’t think it really does anything particularly cool.

Paul: Well there are certain things I like about it. There were things like…

Marcus: …it tells the time?

[Laughs]

Paul: …tells the time. Yes, radical! No it’s the things like if I am at home, I don’t have to have my iPhone with me all the time. Basically if I am on the same Wifi network I can answer calls and I can talk to Siri and I can reply to texts and stuff without having to have the iPhone in my pocket the whole time.

Marcus: You can answer calls?

Paul: Yes.

Marcus: Really?

Paul: Yes you can answer calls on your iPhone and speak to people that way, and you can ask Siri questions and that kind of stuff.

Marcus: So if you’ve got a call through your watch, then you’ve got the person speaking to you out of your wrist?

Paul: Yes.

Marcus: Mmm, not sure about that.

Paul: But anyway, that wasn’t what I was going to ask. It’s whether you think it’s a nice piece of aesthetic design or not?

Marcus: I actually do, yes.

Paul: You do?

Marcus: And a lot of people don’t and I actually quite like it’s lumpy roundness. I need to see it in the flesh. Need to put it on my wrist and then I can answer that question properly. Because they take the best product photos of any company and they make it look just right. I imagine it to be a bit chunky because a really good mechanical watch or even more so a good Quartz watch, they can make them so thin and so light, that’s part of the appeal of them. But my concern with the Apple Watch aesthetically will be that it’s a bit chunky and unpleasant to wear because of that. But I quite like the squareness of it, which I think a lot of people don’t. But I quite like that.

Paul: I was reading a watchmakers opinion of it. And he says it fails the cuff-test. Your cuff doesn’t easily go over the surface of the watch because it gets caught on it.

Marcus: Well that’s why they’ve made it so rounded I’m sure. If they made it more the iPhone 5 with its sharp edges then it would do that even more so. But that tells me, yes, it’s really thick and you don’t want a watch that sticks out.

Paul: I’ve also got to say, I can understand spending a lot of money on a precision time keeping piece with all of the incredible intricacies of the handmade complex internal workings and all of that.

Marcus: Which they genuinely are, these watches.

Paul: Yes, they are amazing pieces of engineering, but paying £10,000 for essentially what is a shrunk down iPhone that is strapped on your wrist, it just felt wrong.

Marcus: You can apply that to anything. Why would you spend £1,000,000 on a car, because you can buy an amazing car for £50,000. So what’s the point in spending £1,000,000 well if you’ve got that kind of money then its exclusivity isn’t it. That’s not a direct comparison obviously but…

Paul: Perhaps College Humour were right about this, because they released a video. I’ll see if I can find that for the show notes too—I know I am going to regret this—that basically summed it up perfectly that spending $10,000 on the high end watches was a time saving thing, it was a productively enhancement. Because essentially you don’t need to tell people how rich you are anymore, they just need to look at your wrist.

Marcus: It gets things done.

Paul: Yes, exactly.

Marcus: And in that case, I would rather have a gold mechanical watch, but I still don’t like the gold ones. I just think that… I guess you could have a platinum one, which would be worth more, but look just like a steel one. Steel in watches looks good I think.

Paul: Yes, I must admit, really I would like the stainless steel watch that they are doing in the Apple Watch but I am too tight. I am not convinced that I really, really want this watch. I am also thinking the second generation is going to be half the thickness. So for this one, I am thinking I am going to get the cheaper end watch, more from a ‘I have these gadgets try them out’ point of view than necessarily convinced it has a space in my life, yet.

Marcus: I wouldn’t even bother with that Paul, I would just wait. Go and have a play with one in the Apple Store, go ‘Oh that’s really thick and ugly and I don’t like it and it’s uncomfortable’. Put it back, save your money and wait until they bring out a better one.

Paul: Yes, but I’ve got this feeling it’s going to be a bit like the iPad that until you live with it on a daily basis, you’re not going to realise how useful it is. Going into a shop—we’ll eventually get onto the point of this podcast but anyway—going into a shop and having a little fiddle with it is not the same as sitting in your lounge and you’ve left your iPhone upstairs and you want to know who that actor is on TV or being out and about driving along in the car and you get an email and you are wondering whether it’s from that really important client or not, and you can just glance at your wrist. Until you live with it, I think there’s a difference.

Marcus: I’m not convinced because those things yes, ok. They sound sort of vaguely useful things, but the fact that you have to wear this thing, doesn’t make those scenarios you’ve just described aren’t enough to make me put on something that’s heavy and uncomfortable.

Paul: Yes, that’s the key. Is how heavy and uncomfortable it feels. Because I have a very low tolerance for watches actually. I don’t wear a watch normally because they irritate me. But you do. So I think I am certainly going to try it on. I won’t be pre-ordering it.

Marcus: I’ll go and try it on and go ‘No, bit chunky’ and to be honest all I think I would use it for is telling the time.

Paul: You’re just getting grumpy and old, that’s the trouble.

Marcus: But at least I don’t spend my life in tea-shops.

[Laughs]

Paul: I asked for that. All right, shall we get on with the show then?

Marcus: Who’s on this week Paul?

Paul: Who’s on this week… Fabio, see now I am going to get my computer to say his name properly… it’s not doing it, great that’s really good!

Marcus: I can’t help you because I didn’t do this interview.

Paul: I am terrified I am going to get his name wrong, because it’s a cool name. It’s obviously an Italian name, and I want to do it justice. Here we go, let’s see what my computer says. Fabio ‘Connero’ did you get that?

Marcus: I did, Fabio Connero.

Paul: Fabio Connero, there we go. He’s on the show. I can’t decide whether he is absolutely insane or one of the coolest people I’ve ever met and I’ll tell you why when we get onto talking to him.

But before we get to that, I do quickly want to mention our sponsor, because we have a new sponsor!

Marcus: Ohhh!

Paul: A new person—or organisation I should say—is supporting the transcriptions of our podcast. And it’s Opera!

Marcus: Oh, good.

Paul: So this is Bruce, you know Bruce Lawson we had on the show? So I basically said ‘Bruce, Bruce… in return for coming on the show…’ No I didn’t say that. He’s always been a big fan of accessibility and so I thought what a brilliant person to talk to about sponsoring the transcription? And of course Opera are great – they’re a really great bunch over there and so they leapt on it immediately. Opera is an interesting one for me. I’m like everybody it’s an amazing browser that has some really cool stuff but often you overlook it because of the bigger names that you’re more familiar with.

Just to give you an example of why I like Opera so much is that they update it every six weeks, they are constantly innovating with it. So Opera 28 has just been released. And it’s got some really cool stuff in it. It’s got a great compression thing built into it, which is called Opera Turbo which will compress large assets on your sites so that they load a lot faster over slower networks which is such a useful thing. So often we kind of just overlook it because ‘Oh it’s not Chrome or it’s not Safari’ or whatever. So that’s a really great feature. It’s also got things like Speed Dial, it’s got some great visual bookmarks. You can actually easily share your bookmarks with other people and it syncs it bookmarks automatically with Opera Mobile, or Opera Mini.

It’s got a great discover feature which allows you to find out latest news or find interesting new content and then it’s got loads of kind of security extensions and cool stuff built into it which just makes the site so much more secure for you. And it’s got loads and loads of extensions and side panels and all kinds of things that are really very unique and unusual and stuff that you’re not finding on other browsers. Yet so often I think we kind of dismiss it, especially as web designers, ‘Oh it’s another web browser that I’ve got to support’. But actually it’s built on the same blink rendering engine as Chrome, so it’s highly compatible. And it’s across every operating system, and we’re going to get onto in future shows, how Opera works on Mobile. And it’s quite mind-blowing where Opera is and how big Opera is when we don’t realise it as web designers as we’re not necessarily using it day to day ourselves. So it’s definitely something we should be testing with. And I think it’s something I am increasingly tempted to be using as my main browser because of its lightning speed, especially with travelling in the motorhome—not that it always comes back to that—but when you are on the road and you’re using a cellular network to connect to your laptop, having a browser that does a load of compression for you and brings stuff down much quicker and uses less of your data allowance is bloody useful I have to say.

Marcus: I have a confession.

Paul: What’s that?

Marcus: I haven’t even got it on my machine.

Paul: Have you not?

Marcus: No.

Paul: Well how can you test stuff that people send to you?

Marcus: I don’t test on Opera.

Paul: You don’t test on Opera?

Marcus: I don’t personally.

Paul: It’s done, one presumes, otherwise I would be very disappointed.

Marcus: One presumes. Yes definitely, I know that Dan does. I open Firefox probably twice a year.

Paul: So what’s the main browser that you use then?

Marcus: Safari and Chrome.

Paul: Right ok. Well before next week’s show you’ve got to install Opera. In fact so has all our listeners and give it a go, and honestly, give me honest feedback via twitter.

Marcus: See I am not going to do that Paul. I’ll talk to you.

Paul: You can talk to me when we do the podcast. But if other people have gone and downloaded it and tried it out, then give me feedback. Because I am really interested in what people think of it as a browser. Because I have to say, until I came to do this with Bruce—I’m sorry Bruce—until Bruce came on the show I hadn’t looked at Opera for a long, long time other than for briefly open it, test it, close it again. And I’ve been quite impressed by the amount of cool stuff that’s come into it over the years that I was just totally unaware of.

So anyway, everybody just go and download it to give it a go. And you can download it at Boagworld.com/Opera and we’ll all discuss it over the next week on twitter and face-to-face with you Marcus. Well not face-to-face really but you know what I mean.

Marcus: Yes, one day maybe, when you’re back in the land of the living.

Paul: Well I am only back very briefly before going up to Scotland.

Marcus: After that I am going to make you come into the office.

Paul: Oh, do you have to? I don’t want to see you lot again. I thought I had got rid of you.

Marcus: You do, because you can go out and have lunch with us.

Paul: Oh that’s quite good.

Marcus: Now suddenly it’s a good thing.

Paul: Suddenly it’s a good thing, I like that.

Anyway, we’re interviewing Fabio. I’m not going to say his surname again because I’ve done it once and that’s it…

[Laughs]

…who’s from MailChimp. Look I know it’s sounding a bit like a MailChimp fest this season because we’ve got Aarron Walter on, and we’ve got Fabio on, and we’ve had them as a sponsor. But it’s not my fault, they keep doing cool stuff!

And honestly I booked the interviews way before I ever knew that they were going to sponsor the show.

Marcus: Yes, yes, yes…

Paul: No it’s not dodgy!

So I said that Fabio was either mad or brilliant and the reason I said that was because Fabio, for a living, produces email letter templates. So he has to be either insane or one of the most impressive people I’ve ever met. Because producing HTML newsletter templates is a nightmare and Marcus, you must have kind of asked a designer at some point to build a HTML newsletter template?

Marcus: Yes, I say ‘Can you remember designing the table stuff that we bashed out of you years ago? Could you possibly do some..’ And they all go ‘No, don’t make me, don’t make me’ ‘What do I need to test this on?’ Is the next question.

Paul: Sixty-three different mail clients! And then you’ve got to do spam filters… it’s just horrible. But Fabio is the guy who’s going to help us through it, because he spends his day building HTML email templates. So here’s Fabio and yeah… I’m quite rude to him at the beginning, but I think he understands what I was getting at.

Interview with Fabio Carneiro

Fabio Carneiro
Fabio Carneiro spends his days designing and developing versatile, responsive emails for more than 5 million customers.

Paul: Hi Fabio, thank you so much for coming on the show. It’s really exciting to have you here.

Fabio: Thanks for having me, I’m glad to be on.

Paul: So you’ve got possibly the worst job of web design.

[Laughs]

Am I allowed to say that? Is that deeply offensive?

Fabio: It doesn’t offend me. I am a bit more pragmatic about it. I don’t think it’s the worst job, it’s certainly one of the more challenging jobs.

Paul: I guess you must find it satisfying to work with emails all the time and work around those challenges. You’re obviously one of these people that given half a chance would climb mountains for the sake of it, and things like that?

Fabio: Yes, perhaps so. To be perfectly honest, I do love it. I love the challenge of it. I like how constricting and difficult it can be at times. It just makes the payoff when you get it right, that much more satisfying.

Paul: Yes, yes. I can understand that. You’ve got to start with the probably most fundamental of questions which is ‘Why are email clients so terrible?’ and ‘Is there any hope that they are going to get better?’

Fabio: The reason why they are so terrible goes back a long way so if you’re a web designer in this modern age, you already know the story of the rise of web standards and the achievement of parity between browsers. They work differently here and there, but I tend to love it. It’s pretty much as good as Chrome and that’s pretty much as good as Firefox and they all work similarly at this point in time. That kind of levelling of the playing field never really happened in the world of email because it’s actually much more fracturous than browser landscape ever was.

Right now I think the count of I’d say you could call them major email clients, is somewhere around, last time I checked for MailChimp at least we had about thirty-eight different mail clients that we try to account for. Really there’s only like a small handful that rule the roost as it were across the planet. Microsoft Outlook, Gmail, Yahoo, Hotmail, it’s split between Desktop and webmail and mobile. I think the biggest reason why that technology hasn’t moved forward is primarily because—and I hate to pick on them as I really prefer Microsoft but it’s really kind of Microsoft’s fault—back in 2007 Microsoft re-architected Outlook for the Desktop and they switched the rendering engine of that email client from one that was based on I6 to one that was based on the Word rendering engine.

[Laughs]

Paul: I remember this! It’s like the totally wrong direction isn’t it, it’s just incredible.

Fabio: Oh yes, absolutely. At least from our point of view it’s wrong. If you put yourself in the shoes of an employee at Microsoft, maybe with an employee with a vested interest in what Microsoft Outlook does, their idea was that Outlook was part of the Office Suite. And so the idea there was you should be able to create your email, be in Microsoft or Word, and send it to your company via Microsoft Outlook to other employees who don’t look at it in Microsoft Outlook. And in that enclosed ecosystem you can imagine that the email would look right. Unfortunately the world doesn’t run on Microsoft’s Office Suite, not really. The internet certainly doesn’t. So the lack of support for basic CSS and HTML really kind of held email back there because Outlook is just so incredibly prevalent the world over. At MailChimp, Outlook 2010 is our fourth largest client.

Paul: Oh right.

Fabio: And that’s across hundreds of millions of users and that’s just MailChimp. The world over, it’s certainly almost in the top five if not in the top ten. But you can’t just lay the blame on Microsoft.

Google is also a little bit guilty here. For their part Gmail supports HTML and CSS fairly well, but Gmail does some strange things like their code parser strips the Style tag or the Head tag from the HTML document that the email’s built out of. And that forces you to hand line CSS and just do some odd things. It’s kind of just this perfect storm of all these different clients not following standards, doing things their own way which then kind of forces you as an email developer or designer to kind of design to the lowest common denominator.

Paul: Is this going to get better? Are there standards? And is there discussion about adopting those?

Fabio: There’s discussion…

Paul: I don’t sense a lot of hope in your voice there.

Fabio: No, you know, maybe I am becoming a pessimist here. There is a discussion just for people who came together and are using the W3C working group forums to talk about this. And they’re talking about a new kind of standard system for email that’s separate from web standards and handles things differently because technologically email is separate from the web.

My problem with that approach is that standards guys are not known for moving quickly.

[Laughs]

Especially when a new standard has to be created. And so I don’t think that I’m a believer in that to get a lot of things done its ok to take the path of least resistance and work from there. And for email the path of least resistance is to just stick with the standards we’ve got which are web standards. And that would leave the bulk of the work to be done on the email client side, so convincing Gmail or rather Google to bring Gmail up to spec and follow standards and to stop making us hand line CSS. And it’s up to Microsoft to move Outlook off that Word engine and to a proper HTML rendering engine. And I actually think that is more achievable. At least in the next five or ten years, than building an email standard from the ground up. All of the arguments that that entails and all of the experimentation and back and forth and everything.

I do think it’s getting better. Gmail I know is especially looking into it, they’ve said as much here and there especially when they launched Inbox, there were all sorts of questions going back and forth as to whether Inbox supports media queries and things like that and it doesn’t not yet, but the guys at Google said that it was something that they’re working on. And for my part I try and reach out to people at Google and Microsoft and find that I light a bit of a fire, if I can or always bring the issues to the forefront.

Microsoft I think is going to be a big problem. Just because as I said like, to them Outlook is part of the Office Suite and the Office Suite is part of Microsoft’s bread and butter. The world kind of runs on it, as far as business goes. So I think the incentive for them to change it is certainly lesser.

Paul: I guess the other problem as well is that, unlike something like Gmail, even if they do change it, it could be years before you could get into a position where you could make use of all of that because people aren’t updating their systems.

Fabio: Yes. And that’s certainly an issue there. If you just look at Android usage, so many people are way back on Android 2.2, I think that was Gingerbread. And we’re at Android 4.4 now. And I think that problem is worse when you look at desktop clients like Microsoft Outlook. I said Outlook 2010 was one of our biggest clients, but right up there with is it is Outlook 2007 and Outlook 2002. They are still hugely used the world over.

It’s just…it’s a complicated landscape.

Paul: So getting down to the practicalities of what all of that landscape means… what are the things that your average web designer needs to understand about HTML email? What can you do, what can’t you do? For example I was really surprised to discover there is nothing to stop you using web fonts with some email clients. Is it almost to a degree of progressive enhancement again?

Fabio: Oh yes, I’d say that’s hugely, hugely important in email. A lot of people say that email is stuck in the late 90s and you’ll have to go back and think in tables and build in tables and for that part that is absolutely true. You do have to do that. But this stuff that you can do with tables is actually fairly impressive and you can get away with a lot of modern design even if you do have to use it. And it’s just a case of ‘yes, you might have to build the foundations of an email in these kind of decades old techniques’ but you can absolutely follow the principle of progressive enhancement to use web fonts, CSS animations, HTML 5 video, all that kind of stuff. You really are only limited by what each individual email client supports. And at this point, so much of the world is mobile, they are using IOS or Android systems, fairly modern browsers, things like that, that you can get away with quite a bit of that.

There’s Litmus they’re an email analytics company based in Boston and they’ve got an email designer there – Kevin Mandeville who really kind of always pushes the boundaries of what’s possible in email. And for anybody who says email is thoroughly stuck in the past, I would urge them to check out some of his emails and there’s a company Action Rocket in London who send some pretty impressive stuff as well. That includes CSS3 animations, all this good stuff we get on the web and think it’s just absolutely impossible in email, but really it just depends on the client. It might fail on Outlook 2010 but you can provide a baseline experience there and enhance for IOS and Android systems.

Paul: That’s really interesting that progressive enhancement is even more important in some ways in email than it is on the web. And yes, that’s good to hear about that.

The other thing I was going to ask is… you build stuff in tables, like in the good old days when I understood what was going on, but you can layer in all these additional things on top of it – great, wonderful. But then you come to the point of testing. How the hell do you test?

Fabio: For me, and this is kind of what I recommend to people who ask me this question, for me there is no replacement for practical hands on testing. So let’s say you are just getting started doing this. You open an account on every webmail service you can so Gmail, Hotmail—I guess its Outlook.com now—Yahoo, AOL and you can set the emails to forward from one account to the rest. And then build a device lab. I know that can get expensive, but you can actually put together a fairly decent device lab with an iPhone 4 at the very least, a couple of Android handsets, one for Android 2 and the other for Android 4. You can do VMWare and find yourself a copy of Outlook 2000 or Outlook 2007 and all that can be done for between £500–600 for a fairly comprehensive set of devices. It’s a onetime cost and it allows you the freedom to actually send and look at something across these devices and actually see what they are doing and get into the code if you need to.

Of course that cost can be steep for some people and of course it could be possible that they just can’t get their hands on all those devices so there are other options. I mentioned Litmus earlier and they are well known for their testing platform, they emulate just tons and tons of email clients. And you can send your email to them once and just watch these screenshots of your email in let’s say like Outlook.com in Firefox versus Outlook.com in Chrome versus Outlook 2007 or Gmail on Android and things like that. I use that in combination with a more practical hands-on approach to get the clients and devices I wouldn’t spend my money on, like a Blackberry for example.

Paul: Yes that’s really interesting, I hadn’t thought about not only have you got to worry about all the different email clients, but you have to worry about all the different browsers viewing the different email clients. So for example Gmail on Chrome, Gmail on Firefox etc.

Fabio: Yes it gets very unwieldy very quickly. I just did a report of Clients all across every MailChimp list and I am looking at sixty-two different clients.

Paul: Gee-whiz!

Fabio: So yes, there’s a lot to look at.

Paul: So there are certain big no-nos? Are there certain things that you just think ‘steer clear of that one’?

Fabio: Yes there are some CSS properties that are really poorly supported across the board, things like floats and positioning generally don’t work and there’s a small number of handsets that do support that so you know, IOS will do it and Apple Mail will do it dependant on kind of what element you apply the float positioning to but outside of maybe one or two it kind of just fails everywhere.

Paul: Right.

Fabio: And that’s actually another tricky bit about styling or using CSS in email. Is that not only is it dependant on what client you’re viewing it in, you also have to contend with what element—what HTML element—the CSS is used on. So for instance, padding not necessarily the most exotic of CSS properties, doesn’t work in Outlook. Let’s say if you were to try and put padding on a

tag or some type or an anchor tag, it fails. But padding works totally fine on a

and margin kind of works the same way. You kind of get into these weird hacky things that if you capitalise the word margin, margin actually works in Outlook.com but does not work if you just use the standard lower case syntax.

[Laughs]

It’s just that’s because their code sanitizer probably isn’t specced to look for this capitalisation, or rather looks at it and says I don’t know what this is, and it doesn’t clean out that margin. There’s a couple of… you know, as far as styling goes, styling no-nos. But really it’s such a case by case kind of thing, which is why testing an email is so hugely important. Which is why it’s so difficult for a lot of people because it’s got such a steep learning curve. And until you know these things by wrote, at this point this kind of knowledge is ingrained and taking up valuable space in my head. You know, that is a landscape only described as hell.

Paul: So what’s the solution? Obviously the solution is merging, we know this. But is that what it basically boils down to? Using a system that handles a lot of this kind of stuff for you? Because if you are a web designer and a client asks you to build a newsletter template, you’re doomed basically aren’t you?

Fabio: Well it depends on how much work you want to put into it. I work for MailChimp and I put the mails together myself and I know that they are stable and robust and they will work across a variety of clients, but other email service providers are good as well. But ultimately you don’t get the kind of design feeling… if you’re just a hard-core designer and you have a client who wants very specific things your only option is to kind of build it yourself. But at least to that, and there’s actually plenty of code out there that you can… I believe HTML5 Boilerplate is one of them? We provide a repository of email templates and I actually have a reference site that’s templates.mailchimp.com.

Paul: OK, I’ll put a link in the show notes to that one.

Fabio: Yes, and I like to describe it as my brain and everything I know about email – there’s plenty of code in there and examples and things like that to help you people puzzle out.

There’s another one – responsiveemailpatterns.com is another.

Paul: Ok.

Fabio: This guy, Brian Graves, he works at [DEG[(http://www.degdigital.com/) here in the US. And he’s done a lot of interesting work with pattern libraries for email and things like that. Litmus has some email code as well and there are quite a few other frameworks for all that. So there’s certainly, there are tools now that are, when I started at MailChimp – this is roughly just over five, five and a half years ago, none of this existed. I was kind of dropped into this blind. I had never built an email in my life. I was here, I think it was maybe two months, and our CEO said ‘nobody here is actually taking care of these emails – congratulations, it’s you!’.

So I had to learn all this stuff really the hard way. There were maybe one or two blogs that were sparsely updated with ‘Oh hey, we found that this doesn’t work in Outlook’. So that was the knowledge I kind of had to build up myself. And to tell you the truth it kind of sucked. I did not enjoy email design back then. And so my kind of goal for templates.mailchimp.com and our github code repo and all these other folks putting this knowledge together to make it easier for everybody else. If you have to do it on your own and you maybe, don’t want to be tied to the more simple email letters that ISP’s provide, then there are certainly options. There is a lot of code out there that you can dig into. It’s still kind of requires you to climb the steep slope of difficulty to get started but it’s certainly possible.

Paul: I have got to say that design builder tool that you guys provide is, I just think is remarkable. That just gives you a degree of flexibility really doesn’t it, considering

the complexity of building an application like that and,

considering the sheer number of different clients out there.

And I’ll tell you one thing that always makes me a bit nervous with that design building template tool that you provide is that when I start putting images into it, I know that a lot of clients seem to disable images by default? How do you deal with that kind of thing?

Fabio: Yes, there are a few different ways, first and foremost and most emails that are sent fail on this count is to have your email have plenty of textural content. Most retailers send an email that is either just one large image or just series of images. You get that email on Outlook or desktop where images are off by default, you see nothing. And Outlook doesn’t even support Alt text, so you just get this blank tiles that tell you absolutely nothing and have another little message in them that says ‘Click here to show this image.’

So I think having a good balance of text content and images is first and foremost. That’s kind of like the baseline. On top of that, for clients that do support Alt text, alt text on every image is kind of a big deal. You can do a lot of interesting stuff. I’ve seen people animate alt text, you can certainly style it and all of that. Those are the biggest ways to get around that.

Paul: I like the idea of being able to style alt attributes. That’s kind of cool.

Fabio: Yes, you take the text style that you placed on the image and so on the image tag and line and font family Helvetica and that kind of stuff and it shows that kind of the way, it’s a nice fallback.

Paul: Yes, that’s good.

We’ve concentrated a lot on the kind of design elements and the nightmare of rendering emails causes another huge issue when it comes to email marketing and producing email newsletters and that kind of stuff which is spam folders – actually getting the email into people’s inboxes in the first place. What’s the deal with that? How do you go about preventing your email ending up in the spam folder?

Fabio: That kind of comes down to content as well. That includes subject lines, alt texts. Kind of one of the more important bits is if you’re subject line says something like ‘FREE’ in all caps or ‘CLICK NOW’ you are almost certainly doomed from the start.

[Laughs]

If you’re missing something like an Unsubscribe there are those services that kind of look for that, for those words, have people look through the emails and look for these things missing.

A lot of it is quite radical but if you’re adding ten exclamation marks at the end of a sentence, that basically screams spam to these spam filters. Using bright red coloured fonts, or bright green, that can set them off. All of these things are generally not that you use red font in the email once that it’s going to end up in spam. But all these are assigned point values in these spam filters.

Paul: Oh I see.

Fabio: So that kind of adds up and once you hit a certain threshold, it tells them ‘Ok, this is certainly suspicious’. Other bits of content too, like there are some things are just ultimately always doomed. If you are trying to pitch mortgages, pretty much every email you send is just going to wind up in spam filters. Because that’s such a huge kind of a subject matter in spam. Anything like having to deal with tons of money or a guaranteed three thousand dollars a month kind of thing.

Paul: I naively thought that spam filters worked primarily off of who was sending them, the IP address it was coming from. How big a deal is that?

Fabio: That’s actually a very important part as well. IPs have a reputation and the best email services really strive to keep their IPs clean. And so for our email we are very aggressive about preventing spammers from using an IP that we have because that damages that IPs relationship and once an IP is solid enough that it will get blacklisted or at the very least it will be looked as a constant source for spam. And so that’s certainly kind of like, I’d say that’s the other half of the equation apart from the user side of things. If an email service provider has a very good reputation as far as across the IPs, you’re ok. But it can be that it does happen sometimes. One bad sender on an IP—depending on how many emails are coming off that IP—one bad sender can spoil the entire IP forever. And that’s why so many companies fight so hard against spam.

Paul: Yes because I am always very conscious when I unsubscribe from an email that’s come via MailChimp. You always ask ‘Is this spam, why have you unsubscribed?’ And I guess then that’s why then.

Fabio: Yes and that’s an important thing to… people are, not everybody, but I’ve heard the argument that maybe you shouldn’t make the unsubscribe link so easy to see, or so easy to get to because you don’t want to lose the person. But it’s actually much worse to have somebody unable to find an unsubscribe link and just mark you as spam. That just loses subscribers. And if you’re losing subscribers that’s something that’s on you. You’re not doing something quite right, either your content is irrelevant or you’re sending people junk. It’s got so much to do with permission. That’s the thing about… I guess, email is about building relationships. It gets so hugely important that it’s ok for you to lose some subscribers while you are tuning what you are sending out. It’s how you figure it out. Build them back up and then send something that people want. It’s a tougher road but ultimately it’s much easier than being labelled a spammer and having to move from ESP to ESP and trying to find a home so you can keep sending your emails.

Paul: Yes, and it’s a pointless exercise as well. It’s like everything isn’t it. You want to make that conversion rate as high as you possibly can. It makes sense.

Fabio: Right.

Paul: So thank you so much – that is absolutely great stuff. A really nice insight. Could you do me a favour?

Fabio: Sure.

Paul: You’ve mentioned so many great resources there, it would be great if you could drop me an email with a load of those in.

Fabio: Absolutely.

Paul: And then I can include them in the show notes, and get all of them rather than trying to pick through a podcast which is always difficult.

Fabio: Yes, I agree. I will do that.

Paul: Excellent. Thank you very much Fabio, it’s wonderful to have you on the show. Great to talk about what is a minefield to be honest. And I still have huge respect for you, working in a very challenging area.

Fabio: Thank you very much for having me, was fun!

[Music]

Paul: So I think we have to conclude he was a genius.

Marcus: Yes. Yes.

Paul: There we go. What an amazing guy.

I wouldn’t want to do his job….. can you turn off Whatsapp, please Marcus?

Marcus: It’s my friends! They are all buzzing me, asking me if it’s Friday. Yes it’s Friday! I said. And that’s the worse thing to say isn’t it.

Paul: Yes, do you know you actually made me look then. I got all excited for a minute then. Well, I still have got all the work to do, it doesn’t go away does it.

Marcus: No, and you’re semi-retired now anyway, so what difference does it make? ‘Monday don’t mean anything to me’ now, who sang that?

That was…. Alabama 3.

Paul: There you go, I’ve no idea what you’re talking about now. I imagine it’s something music related?

Marcus: It is music related, yes.

Paul: So before we hear your terrible joke, it comes to something when the sponsor bit is more exciting than the content of the podcast. I’m more excited talking about MediaTemple than I am listening to your joke.

Marcus: That’s very hurtful Paul.

Paul: I know, it was meant to be.

[Laughs]

So I thought I’d share a bit about the hosting platform I use at MediaTemple. Because we talked about the WordPress one last week, but that’s not the one I use, although I think that might be what I need to be using. But anyway, that’s another story. At the minute I use their DV service, which is basically a managed virtual private service. So you have your own virtual private server. And they’re so fast. It’s unbelievable. Since moving across to that I have had no problems for performance on Boagworld at all. And I used to be up and down like a yo-yo, my site. Because when I produced a particularly interesting post that would get passed around a lot I would get a spike in traffic and I would have all kinds of problems. But I don’t anymore.

Marcus: I thought it was your dreadful coding.

[Laughs]

Paul: Ok yes. That was a significant factor in it. I will give you that.

Marcus: You asked for that. Saying this bits more interesting than my wonderful jokes.

Paul: Yes. So part of the reason why it performs so well now that I’ve moved across to these virtual servers is that they are all Solid State Drives, these servers with loads of RAM in it. It’s obscene. So, they’re super-fast. They promise—I’m not a great fan of uptime, but as uptime numbers go, this is a pretty good one—they’re uptime is 99.999%. So I was trying to work out how often your server goes down, and that’s not very often. So they do automatic back ups which is great for me, as we know from when I said about me trouncing the Boagworld database. And they come pre-installed with a super stable version of LAMP. You don’t even know what LAMP is, do you?

Marcus: I do actually.

Paul: Oh there you go. Well done. I’m very tempted to ask you what LAMP stands for, but I am not going to because I am nice. You get a choice of control panels….

Marcus: I do know what LAMP is actually, but I can’t really remember. Somebody helped me set up a site locally once, and I needed it. That’s all I know.

Paul: Yes, I know. To be honest I can set up LAMP but I have to say it’s really nice that it’s pre-installed these days because I am not convinced I would do a particularly good job at it, I have to say. This is why I have Ian and Dan and I can say ‘Pretty please?’.

Marcus: They are not yours anymore.

Paul: Yes, I know but…

Marcus: But you just ring them up anyway…

Paul: I ring them up anyway…. I know. I’m bad aren’t I?

Marcus: You don’t care.

Paul: Yes, something like that. And so I’ve got a choice of control panels as well which is nice, either Plesk or cPanel which is nice, in case you care about such things. I know what both look like, I couldn’t tell you which one was better over the other, but I am sure for developers its super exciting that you have the choice of control panels. What I do like is that you can instantly install hundreds of apps which means again I can’t break things which is good. And it’s got the latest versions of php, mySQL, perl, python, ruby… blah, blah, blah, lots of other kind of cool things.

They’ve got a really good 24/7 support – again very important if you are me. And they scan for performance and security problems – again very important if you’re me. And most important of all, it is very easily scaleable. So you can scale up and down depending on the load going on the server and all that kind of stuff.

So you can get a special discount for Boagworld listeners using the Promocode BOAG for 25% off your web hosting, go to Boagworld/Media Temple and enter the Promocode upon signup.

Marcus what’s your joke?

Marcus: Right. Nobody sent me any jokes.

Paul: I don’t think anybody listens anymore. That’s the only explanation for the lack of jokes.

Marcus: I do get the odd one, but I haven’t got any that I can use, so we are still on Tommy Cooper I am afraid.

Paul: Hang on a minute, let’s set some criteria then, in terms of what you can and cannot use.

Marcus: Well, I don’t use racist jokes.

[Laughs]

I don’t use dirty jokes although there is probably a line there that could be crossed. But no, I can only say that I will read some of them and go ‘No…no…no…’ and then go ‘Oh yes, I like that one’.

Paul: So it’s more that they have to pass your personal test?

Marcus: Exactly and I can’t tell you what the criteria is there.

Paul: No, that’s fair enough. Hey talking about racism and sexism and things like that. You must be deeply upset about Jeremy Clarkson getting suspended, because he’s your hero, isn’t he?

Marcus: No.

Paul: Are you sure Marcus?

Marcus: No, I think that he is a very good presenter.

Paul: Yes he is.

Marcus: But no, he’s a bit of a twerp really.

Paul: Yes absolutely.

Marcus: I don’t think he’s as much of a… I don’t think he’s evil, like a lot of people think he is.

Paul: Oh no, he’s just a bit of a pillock isn’t he?

Marcus: Yes, he’s kind of public school boy… I can imagine him being a bit of a bully when he was at school and he still has that kind of…occasionally he has that kind of ‘Let’s just break things for fun’. And you just think ‘You’re a twat’. But equally then he’ll just do something that’s really kind of, that has a bit of depth to it. And you think ‘Hang on a minute, he has got a bit of a brain’. So it’s basically depending on what he’s talking about as to whether I think he’s any good or not.

Paul: So if you were the General Director of the BBC would you fire him?

Marcus: Oh, that’s a tough one, because it’s all about money at the end of the day.

Paul: He earns so much money, it’s incredible.

Marcus: I don’t know who the Producer was, who he had the fracas with. But if it’s Andy Wilman—like the producer of the show—I think he owns more of it than Clarkson does.

Paul: No it wasn’t him, it was someone else. So it’s difficult isn’t it? A very difficult one.

Marcus: If I was the head of the BBC I would take a very pragmatic view, and I’d say ‘Jeremy I would like a public apology from you and I’d like you to pay this man or woman some compensation and then we can get back to where we were’.

Paul: Yes, I am interested to see what’s going to come out of it. Ok I managed to stall this joke as long as I can now. I think it’s time to get it out of the way.

Marcus: I’ve got two. Well, there’s a hundred of these Tommy Cooper ones, so I’ve picked a couple.

Paul: Well they are short aren’t they?

Marcus: They are very short.

The Police Station toilet was stolen. They have nothing to go on.

[Laughs]

Paul: I like Tommy Cooper jokes.

Marcus: So do I.

Paul: I think they suit your style also Marcus. They are so short, you can’t really screw them up.

Marcus: Oh I don’t know. But this one, I really like this one. This is an English joke.

I bought some HP Sauce the other day, it’s costing me 6p a month for the next two years.

[Laughs]

Paul: That’s quite clever, but nobody outside the UK is going to get it.

Marcus: No.

Paul: Do you know – let’s not explain it either. If they don’t know, then that’s their problem, I say. I am now channelling Jeremy Clarkson.

[Laughs].

So there we go – that’s this week’s show. Now you’re going to want to know who is on next week’s show.

Marcus: Who’s on next week’s show, Paul?

Paul: I don’t know… let me have a look. One day. One day I will remember to do this.

Marcus: Would be quite funny if I knew and wasn’t saying.

Paul: It is a good one actually. It’s Abby Covert talking about Information Architecture.

Marcus: Yes indeed.

Paul: Scarily clever woman. One day I will open it up and go ‘Oh, oh it’s just so-and-so’.

[Laughs]

And it will be a massive disappointment as I am really bad at hiding about how I feel about things. ‘Oh god it was a terrible interview’.

Marcus: Well we just won’t publish it if it’s rubbish.

Paul: No, that’s true, although it’s kind of an embarrassingly awkward situation to say ‘You were too shit to be included on the show’.

Marcus: Or we lost it…

Paul: Oh yes!

Marcus: …the file was corrupted. There you go.

Paul: You are a much better liar than I am. You can do it! See that’s why you are the salesman, you’re a good liar!

Marcus: Don’t say that. It’s so not true. People can see through if you are making it up.

Paul: Yes they can, it’s very true. So there we go. That’s it for this week. Join us again next week for Abby Covert – presuming that neither myself nor Marcus are suspended in the meantime, pending disciplinary action, and then we’ll talk to you then. Bye!

Marcus: Bye!

Boagworks

Boagworld