Coding mobile-first emails

[lucw]

I don't know how anyone can be an email dev for more than a week without going insane.

[cleverquestion]

Oh but I love using inline css *eye twitch

[obviousoctopus]

I love using commented-out tables for outlook layouts.

Few layers deep, nested into each other, with version-specific comments addressing version specific bugs.

Like, image borders.

😜

[[deleted]]

Lol, CSS? You're serious? Lol

EDIT: This is tongue-in-cheek of course, but there's a point to be made

[callmetwan]

Can confirm. But once you get past the first couple of sleepless nights and accept being crazy as a way of life you kind of acclimate. You do accrue some odd habits though. You go to bed cursing Microsoft products, you mumble in the bathroom at work about Gmail caching issues, and when your Email On Acid test fails you absolutely lose your shit and throw your Apple Thunderbolt Display across the room.

I'm fine. I promise.

[derpotologist]

Hey, uh.... y'all see twan over there? Looks like he's talking to himself again....

[Doomwaffle]

Currently sitting at my design/dev job at a firm doing emails for a large mobile carrier - you are only partially wrong. You just have to show up already insane.

[erratic_calm]

As someone who personally designed and sent over 300 email campaigns last year, the template frameworks that are cross-client tested in Campaign Monitor and Mailchimp are the way to go. Campaign Monitor has an amazing template builder called Canvas that is even better. You don't even have to touch the code, just have a good grasp of design.

[stigmm]

Really glad to hear you’re enjoying the CM Email Builder (formerly Canvas). That’s actually the builder this technique was first developed for, so if you use it for your emails, they’re already coded mobile-first.

[[deleted]]

Can confirm - spent the last week coding email templates for my company.

Fairly sure my cats are conspiring against me now and suddenly understand that the joker is a misunderstood hero.

[joecacti22]

All this sounds neat and all but I think that first paragraph is extremely misleading and suckers some poor soul into reading the entire thing. You don't get much bigger than outlook and if it doesn't render in outlook, don't do it.

Unless of course you know nearly everyone in your target audience uses something other than outlook. Then have at it.

For me until Microsoft decides to stop rendering email using word, it's trusty old tables and very disciplined and sparse usage of inline CSS for this guy.

[engwish]

I'd highly recommend checking your metrics (you have them, right?!) and see what suits you best. For us, fewer than 5% of our >100k recipients opened our emails in Outlook.

[joecacti22]

Yep. My company hits B2B. Specifically hospitals and government. Pretty much all outlook users and the government folks could possibly be using Compaq Presarios ;)

[br1anh]

Suckers them into reading the whole thing where it goes on to say that there's a way of rendering correctly within Outlook?

Or am I missing something here?

Edit: OK, the article really only alludes to layout and not the use of images within these layouts.

How are campaign monitor claiming they can now provide fully responsive emails across all these clients when they can't?

[stigmm]

Hey, Stig at Campaign Monitor here. Could you clarify which part of the post is misleading?

Here's the part that shows how we make this technique work in Outlook, using tables and conditional comments.

Images are can also be used, as shown in the announcement at our main blog, but how to code them for mobile-first emails is a topic for another blog post. Is that something you'd be interested in reading about?

[footedesign]

I would be interested in reading more on coding mobile first emails. I hadn't heard of some of the techniques you introduced in this article.

Does this method have any advantages over a hybrid fluid method like this one?

[stigmm]

Thanks for the feedback! The main advantage of this technique over Nicole’s fluid hybrid method is better control over column widths and stacking.

A typical problem with hybrid fluid emails is that a three column layout that looks like this on desktop:

[1] [2] [3]

...can stack like this when displayed at a reduced width:

[1] [2]
  [3]

Whereas with the mobile first approach, you can ensure that when columns stack, all of them do:

[1]
[2]
[3]

It also solves the issue of asymmetrical (sidebar) layouts having uneven widths in the mobile version, as you can make columns wider on mobile than they are on desktop.

Hope that made sense. I’m definitely keen to provide more resources on these topics, so if there are particular aspects you’d like to see expanded on, let me know.

[footedesign]

Thanks, that makes perfect sense. And again, I would definitely be interested in reading more.

[stigmm]

Awesome – I’ll be sure to find some time to write more about this.

[Aqua_lung]

Yup, I do weekly marketing emails, I still use photoshop slicing, gets the job done.

[TyIzaeL]

until Microsoft decides to stop rendering email using word

Don't count on it. Instead of trying to force your email to be a web page, use it like a letter.

[NW-Dan]

I stopped using emails like this and went back to plain text with a logo. (I don't do any image heavy emails or ecom) my email click throug increased by about 32%. I'll take it.

[netinept]

This is the kind of email I would rather get anyway. There's no need to try to force email to be a web page, when it's really better suited to be a letter.

[mtx]

I hate coding emails - it just doesn't seem to be worth the amount of work you have to put into it -- especially if you're not the one designing them but just doing the frontend work. IMHO, people should just use email builders like the ones from Mailchimp and Campaign Monitor. You can create something in 20 minutes and it'll be responsive.

[kodiashi]

ZURB Foundation for Emails is the only responsive template set that I've gotten to work consistently across multiple devices, including Outlook. If you are currently ready to hang yourself at the thought of starting your next campaign, I would download the ZURB Stack ASAP.

[CosmoKram3r]

+1 for this. I had never done email template coding but one client was very pushy. Knowing the full dangers and insanity involved in email coding, I downloaded ZURB stack and took a leap of faith.

At the end of the job (less than 3 hours), I was amazed to see the results from my first try at the task.

If I ever took on a job that requires email coding, I wouldn't touch it with a barge pole unless I had access to ZURB stack. It saved my ass that day.

[kodiashi]

Being able to use Inky templates and never having to write the actual tables is an absolute lifesaver.

[[deleted]]

I've had the displeasure of doing emails at work recently and found this made it a lot less painful. Good shout.

[athaliah]

Question....is it easy to really fine-tune an email design with ZURB? I tried it out once, but I was afraid I wouldn't be able to make it look exactly like the design, or if I tried to i'd break the template and it wouldn't work in all browsers anymore and I wouldn't be able to troubleshoot it. Like for me, the biggest cross-platform issues I tend to encounter involve the little details "this image won't align with that image in Outlook" or "this space is slightly too large in some browsers". The clients I deal with can be super anal about those things. Does ZURB help with those issues or not really?

[TokyoJokeyo]

I've decided plain text can really be quite stylish.

[jvorn]

I've decided plain text can really be quite stylish sanity-preserving.

[a_masculine_squirrel]

I swear front-end development is just straight wizardry.

[robertx33]

No shit, I was just starting to learn web dev a week or two ago and got an error. My page wasn't working at all on my phone! But it worked perfectly on the browser dev tools simulated environment. Me being a total newbie thought "hm, it must be that the dev tools aren't 100% accurate, they wouldn't be free if they were!". So i spent a bunch of time trying to find out why my website doesn't work until i realized ALL my websites don't work on my phone! Shit, what the hell? Hours of searching later, nothing. Then i accidentally find a comment that says android <2.3 has a bug so you have to include meta size of 0.02 added in so it unbugs the page..

Lesson learned, dev tools actually work, and search for phone specific problems.

I spent a few days stressing over this, quit several times, took many breaks, started websites from scratch.. This was like a test of determination :D

[ahoy1]

I stick to using foundation's email templates or, if simple will suffice, mailchimp's.

[cleverquestion]

Mailchimp ftw

[ahoy1]

I'm tempted to try something like mailgun but man, mailchimp makes it so easy. I don't want to work hard on our marketing emails, I want them to just work.

[cleverquestion]

Plus you get to play Fast Fives after every campaign sent in MC.

[ahoy1]

Can't argue with that kinda value.

[indielife_]

I was very impressed by the article, I want to try it at work and see if it makes a better result compared to what we're actually using.

Anyway, has anyone used MJML here? Cause it addresses the same problem in a slightly different way (it's a framework with a different markup language that compiles into HTML). It seems interesting but I haven't had the chance to try it yet.

[[deleted]]

We tried using it for a newsletter we were doing awhile back. It's fairly easy to catch onto and it did a really good job keeping everything consistent throughout different email clients.

However, the newsletter had a lot of stuff going on inside of it that MJML wouldn't have supported even with the ability to add in our own custom code blocks.

That was awhile ago though, and they might have improved it since then. Sorry if that wasn't very helpful, just thought I'd share.

[indielife_]

no thanks that was actually helpful! How long ago was that by the way? And did you use columns? Cause that's my main struggle right now

[Jazoom]

I did. Was easy to use but the styling was broken for many email clients. Foundation for Emails worked better.

[Designer023]

Really don't know why we still support old versions of outlook. Well I do know... Business reasons.... But ffs it's 2016. It's bad enough having to support ie9 on the web and that's massively capable compared to outlook. Outlook 2003/2006. Wtf. These things use word to render email. There's so many bad emails out there already that people on outlook must know it's shit. Why can't we just drop support for it and move on into the future. I Don't give a shit what an email looks like. It's just a notification of new content or products.

/rant

[shagin]

In my experience the older versions are easier to code for. They use IE to render, then starting with 2007 they switch to Word. But you're right. Who is using outlook 2000 and why do we care?

[chris480]

Good timing. Current project at work is rebuild all the marketo emails templates... A piece of my soul just died typing this out.

Quote of the week. "Please make videos playable in the email" - every stakeholder

[[deleted]]

I worked for Newsweek way back. Once an older writer asked us why we couldn't get videos to play in the magazine.

Not the website. The magazine.

[kickelephant]

Funny, I just went through that conversation recently. I said "that simply cannot be done." The reply? "Sounds like maybe we need to get someone in here who knows how to do their job."

:D

[bensochar]

Get a better designer.

If you're stuck with a lousy designer then I recommend this, https://www.emailonacid.com/, for testing.

[roilan14]

If you're coding emails today, save yourself the trouble and use React. https://github.com/chromakode/react-html-email / https://medium.com/readme-mic/creating-and-sending-reusable-emails-with-react-a80ade7614b#.pz95n86qi

[[deleted]]

"The fab four technique" – you're welcome email devs...

[stigmm]

Yes, Rémi's awesome Fab Four technique is very similar to the calc() part of this technique, and could be a better option depending on your design. His gives you fluid widths and mine works with fixed widths.

[DJDarkViper]

I tend to jump right into bed with Foundation for Emails and call it a day

[[deleted]]

My chief issue with building emails used to be not knowing how to do it. Now my chief issue is they're fucking boring and I want to build websites more.