Preview your email in the most popular email clients and mobile devices.    Try it for FREE!

Free Responsive Email Template - Part I

Posted March 22, 2013 by Michelle Klann

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

With mobile on the rise and so many of our users inquiring about best practices for developing responsive emails, we figured it's a great time to offer up a series of free email templates to get you up and running as fast as possible.

There are several approaches to responsive email designs. This particular template offers 3 different "layouts" which trigger based on the width of the screen. By default, it supports 1-3 columns and as you trigger each media query conditional statement, it converts to a one a column layout for easy reading on mobile devices.

Template Details

When developing this template, our first order of business was to research the most common dimensions that are used in popular devices today. With that study, along with our own media query test we've identified the most common device widths to target.

The breakpoints we've selected for this template are as follows:

  1. A width less than 480px for the iPhone and smaller smart phones.
  2. A width between 481px and 640px for medium sized Android devices
  3. A default dimension of 580px for tablets, web, and desktop email clients

What's interesting about the above dimensions is that the breakpoint for medium sized handheld devices is actually greater than the real-estate your email will get in most web and desktop email clients. For that reason, the default width for our template is set to 580px. This dimension is less than the media query dimensions that we've used for medium sized mobile devices.

You can mix and match each section of this layout and we tried to make it super generic because your needs will likely change over time.

This template has been tested in the following clients:

Android 2.3 - (vertical)
Android 2.3 - (horizontal)
Android 4 - (vertical)
Android 4 - (horizontal)
Android Gmail 2.2 - (vertical)
Android Gmail 2.2 - (horizontal)
iPad 5.0 - (vertical)
iPad 5.0 - (horizontal)
iPad Gmail - (vertical)
iPad Gmail - (horizontal)
iPhone 4S (iOS 5) - (vertical)
iPhone 4S (iOS 5) - (horizontal)
iPhone 4S (iOS 6) - (vertical)
iPhone 4S (iOS 6) - (horizontal)
iPhone 5 (iOS 6.1) - (vertical)
iPhone 5 (iOS 6.1) - (horizontal)
Kindle Fire 2.3 - (vertical)
Kindle Fire 2.3 - (horizontal)
AOL - Chrome 18 (Win)
AOL - Firefox 12 (Win)
AOL - IE 8 (Win)
AOL - IE 9 (Win)
Gmail - Chrome 18 (Win)
Gmail - Firefox 12 (Win)
Gmail - Firefox 3.6 (Win)
Gmail - IE 8 (Win)
Gmail - IE 9 (Win)

Gmail - Safari 5 (Win)
Outlook.com - Chrome 18 (Win)
Outlook.com - Firefox 12 (Win)
Outlook.com - IE 8 (Win)
Outlook.com - IE 9 (Win)
Outlook.com - Safari 5 (Win)
Yahoo! - Chrome 18 (Win)
Yahoo! - Firefox 12 (Win)
Yahoo! - Firefox 3.6 (Win)
Yahoo! - IE 8 (Win)
Yahoo! - IE 9 (Win)
Apple Mail 4
Apple Mail 5
Apple Mail 6

Entourage 2004
Entourage 2008
Live Mail
Lotus Notes 8
Lotus Notes 8.5
Outlook 2003
Outlook 2007
Outlook 2010
Outlook 2013
Outlook Express
Thunderbird 13
Windows Mail

So how'd we do it?

1.) Media Queries

Here's the entire style block:

<style type="text/css">
   .ReadMsgBody {width: 100%; background-color: #ffffff;}
   .ExternalClass {width: 100%; background-color: #ffffff;}
   body	 {width: 100%; background-color: #ffffff; margin:0; padding:0;}
   table {border-collapse: collapse;}
 
    @media only screen and (max-width: 640px)  {
      body[yahoo] .deviceWidth {width:440px!important; padding:0 4px;}	
      body[yahoo] .center {text-align: center!important;}	  	
    }
 
   @media only screen and (max-width: 479px) {
      body[yahoo] .deviceWidth {width:280px!important; padding:0 4px;}	
      body[yahoo] .center {text-align: center!important;}	 
   }
 </style>

We then used the 'deviceWidth' class on all tables and images throughout. This resets the width for each element based on the width of the mobile device. You could add more media queries if you want - feel free check out our latest research for more breakpoint ideas.

2.) Floating Elements

The next challenge was creating floating elements that naturally stack when there's not enough room for them to float. Floating elements for email is rather tricky because several email clients do not support the 'float' property. Instead, we used the 'align' attribute within table elements.

For example:
<table align="left">

Simple enough right? Well yes and no. Whenever you 'left' or 'right' align tables in Outlook 2007, 2010, and 2013, you end up with extra table padding. So if you are trying to accomplish a pixel perfect layout, you might want to check out this Outlook padding work-around for getting aligned tables to match up perfectly. In the case of this template, we used percentage based widths for each floating table and in some instances we had to rely on the '<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">' fix as defined in that blog post.

Conclusion

Obviously you will need to customize this template for your needs.  Just remember, you can keep it short and sweet for your mobile readers by hiding some elements within your layout using media queries. Both the Android and the iOS support the display:none property.

Hopefully this will save you some time and stress when creating your first responsive email!  Stay tuned for more creative solutions from Email on Acid.  Cheers and happy testing!

Comments on this Blog

Comments on this blog are now closed, but please feel free to contact us with questions about this template, or post questions in the forum.

Notice: This blog post is intended for educational purposes. The materials used, including but not limited to, artwork, research, coding techniques, and the overall layout are to be considered 'derivative' and in no way do we intend to infringe on any unknown copyrights. We give our utmost respect to the millions of designers and developers who continuously inspire us to learn and create.

If you'd like to obtain rights to use any of the fonts that where included in the artowrk of our template, they are availible for purchase online: Hand Gothic, Thirsty Rough, Thirsty Script, Veneer, Sanchez Slab.

Comments

gigijin pic
gigijin
Great one! Looking forward to Part II. Thanks!
Posted 03/22/2013

Samantha Armacost pic
Samantha Armacost
In your list of clients you tested in it includes BlackBerry 9930, however when you run the in email client results that you have linked as a button above, it displays a white screen on BlackBerry 9930. Have you found a solution to this?
Posted 03/22/2013

Avatar
Michelle Klann
Nice catch! I meant to omit the BB9300. I have updated the list of supported clients in this article.

To answer your question, no, I haven't been able to figure out why the BB9300 doesn't play nice with media queries. I will spend some more time researching that this morning....
Posted 03/22/2013

Samantha Armacost pic
Samantha Armacost
Michelle,

I've found that BB chokes on <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

But removing that doesn't do any favors to responsiveness.
Posted 03/22/2013

MarketVolt pic
MarketVolt
mind if i hug you? () as one who works in a very small business, this info and research is invaluable.
Posted 03/22/2013

Avatar
Michelle Klann
Ah ha! Thanks Samantha, we are hot on that Meta trail now. We'll follow up with an article outlining our research. So far, our recommendation is to omit that tag entirely because it's not all that useful/effective in other devices anyway.

I will be sure to update this template on our live server as well. For any of you who DL the template before then, be sure to omit the <meta name="viewport" ...> tag.

And thanks MarketVolt, glad to help!
Posted 03/22/2013

Eric pic
Eric
Thanks for this. It's a big help!
Posted 03/25/2013

Iain pic
Iain
This is really useful - thank you so much.
Posted 03/26/2013

ralph pic
ralph
Wow.... this is amazing. Thanks for putting al the hard work into it to achieve such a big email client support. Also looking forward to part 2.
Posted 03/27/2013

Vince pic
Vince
Thanks for this post, Michelle. Very helpful. But I notice the design didn't render probably for Android Gmail client. Instead of the smaller mobile layout it shows as the desktop layout. Is this still in the works? I also tried this with the Yahoo mail app on Android and have the same result.
Posted 03/29/2013

Avatar
Michelle Klann
Vince, Yeah unfortunately Gmail does not support embedded styles so it doesn't read the media query. This is the case in the Web and mobile apps for Gmail.

I haven't had a chance to test in other mobile apps like Yahoo.
Posted 03/29/2013

cblemuel pic
cblemuel
@vince both outlook, yahoo and gmail ignores media queries - it will render the default designs.
Posted 04/08/2013

Angelagnel pic
Angelagnel
thank you very very much
Posted 04/10/2013

Refresher pic
Refresher
I have tried this demo in my iPhone 5 (6.1.3), it it 'sticks' to the 2 columns and doesn't break into the 1 column like it does on your client tester.
Posted 04/16/2013

Avatar
Geoff Phillips
@Refresher,
How did you send it to your iPhone? Some email clients will add to/modify the source code.
Posted 04/16/2013

Refresher pic
Refresher
@Geoff.
It was just while checking it in the Safari browser but as it should be through mail it works fine. One thing I did find though is a spacing issue in a 2 column in Outlook 2007, if a td gets to a certain depth the adjacent column drops from the top with a large gap, almost like it is ignoring valigh="top".
Posted 04/16/2013

cblemuel pic
cblemuel
@refresher,
use max-width instead max-device-width so it will wrap to one column when viewing on mobile browsers.
Posted 04/16/2013

Avatar
Geoff Phillips
@Refresher,
If you're talking about the height of the table cells getting wonky, you may want to add a height value for them. OL07 respects height pretty well, as far as we know. If that's not the case, feel free to send us your code for troubleshooting.
Posted 04/16/2013

Chris pic
Chris
Tested Android 4.2.2 with gmail client 4.3.1.
Email template isnt responsive on this device.
Posted 04/25/2013

Avatar
Geoff Phillips
@Chris,
Gmail and gmail apps don't allow media queries, and will never be responsive to them on any device.
Posted 04/25/2013

chris pic
chris
@Geoff. I see. So when you have Android on your list its using the defualt android email client?

Thanks

Chris
Posted 04/25/2013

Avatar
Geoff Phillips
@Chris,
Yes, we use the native mail app. Let me know if you have any other questions.
Posted 04/25/2013

chris pic
chris
@geoff I just checked the mail on the default android email client on android version 4.2 and it looks great.
Question: Any idea what percentage of users are using gmail mobile app and therefore not getting media queries or responsive templates?

Heard anything about when Gmail mobile app may support media queries if ever?

Thanks for the help.

Chris
Posted 04/25/2013

Avatar
Geoff Phillips
@Chris,
No, I'm not sure what their market share is. You'd have to look at it on android as well as iOS.

As far as gmail allowing media queries, they have made no indication that it will ever happen. We're all still hoping it will, though.
Posted 04/25/2013

Boris pic
Boris
Hi, @Geoff, @cblemuel states the Outlook, Yahoo and Gmail ignore the media queries. Is this correct? From your comments here it sounds that Gmail is the only one that you agree on. Could you clarify which email clients on mobile devices ignore the media queries.
And what would be your suggested workaround, if there is one? Gmail is huge and I would love to serve clients using Gmail & mobile devices a properly sized email.
Posted 04/26/2013

cblemuel pic
cblemuel
@boris - referring to the Apps:
Gmail (Android)
Outlook.com (Android)
Yahoo! Mail (Android)

base on my tests these app ignores media queries.

Mobile Native email app does support MedQ.
Posted 04/26/2013

Boris pic
Boris
@cblemuel thanks... that is a pretty large chunk for B2B newsletters if Outlook does not accept media queries.
Posted 04/29/2013

Brandon DeWeese pic
Brandon DeWeese
This works great most of the time, but on Android 2.3 this seems to only work when a certain file size is reached. Meaning, that if I only have a header and a paragraph, it does not resize. Anything larger like a newsletter, the media query actually works. Have you noticed this?
Posted 04/30/2013

Avatar
Geoff Phillips
@Brandon,
I used only the top part of the email (down to the first paragraph) and it worked properly on android 2.3. Here are my results. If you'd like to share your code, I'd be happy to take a look at it.
Posted 05/01/2013

Eric pic
Eric
I customized this template and am viewing it on iPhone 5, through gmail and it's recognizing the media query that way. (IOW, I set up a gmail mailbox under the default iPhone 5 mail)
Posted 05/10/2013

Avatar
Geoff Phillips
@Eric,
Yes, that's right. If you use the native app, email sent to a gmail address will allow responsive design. It's the app itself (or web app) which doesn't allow it.
Posted 05/10/2013

Allyson Steffey pic
Allyson Steffey
Responsive email always helps you to improve your conversion rate. There are many factors which will help you to create responsive email design like scalable images, minification use of javascript, use of content strategy. Recently, i have found one infographic on responsive mobile email design - http://www.emailmonks.com/mobile-email-templates/responsive-email-design-mobile-templates.html
Posted 05/14/2013

eric pic
eric
Does not work on Android 4.1 (Galaxy) or 4.2 (Nexus). No responsive behavior whatsoever in the default mail client, which is the use-case for the vast majority of recipients.
Posted 05/15/2013

Michael pic
Michael
So if I'm reading @media query right, when the device is less than 640, deviceWidth is set to 440 (therefore resizing images and table cells to 440) and when less than 479, deviceWidth is set to 280.

What's the rationale behind 440 and 280 verses say, 480 and 320?

@refresher that weird space issue with Outlook is usually one of two things. 1. It can occur when adjacent cells do not have identical padding styles (Outlook will then force in space). For example, a td cell with padding:0 for an image to go the edge, and an adjacent td cell with text and padding:20px, Outlook may render with space above the image (or somewhere). The solution is to set both td cells to padding:0, and use a nested table with padding:20px for the text. The other rendering bug crops up when content length of a single table exceeds A4 page length (a Word hangover) OR when you have more than 3 elements using align= (for images or tables) within a nested table. Generally I've found for Outlook, the more aligns you use, the less nesting you can do.
Posted 05/15/2013

Kathleen Riley pic
Kathleen Riley
For some reason, it's not filling the screen on the iphone but just showing up in one column on half the screen.iphone 4

see screenshot here:
http://tinypic.com/r/141va5d/5

can you help?
Posted 05/20/2013

Avatar
Geoff Phillips
@Kathleen,
This must have something to do with your media queries, because it looks like text is wrapping properly. That makes me think that this is not a screenshot issue, but rather a code issue.

Sometimes, when one element (like a picture) is wider than the rest of a scaled email, the iPhone scales the rest of the email down to be what it thinks is proportionate. If you scroll through your email and find only one image or section takes the full width, then that image or section (or its related CSS) is the culprit. This could also just be an improperly applied responsive statement affecting the whole email.
Posted 05/20/2013

Kathleen Riley pic
Kathleen Riley
Hi Geoff,

Thanks for your response. However, when I just take your downloaded template without making any changes and place it into constant contact and send a test email, the same thing happens and it takes up only half the iphone screen.

is it something with constant contact?
Posted 05/21/2013

Kathleen Riley pic
Kathleen Riley
Ha, after testing your template and getting the same results, i did some searching. Apparently constant contact is behind the times and does not support responsive emails. http://community.constantcontact.com/t5/Email-Marketing/Does-Constant-Contact-block-Responsive-Design-Coding/td-p/76539

sorry for wasting your time!
Posted 05/21/2013

Steven T pic
Steven T
Hi

This article is fantastic and makes it really simple to break through a hard topic, one question is would it be better to use image spacers in a td rather than divs? I notice the code has changed from the original.

Thanks

Steve
Posted 06/04/2013

Ruez pic
Ruez
How do you get anything to show up on BlackBerries at all? I have had no success and always get either a blank white screen or the raw code... Any help is GREATLY appreciated!
Posted 06/07/2013

Avatar
Zack Peacock
Ruez,

I would start here:

http://www.emailonacid.com/blog/details/C6/emailology_viewport_metatag_rendered_unusable

If you have the mentioned metatag included, deleting it will likely be a quick fix.
Posted 06/07/2013

Ruez pic
Ruez
Thanks Zack,

I loved this article as it confirmed suspicions I had a little while ago and now I have something to show the client I'm working for on this particular email.
Posted 06/07/2013

Pallab Kakoti pic
Pallab Kakoti
Big help......many thanks......eagerly awaiting for part 2!!
Posted 06/11/2013

Boris pic
Boris
I received an update on Gmail for Android and it seems that the @media query is now supported. Does anybody have some similar experience?
Posted 06/13/2013

cblemuel pic
cblemuel
@Boris is it the GMail App for android?
Posted 06/13/2013

Avatar
Michelle Klann
@Boris,

Are you using the native Android client to receive emails from Gmail? Or are you using the Gmail app? I think there might be a few apps avail in the Android store for Gmail so please be as specific as possible.
Posted 06/13/2013

ruez pic
ruez
@Boris - are you sure you're not using the default mail client with your gmail set up in it? If media queries work in the actual gmail app that would be amazing
Posted 06/13/2013

ruez pic
ruez
@Boris @Michelle

Just tried it out on gmail app on a galaxy s4 and iphone 5 and didn't get any "responsiveness". Please let me know if either of you see otherwise.

Best!
Posted 06/13/2013

Boris pic
Boris
I used the Android Gmail app that just updated a couple of days ago..... naturally I cannot find the email anymore, just remember that I noticed it. It was a Mailchimp account... I keep looking. Maybe it was just wishful thinking... and it was designed as mobile first from the get-go.
Posted 06/13/2013

Eric M pic
Eric M
@Chris,

This is in regards to your comment about gMail not supporting media queries. I thought that was the case as well but I'm thinking it might be more device specific and not the app. I tested on multiple android devices (Galaxy s3, galaxy note 2, HTC EVO, nexus 7 & nexus 7 tablet) and using both the exchange email and the gMail app, the note 2 supported the media queries and rendered everything as a 1 column template.

I have more testing to do but the note 2 seems like its respecting them on your code as well as my own code
Posted 06/21/2013

Ben K pic
Ben K
How did you cause table align=left to make the tables stack? I'm trying to recreate this template for research purposes but align=left doesn't do anything. Usually, I would assign a float attribute but it'll be interesting to know how it works this way.

Thank you for your time.
Posted 06/27/2013

Ben K pic
Ben K
Media queries work on gmail, I have tested it on my iphone gmail account and it has worked fine.
Posted 06/27/2013

Avatar
Geoff Phillips
@Ben K,
We used that in combination with container elements for those elements. When the media query reduces the size of the containing element, the child elements are forced to stack.
Posted 06/27/2013

Avatar
Michelle Klann
@Ben K,

I think where most people get confused is that you can set up the NATIVE Android email client to pull email from your Gmail account. Don't confuse this with the Gmail app that you can download to your phone.

Media queries work on the NATIVE Android email client

They do NOT work on the Gmail app that you can find in the app store.

Hope this helps to clarify smile
Posted 06/27/2013

Ben K pic
Ben K
Michelle and Geoff, thanks alot for the quick response and clarification. I feel like this article helped me understand responsive emails more.
Posted 06/28/2013

Avatar
Lateral Group
I'm a little startled that this template does not work for me:
screenshot here http://natz.net/i/photo.PNG
I've sent the original code to my own email address twice (once using GroupMail, and again using Thunderbird) and viewed in native iPhone 4 email app. It's simply showing the desktop version.

Any ideas?? What am I doing wrong?
Posted 08/09/2013

Avatar
Geoff Phillips
LAteral Group,
I'm not sure about GroupMail, but I know that Thunderbird modifies code upon sending in such a way that it breaks media queries. I just tested this again on my Thunderbird/iPhone4. Do you have an ESP to send from?
Posted 08/09/2013

Lateral Group pic
Lateral Group
It was indeed a problem with GroupMail. All sorted and works great now. Thanks :o)
Posted 08/19/2013

Mike pic
Mike
What about Windows phones? Do media queries work on them.
Posted 09/12/2013

Lisa pic
Lisa
Has anyone experienced this template working for Android? I've used it a few times with success in iPhones but not Androids (which was one of our primary goals).

We've sent through Campaign Monitor and Responsys—both didn't work for Android.

Any bit of information would be helpful!
Thanks
Posted 09/23/2013

Avatar
Michelle Klann
@Lisa,

We have tested quite extensively on the Android. Here would be my questions:

1.) Are you sending via Campaign Monitor? Did they alter your source in any way on send?

2.) Are you testing in the native email client that comes with the Android or are you using a mobile app, like Gmail or Yahoo?

3.) What device in particular are you testing on? The dimensions will vary from one manufacturer to the next. Either way, you should be seeing a one column layout when opened on a med-small sized Android devices.
Posted 09/23/2013

Lisa pic
Lisa
@Michelle,
We mostly send through Responsys. I have just emailed them to see what kind of support (or lack-there-of) they have for responsive emails on their platform.

With Campaign Monitor we were doing one-off sends to someone's personal email (yahoo account) through their Android device (Motorola Atrix 3G running 2.9 Android 2.3–2.3.2 Gingerbread API level 9) and viewing through the Android native mail app not another mobile app.

He continues to see the web version of all the emails we send him.

Thanks for your help and fast response! I'd be happy to send a sample html if that would be helpful.
Lisa
Posted 09/23/2013

Avatar
Michelle Klann
@Lisa,

Sure, we'd be happy to take a look under the hood. Can you send your email to miki @ emailonacid.com?
Posted 09/24/2013

Jose pic
Jose
Thanks for share this template it's very easy to use.
Posted 09/25/2013

Mat pic
Mat
Hi Michelle, thank you for sharing this, it's great. However, this doesn't seem to work in high resolution Android devices such as Samsung GS4 in portrait mode (works fine in landscape). Do you have a way for your layout to fit as well in portrait? Thanks anyway.

Mat
Posted 09/30/2013

Avatar
Geoff Phillips
Mat,
Can you link us to a screenshot of how it appears in that device? I tested this in a Samsung GS3 and it looked as intended. If you can't send a link to a screen cap, please describe the problem in detail. Also make sure you're not using the Gmail app, which doesn't respond to media queries.
Posted 09/30/2013

Rasmus Bidstrup pic
Rasmus Bidstrup
Hi

I have a question, why do you use 3 * width="32%" on the 3 column section? what about the last 4% width?

regard
Posted 10/01/2013

Mat pic
Mat
Hi Geoff,

Thanks for you reply. Here's a screenshot of your template unedited in a Smasung GS4 (not the Gmail app, rest assure) :

http://by.emailr.com/documents/media/6/Shared/Mathieu/testing/responsive/Screenshot_2013-10-02-13-52-35.png

Kind regards,

Mat
Posted 10/02/2013

Avatar
Geoff Phillips
Mat,
That certainly doesn't look right. How did you send the email to this device?
Posted 10/02/2013

Mat pic
Mat
Geoff,

I use emailR, an email marketing solution allowing us to send HTML email like Campaign Monitor does.

It may be the cause but I strongly doubt that.

Thank you for your reply.

Mat
Posted 10/02/2013

Tommy Phillips pic
Tommy Phillips
I'm trying to implement this template for emails. I'm testing the emails using Bronto emailing software. My questions is concerning the two column part of the template. On iphone5 its stacking perfectly, but for iphone4/4s its not stacking the columns at all. Any comments on why its not would be appreciated.
Posted 10/02/2013

Mat pic
Mat
Problem solved! MS Exchange seems to be causing the rendering issue. A quick search reveals that the problem is related to ActiveSync with Android phones.

Let's hope there is a workaround.

Thank you for your help, Geoff. Appreciate it.

Mat
Posted 10/03/2013

Colin pic
Colin
I'm using Mac. I open up this (unedited) email in Safari (localhost) and then email the page in the usual way. But the responsive behaviours are lost in Mac Mail on the desktop and iPhone.

Help.
Posted 10/05/2013

Tommy_Phillips pic
Tommy_Phillips
I found out that this template, doesn't work well in the iPhone mailing app called "mailbox."

-tommy
Posted 10/07/2013

Avatar
Geoff Phillips
Colin,
What do you mean by "email the page in the usual way?" Many clients will strip or modify parts of the email, including media queries.
Posted 10/07/2013

Colin pic
Colin
Geoff,

That's it exactly. In Safari, you click the Share button and then email this page as web page. But it strips out the responsive behaviours.

The template is fine. What I am looking for is a way to send out the emails to very few people, but with the responsive behaviours intact.

Ta
Posted 10/07/2013

Haran pic
Haran
Good explanation and nice work.
Posted 10/07/2013

Bárbara pic
Bárbara
I love you. Tanksss
Posted 10/08/2013

Avatar
Geoff Phillips
Colin,
I would recommend one of the following sites. You should be able to sign up for a free account and use that to send HTML emails without them being modified.

http://mailchimp.com/
http://www.campaignmonitor.com/
Posted 10/08/2013

J pic
J
Hi. I sent a test through Constant Contact, and it is not responsive on Android or iPhone. Is this still a Constant Contact problem? Are there any work arounds? Thanks so much!!
Posted 10/08/2013

Colin pic
Colin
Thanks, but I am really looking for a solution that can be run from the desktop, rather than through third-party marketeers. The volume is too low to justify the fees, and the free versions include promotional banners for the provider.
Posted 10/09/2013

Avatar
Geoff Phillips
J,
I think if the media queries aren't working it's safe to assume this is still a Constant Contact problem. To get a better answer, I would recommend contacting them. I understand their customer support is excellent.

Because they strip out the media query CSS, there is no workaround. You can still use "fluid" templates that are based on 100% width.
Posted 10/10/2013

John pic
John
@Colin,
If you email less than 12,000 emails a month, mail chimp is free.
Posted 10/11/2013

liza pic
liza
Thank you, looks awesome - but do you have to be a web developer or be able to write HTML in order to utilise this?
How do I import it into Campaign Monitor / Mailchimp so I can use it as a template?
Please let me know..
Posted 10/14/2013

Avatar
Geoff Phillips
@Liza,
Sorry, but I'm not a Mail Chimp or Campaign Monitor expert. I'm sure you could ask them how to create a new template using their service and they'd be happy to help. Both offer excellent customer support. Let us know if you have any other questions.
Posted 10/15/2013

Nourin pic
Nourin
I love this layout very much! But it does not respond to the iPhone 5. How could I edit this the code to adjust?
Posted 10/28/2013

Avatar
Geoff Phillips
@Nourin,
Hmm, that's not good. In our testing it does work in the iPhone 5. How are you sending it to the iPhone? are you viewing it in the native email client, or a downloaded app?
Posted 10/28/2013

Brandon DeWeese pic
Brandon DeWeese
Hi, thanks for the info. This has worked great for me until I received my new DROID RAZR M running Android 4.1.2. The native client does not respond to media queries at all. I used the EXACT code from the download above.

Any solutions or suggestions?
Posted 10/28/2013

Avatar
Geoff Phillips
@Brandon,
It should work on that device as well. How are you sending it to the RAZR?
Posted 10/29/2013

cblemuel pic
cblemuel
same here android 4.1.2 - seems do not support media queries.

i've been using responsive layout on all emails (for almost a year) until viewing it to 4.1.2 android (lenovo) - seems does not work
Posted 10/29/2013

Avatar
Geoff Phillips
@cblemuel,
Hmmmm, that's strange. It's working on an Android 4.2.2 device here in the office. How are you sending it?
Posted 10/29/2013

cblemuel pic
cblemuel
using an esp:
ewayDirect
ExactTarget
Posted 10/29/2013

Avatar
Geoff Phillips
Perhaps Android 4.1.2 doesn't support media queries, but 4.2.2 does. Or I suppose it might be device specific. I'll see how many more test devices I can borrow from the office.
Posted 10/29/2013

Brandon DeWeese pic
Brandon DeWeese
Im sending a test through campaign monitor...
Posted 10/29/2013

Nourin pic
Nourin
@Geoff

I think I may have already posted this, sorry if it's a duplicate.

I tested with Mail Chimp and read it with the non-native GMail app, which I just read Michelle say it won't respond to.

It looks fantastic everywhere else, good job! This is one of the only layouts I've seen that has such smooth cross-device optimization.
Posted 10/29/2013

Tommy pic
Tommy
Hey guys,

I was wondering on the three column part, how can you get the three columns to span from end to end. You can see that there is more space on the right of the columns then on left of the columns? Any help on this will be greatly appreciated. Thanks.

-tommy
Posted 10/30/2013

Avatar
Geoff Phillips
@Tommy,
There is more space on the right because the tables inside that section use align="left" to create the stacking behavior. If you reduce the size of the containing table, which is set to width 580, you should be able to get closer to perfect centering.
Posted 10/30/2013

Tommy_Phillips pic
Tommy_Phillips
@Geoff I will try that out right now.
Posted 10/30/2013

Tommy_Phillips pic
Tommy_Phillips
@Geoff,

Ok so with this template there is now way to truly center the three column section. Because of the align="left" for the stacking and the 33%. Theres always a little bit more space on the right side of the last <td> column. I did your last suggestion but you can still tell it missed align?
Posted 10/30/2013

Avatar
Geoff Phillips
@Tommy,
I'll take your word for it. That's one of the challenges of using align="left" tables to create a responsive layout. Hope you enjoy the template otherwise!
Posted 10/30/2013

x
Sign up for our Newsletter

And get updates on the latest email tips, tricks and hacks!