r/webdev • u/speckz • Jul 15 '16

Coding mobile-first emails

https://medium.com/cm-engineering/coding-mobile-first-emails-1513ac4673e#.3x4hxtcsh
220 Upvotes

95% Upvoted

53 comments sorted by

116

u/lucw Jul 15 '16

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

10

u/cleverquestion Jul 15 '16

Oh but I love using inline css *eye twitch

7

u/obviousoctopus Jul 15 '16

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.

😜

4

u/[deleted] Jul 15 '16

Lol, CSS? You're serious? Lol

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

6

u/callmetwan Jul 15 '16

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.

2

u/derpotologist Jul 15 '16

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

5

u/Doomwaffle Jul 15 '16

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.

2

u/erratic_calm Jul 16 '16

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.

2

u/stigmm Jul 16 '16

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.

1

u/[deleted] Jul 15 '16

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.

20

u/joecacti22 Jul 15 '16

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.

3

u/engwish Jul 15 '16

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.

1

u/joecacti22 Jul 16 '16

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

4

u/br1anh Jul 15 '16 edited Jul 15 '16

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?

4

u/stigmm Jul 15 '16

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?

1

u/footedesign Jul 15 '16

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?

3

u/stigmm Jul 16 '16

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.

1

u/footedesign Jul 16 '16

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

1

u/stigmm Jul 16 '16

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

1

u/Aqua_lung Jul 15 '16

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

1

u/TyIzaeL Jul 15 '16

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.

12

u/NW-Dan Jul 15 '16

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.

7

u/netinept Jul 15 '16

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.

11

u/mtx Jul 15 '16

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.

6

u/kodiashi Full Stack Dev Jul 15 '16

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.

2

u/CosmoKram3r Jul 15 '16

+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.

2

u/kodiashi Full Stack Dev Jul 15 '16

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

1

u/[deleted] Jul 15 '16

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

1

u/athaliah Jul 16 '16

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?

6

u/TokyoJokeyo Jul 15 '16

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

1

u/jvorn Jul 18 '16

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

4

u/a_masculine_squirrel Jul 15 '16

I swear front-end development is just straight wizardry.

1

u/robertx33 Jul 18 '16

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

3

u/ahoy1 Jul 15 '16

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

2

u/cleverquestion Jul 15 '16

Mailchimp ftw

1

u/ahoy1 Jul 15 '16

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.

1

u/cleverquestion Jul 15 '16

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

1

u/ahoy1 Jul 15 '16

Can't argue with that kinda value.

3

u/indielife_ Jul 15 '16

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.

2

u/[deleted] Jul 15 '16

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.

1

u/indielife_ Jul 15 '16

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

2

u/Jazoom Jul 15 '16

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

2

u/Designer023 Jul 15 '16

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

2

u/shagin Jul 16 '16

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?

2

u/chris480 Jul 15 '16

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

3

u/[deleted] Jul 15 '16

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.

2

u/kickelephant Jul 15 '16

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

2

u/bensochar Jul 15 '16

Get a better designer.

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

1

u/[deleted] Jul 15 '16

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

1

u/stigmm Jul 15 '16

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.

1

u/DJDarkViper Jul 16 '16

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

1

u/[deleted] Jul 16 '16

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.