I love this...but I'm wondering about font sizing. Is there a way to increase the font size for the Gmail app?

Hi Nicholai, if I understand correctly, you can change the font size by nesting your text in either something like < td 12px;" > or < span 12px;" >. Let us know how you go :)

link to JSFiddle doesn't work for me

how will this look in yahoo and outlook 2002-2003? i know that they break everything!

@Bram - Sorry about that, JSFiddle is unfortunately experiencing a DDOS attack at this time, so you might want to follow them on Twitter for updates. Hopefully we'll have this code available to you soon.

@Sergiu - Hah, great question! My reasonably-educated guess is that it will work in older Outlooks too, as they use IE for their rendering (and should make use of the conditional comments above). Yahoo isn't too bad, either - as it supports max-width & min-width, I can't see why it wouldn't work out. As always, test test test :D

AMAZING! I've been trying to get this work across a lot of clients. Thank you so much for sharing.

Hi there William, you're more than welcome to post your code in our forums, as we have an active community there (including ourselves) that would love to take a look and suggest fixes. Hopefully we'll see you there!

@Sergiu This method definitely works in Yahoo, Outlook 2000/2002/2003 and it will even be responsive in the Yahoo app on smartphones. The conditional code takes care of every version of Outlook.

@William: Yahoo has always tested fine with this method, is your browser window perhaps a little small? As soon as your viewing area for the email is narrower than the outer table (600px in this case), everything will start to stack, as it's intended. If that's not the problem then definitely jump in the forums and let us know!

Is there a way to get this to work if the columns are not equal widths? say one is larger than the other column.

Hi there Teresa, sorry for the late response here. To confirm, the columns can be any width - even or uneven - for this technique to work. Let us know how you go :)

Great tutorial! Is it possible you could show all of the HTML together? It makes it easier for me to see.

Also, I am a little confused regarding multiple rows. An example of this would be great!

Thanks

@Nicole, Hello, I am trying to get my head around this solution in a real world build. Do you have any examples of a full layout, with single columns for example? I am struggling to not have to use media queries for say a single column section which will need to conform to the 300px width we have applied to these two columns. Any ideas? Do I go ahead and just use media queries?

Hi there Adam and Richard, check out the JSFiddle we linked to above. There's an instructive example there with a multiple-row layout. Let us know if you still have any questions :)

Richard, if still stuck, feel free to post your code in our forums, with a few notes on where you're seeing issues. We'd be happy to walk through it with you and provide hints where we can.

This solution works great! Quick question.

I have two columns - text on the left and image on the right. I need them to stack image on the top and text on the bottom. Has there been a solution that would work based off this method?

With just using the method above it stacks text on top and image on bottom.

Thanks for any help you can provide.

Hi there Ricky, there are two things you can try:

1. Changing the order of table stacking using dir=rtl (recommended)

2. Making the image inline and using this technique to have the text flow around it - while the image should display inline in desktop clients, it should slip above/below the copy on mobile

Let us know how you go and best of luck!

@Richard — I also wrote a tutorial over at Tuts+ that you can check out here. It should answer your questions. I wrote it before discovering this trick though, so it doesn't include a method for centering like this article does. They would be best used together :)

@Adam — when using multiple rows, you just need to pretend to Outlook (using more conditional code) that you are closing the row and starting a new one. Always make sure you have the same number of columns in each row in your conditional code. Here's a quick example.

Great tutorial.

Just one heads up!
In the first line of code on this page:
<table class="”container”" width="100%" cellpadding="”0”" cellspacing="”0”" 600px;"="">

Are two different types of quotes.

Because of this the two divs would only stack at first.

Seems I can use HTML in the comments.

I mean this one:
table class=”container” width="100%" cellpadding=”0” cellspacing=”0” style="max-width: 600px;"

Kind regards

Hi there Roy, thanks for pointing out the "smart quotes" here - it looks like those were missed when we pasted the blog post into our CMS. I've fixed this up now, so all the code samples should have regular quotes now. Thanks for that!

Thanks for the article.

Based on my Litmus test Gmail (explorer, chrome, firefox) and Yahoo (explorer, chrome, firefox) are all rendering the code as a single column stack.

I am I doing something wrong or is this the desired behavior for these email clients?

Cheers,

Has anyone tested this coding approach in Litmus? If so are you seeing similar results to what I posted above?

Thanks for the help

Hi there Iam, this isn't the intended behavior, so I suspect this might have something to do with the preview pane being narrow enough in Litmus to force the "1 column layout" to appear. Have you tried a live test in Gmail / Yahoo, with the same results?

Iam: for that very reason, we stopped using this trick; it's just not worth the headaches that we encountered in Gmail as used on the smaller laptop screens. Nowadays, we just make sure that the email sizes down properly in the Gmail app while at the same time, the email is awesome in the native iOS and Android mail apps.

Thanks Ros, I can't believe that did not occur to me. I will have to do more live testing. I really appreciate you getting back to me here. Responsive design can be such a pain.

Jerry, thanks for your comment. I can see that as a legitimate option. However, I would argue that the "correct design" will allow for the flexibility of all preview pains and small screen devices. In my opinion your trading a better user experience for less headaches in the development stage.

Cheers, and thanks for the comments.

This is such a great post, couple it with your blog post here (http://webdesign.tutsplus.c... and this is so powerful.

Re: Iam - Please let us know the results of your findings, I'm interested to know as I'm seeing the same thing.

Aside from this, seems to work perfectly - so now I need to make this work with 3 or 4 columns! Has anyone managed to do this at all? When I tried a similar approach with 3 columns, Gmail decides to only drop the third column onto the second row.

@Jerry — totally understand your comments regarding the fact that you end up seeing the stacked version of the email when you're in any client on a small screen. It's a tough one, because that is 100% how this method is designed to work, and in my opinion it's a better if someone on a really small laptop screen sees the responsive version of an email, designed for the amount of space they have available, rather than them having to scroll sideways. But I understand that we are so used to seeing the "desktop version" in webmail and that it can be confusing to start seeing responsive behaviour in Gmail or Yahoo. But if you design for this scenario, I think it's a million times better.

@Ian Grimus — I think this is what you are saying too, and I agree with you.

@Chris Lock — Thanks so much for your kind words! You are spot on to use both tutorials together :) I hope to write a unified version soon.

You can definitely use this approach with any number of columns, but unfortunately you can't control the fact that sometimes the width of the viewport means that just one of the columns bumps down to the next row. The only real way to get around this is to always use two columns, or to fake 4 columns by putting two columns into one (example here).

Iam: I agree 100% that we are probably trading usability for less headaches, but unfortunately, with how things work on my team, that's just the way things have to be. The main issue is that we don't always have control over the design that we are coding and any advice given to the client tends to fall on deaf ears. It's better when we are doing the designing and coding of the email, though.

Sorry — I noticed that I had written the wrong names next to some of my replies, and I have edited my previous comment so that it is now correct :)

Nicole: There is no side scrolling in Gmail desktop and/or the Gmail app with our messages as they shrink down to fit small real estate availability. For the most part, this really isn't an issue, but if a customer insists on having a four column layout (say, four products on a row), it could be an issue with those that require reading glasses using a small smartphone. For our customers, though, that's better than having three products on the row and one bumping down to a new row. That tends to get really ugly if the customer's message has four rows of products in it.

This works for me somewhat... But when it test this in a mobile emulator the tables do not collapse?

Hi there stephen, this is really curious! We'd love to see what you're experiencing here, so by all means, kindly contact our team with emulator/email client details if you'd like us to take a look.

Hi there,

I have implemented the code mentioned above and tested it across different clients. So far it's working in all clients except for windows phone. In windows phone 8, I want to maintain the two column layout and not single column layout, because windows phone does not zoom the content. Can I do that?

Hi Sumeet, although it may not be in the spirit of this article, you may want to create a media query specifically for Windows Phone 8. The following two articles will help you do this for different handsets:
- Responsive Design in IE10 on Windows Phone 8
- Windows Phone 8 has FULL CSS3/Media Query Support

Let us know how you go :)

I managed to remove the font-size: 0 (spam sensitive) by joining the conditional comment to the DIV tags. Also using the lang tag and deviceWidth fixed width in styles, its now fluid on gmail. :)

http://codepen.io/paul1973/...

Hi Nicole,

I have used you solution and it works perfectly. But I have one problem. In my HTML, I have alternate image and text in the tables (e.g. In the two sub tables, I have text in first tabel and image in second table and for next it will be image in first table and text in second table). So in the mobile view, it looks like text-image-image-text. But I want it to display like image-text-image-text. Can you help please?
Thanks!

Hi there Sumeet, have you tried using the dir attribute (eg. dir="rtl") to change the order of your content? We've outlined this technique here - let us know how you go :)

I tried the same thing yesterday and it worked for me...thanks for your quick response, really appreciate :)

Hi Ros

First of all thanks for this trick, it helped me greatly. However there is one thing I'd like to add to save some headache for others.

In cases where your columns only contain image content things can get strange. If those images set to responsive behavior this inline-block div might act like it's empty. Some clients(android, some apple ones) take this as an empty div also therefore hides them.

In this situation setting a min-width to the images helped me. I almost killed myself before I found this. It's probably common knowledge but wanted to share in case someone runs into this issue.

Thank you so much for sharing this, Raskoln - I'm sure your hard work will certainly help others! Hope things are looking more positive with your email design now :)

Hi Ros,
the borders are showing only in Outlook 2011 and 2015, no borders in other Outlook versions and some other email clients as well. Also in Gmai (IE, Firefox, Chrome), the 2 tables are stacked on desktop and no borders are showing. In Yahoo you can see something like a 3rd column on the right.

Very interesting, Vic - any chance you can share your findings on the forums? We'd love to take a look!

Ros, how would you modify your code (JSFiddle) to do a 3-column layout?

Hi Mark, I'll look to getting this JSFiddle/post updated to answer this question; in the time being, I really recommend you take a look at the code used for this 3-column layout created using our email template builder. I think you'll find the answers you're after there :)

Ros, that layout is not fluid in Gmail app. Moreover, it's not responsive in Android's built-in client (4.x) and alignment of the last block in iOS built-in client (8.x) is off. Unfortunately it's a poor example :)

If you could update your example with a 3-column layout, that would be sweet, especially since it's fluid in Gmail app (columns collapse).

I personally avoid placing the tables as siblings. For me it's always better to stick with table cells :) I'll try this method on my next project.

Thanks!

Has anyone resolved the 3 column issue please?

In particular 2 equal width with one 'spacer' in the middle..?

Fingers crossed...!!

This doesn't work for Outlook 2007, 2010 and 2013. I've tried everything to get it to work and the columns stack.

Hi DMA and Brett, would it be possible for you to post your code in our forums? We'd love to take a look at why this isn't working as desired. Thank you so much!

Following on from Brett's post (23rd April) I did look for a post to the forum on this but I was unsuccessful. Please could someone point me in the right direction?

Hi there Leon, I'm sorry you couldn't find the answers you were after. If you aren't comfortable posting to the forums, we're happy for you to send your campaign to our team. While we can't always solve email coding issues, one of us may be able to point you in the right direction. Best of luck!