Creating a centered, responsive design without media queries

By Nicole Merlin on 25th July 2014

This was a technique discovered while we were working on Canvas. While it didn’t make it into the final product, we think it’s worth sharing anyway.

Getting responsive emails to look nice in the Gmail app is a never-ending challenge because of its infamous lack of support for media queries. I've previously blogged and written about ways to get a fluid email to look great in the app, but it comes at a design cost; you have to keep one column fairly narrow so that the other column will be wider than a mobile viewport and thus, when viewed on a mobile screen, take up 100% of the screen.

But what everyone wants to do, of course, is have equal-width columns that stack. Often this is achieved by using the align attribute to 'float' one table to the left and one to the right, but when viewed in the Gmail app (especially on larger mobiles), these aligned tables retain their positions, with undesirable results:

The solution that we discovered is to use display:inline-block in combination with text-align:center to get your elements to behave as if they are floating but centered. This just takes a little bit of fiddling to your overall template to get this to work.

Start with the fluid method

You need to create a table that is 100% wide with a max-width of your desired size on desktop.

<table class="container" width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px;">
	<tr>
		<td>
		</td>
	</tr>
</table>

Then, to appease Apple Mail, which doesn't respect max-width, create a media query to limit that table's size on desktop:

@media screen and (min-width: 601px) {
	.container {
		width: 600px!important;
	}
}

And wrap the whole table in some conditional code to appease Outlook, Lotus Notes and clients that render with IE:

<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td>
<![endif]-->

(your table here)

<!--[if (gte mso 9)|(IE)]>
		</td>
	</tr>
</table>
<![endif]-->

Our secret weapons:
Using text-align:center and display:inline-block

Add the following styles to the TD of the 'container' table:

<td style="text-align: center; vertical-align: top; font-size: 0;">

The text-align: center is simply to get the contents of the cell to be centered (our desired effect), and the vertical-align property is your choice of value. The font-size: 0 is to fix a spacing bug where space can sometimes appear between inline-block elements, which we'll be placing inside.

Now we need to start another table for Outlook/IE inside this cell. We'll add another conditional table the same as our first:

<!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td>
<![endif]-->

Now, inside our cell (and our conditional cell), we're going to place some divs with a display: inline-block property. As inline-block elements, they'll obey the text-align property on the containing cell (text-align affects all inline or inline-block elements in a container).

<div style="width: 300px; display: inline-block; vertical-align: top;"></div>

The most important things are to set a width (no more than half the width of the container) and to set the display to inline-block. The vertical-align is up to you depending on your layout.

Then inside this div, you can place your content inside a table.

<table width="100%">
	<tr>
		<td style="font-size: 12px;">
			Hello!
		</td>
	</tr>
</table>

You will need to apply a font-size to your table contents because we set it to zero on the container cell.

In between each of these divs, we're going to pretend to Outlook that we're closing our conditional table's cell and opening a new one:

<!--[if (gte mso 9)|(IE)]>
</td><td>
<![endif]-->

Then repeat your div to create another column. In our case we are creating two, so we'll add one more.

Finally, we'll close our conditional table

<!--[if (gte mso 9)|(IE)]>
		</td>
	</tr>
</table>
<![endif]-->

Now you have multiple blocks inside a cell that will reflow to fit the viewport. You can add as many inline-block divs as you like, but if you add multiple rows' worth, you will need to start a new conditional row for our Outlook table by inserting this code:

<!--[if (gte mso 9)|(IE)]></td></tr><tr><td><![endif]-->

Magic!

Here is how to visualize all our conditional jiggery-pokery:

See this in JSFiddle

And now you’ll have centered blocks in the Gmail app, as well as other apps that don’t support media queries, such as Outlook.com app and the Yahoo! mail app. You can then add media queries (for those clients that support them) to make the divs 100% of the width of the viewport.

Want to improve your email marketing?

Join over 20,000 other marketers & designers who get tips on improving their email marketing delivered directly to their inbox.

42 Comments

  • Nicholai
    30th July

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

  • Ros Hodgekiss
    30th July

    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 :)

  • Bram de Haan
    7th August

    link to JSFiddle doesn’t work for me

  • Sergiu
    7th August

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

  • Ros Hodgekiss
    7th August

    @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

  • Julio
    9th August

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

  • William Visalli
    26th August

    I tested this solution and it seems to work in most everything but Yahoo renders it like it would appear on mobile, stacking the columns. Granted I’ve only done a quick and dirty test of the above code, but didn’t know if anyone else had seen this and found a fix.

  • Ros Hodgekiss
    26th August

    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!

  • Nicole Merlin
    2nd September

    @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!

  • Teresa
    9th September

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

  • Ros Hodgekiss
    18th September

    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 :)

  • Adam
    23rd September

    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

  • Richard Bland
    24th September

    @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?

  • Ros Hodgekiss
    24th September

    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.

  • Ricky Gipson
    9th October

    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.

  • Ros Hodgekiss
    10th October

    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!

  • Nicole Merlin
    16th October

    @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.

  • Roy van Slooten
    22nd October

    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.

  • Roy van Slooten
    22nd October

    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

  • Ros Hodgekiss
    23rd October

    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!

  • iam grimus
    25th October

    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,

  • Iam grimus
    5th November

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

    Thanks for the help

  • Ros Hodgekiss
    5th November

    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?

  • Jerry
    16th November

    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.

  • Iam grimus
    19th November

    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.

  • Chris Lock
    19th November

    This is such a great post, couple it with your blog post here (http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email—webdesign-12978#disqus_thread) 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.

  • Nicole Merlin
    20th November

    @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).

  • Jerry
    21st November

    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.

  • Nicole Merlin
    21st November

    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 :)

  • Jerry
    22nd November

    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.

  • stephen barrett
    9th December

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

  • Ros Hodgekiss
    9th December

    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.

  • Sumeet Kakani
    12th January

    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?

  • Ros Hodgekiss
    13th January

    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 :)

  • Paul van Steenoven
    14th January

    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/pen/LEWWoM

  • Sumeet Kakani
    27th January

    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!

  • Ros Hodgekiss
    28th January

    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 :)

  • Sumeet Kakani
    29th January

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

  • Raskoln
    30th January

    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.

  • Ros Hodgekiss
    3rd February

    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 :)

  • Vic Dinovici
    27th February

    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.

  • Ros Hodgekiss
    27th February

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

Got something to add?

Sign up for free.
Then send campaigns for as little as $9/month

Create an account