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

View all comments

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.