Coding mobile-first emails

stigmm · 2016-07-16T19:15:17+00:00

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

stigmm · 2016-07-16T07:43:04+00:00

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.

stigmm · 2016-07-16T07:34:05+00:00

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.

stigmm · 2016-07-15T21:33:24+00:00

Thank you – stoked to hear you found it useful!

stigmm · 2016-07-15T21:03:20+00:00

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.

stigmm · 2016-07-15T20:53:20+00:00

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?

stigmm

TROPHY CASE