Fluid/Responsive Email Design Techniques. %'s vs Fixed Widths....?

So I'm looking at the options for creating a responsive email template. In an ideal world I would like it to fluidly responsive (using width %'s rather than fixed values for cell width)...

I would still be using media queries to move the distance between desktop/tablet and mobiles...but would like it to be fluid enough to move between landscape and portrait comfortable on each respective device.

I've been reading through the Campaign M. resource documents...and in the general how to design emails article...it mentions something about %'s being awkward and not really very reliable, but then goes on to encourage them in the responsive email design article.

So now I'm a bit confused. Do they work, don't they work? Does anyone have any experience with successfully crafting a fluidly responsive email template using %'s that is cross browser/device compatible?

Any other suggestions/thoughts/tips out there? Is the idea of a fluidly responsive email just not quite viable yet?

Thanks!

roshodgekiss roshodgekiss, 4 years ago

Hi again graphicgoose, you may find the notes and comments in this blog post throw a little more light on this. The skinny is that % widths tend to work more reliably on mobile devices, than they do in desktop clients. So what we usually recommend is that you use the media query to force a table layout to be fluid below a certain threshold, eg.

@media only screen and (max-width: 568px) {
   table#container { width: 90%; }
   ...
}
...
<table id="container" width="600">...</table>

I can see why you're getting this mixed, "Use fluid... But don't use fluid" message - sorry for not being clearer here, I should really work on that. As always, keen to hear what others have to say about this, as responsive design discussions always tend to open an interesting can of worms :)

PS: Sorry for being tricky with the max-width: 568px - that's what the iPhone 5 is asking for these days ;)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
graphicgoose graphicgoose, 4 years ago

Ahh, ok! Well that's awesome then. Wonderful, thank you for clearing that up!

I'm sure it's pretty hard to keep all the resources up to date with constantly adapting technology and techniques, but the articles are a huge help.

roshodgekiss roshodgekiss, 4 years ago

Thanks graphicgoose - double thanks for the encouragement to clarify details like that. If there's any email topic you would like to see us write about or clarify, don't hesitate to get in touch :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098