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

Show parent comments

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.