Blog   /   Free Responsive Email Template
Responsive Email Template

Free Responsive Email Template

106
This blog post was updated on July 12, 2018. It was last updated in February 2017 and originally published in 2013.
 

With the popularity of mobile email and so many of our users asking about best practices for responsive emails, we’d like to help with a free responsive email template to get you up and running as fast as possible.

This template offers three different “layouts” that 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-column layout for easy reading on mobile devices.

If you have an Email on Acid subscription, you already have access to this template in our Resources section! Simply log in and navigate to the resource center in the left navigation bar.

If you don’t have a subscription, you can find the template here. Simply enter your email and the download is free.

Once you download the template and finish customizing it with your content, don’t forget to test the email. Although we’ve tested this design, the smallest code change could break the email. Luckily, our platform shows you what your email looks like in more than 70 clients and devices. Sign up for our free trial and give it a test today!

 

Email on Acid Responsive Email Design template

 

Download

Template Details

When developing this template, we researched the most common device dimensions and ran a media query test to identify the device widths to target.

The breakpoints we’ve selected for this template are:

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

What’s interesting about these dimensions is that the breakpoint for medium-sized handheld devices is 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 used for medium-sized mobile devices.

You can mix-and-match each section of this layout. Plus, we tried to make the template generic, as your email needs will likely change over time.

Responsive email template sections

This template has been tested across most major email clients. But don’t take our word for it: Test it yourself today with our free, seven-day trial.

 

 

How Did We Build the Responsive Template?

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 this blog post 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? Yes and no. Using ‘left’ or ‘right’ align tables in Outlook 2007, 2010, and 2013, results in extra table padding. So, we recommend checking out this Outlook padding workaround 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.

Customize Away!

Feel free to customize this template to fit your needs. You can keep the email 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 next responsive email!

Don’t Forget to Test!

We’ve tested this template thoroughly and we trust it, but when you update it with your content, you’ll need to test it again. The smallest code change can have massive consequences in the world of email. That’s why Email on Acid offers unlimited testing on more than 70 email clients and devices. Check out our free, seven-day trial and start testing your new template today.

Test today!

Note: 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 were included in the artwork of our template, they are available for purchase online: Hand Gothic, Thirsty Rough, Thirsty Script, Veneer.

Author: Kyle Lapaglia

Author: Kyle Lapaglia

106 thoughts on “Free Responsive Email Template”

  2. 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?

  3. 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….

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

  5. mind if i hug you? () as one who works in a very small business, this info and research is invaluable.

  6. 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!

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

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

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

  12. @vince both outlook, yahoo and gmail ignores media queries – it will render the default designs.

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

  15. @Refresher,
    How did you send it to your iPhone? Some email clients will add to/modify the source code.

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

  17. @refresher,
    use max-width instead max-device-width so it will wrap to one column when viewing on mobile browsers.

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

  19. Tested Android 4.2.2 with gmail client 4.3.1.
    Email template isnt responsive on this device.

  20. @Chris,
    Gmail and gmail apps don’t allow media queries, and will never be responsive to them on any device.

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

    Thanks

    Chris

  22. @Chris,
    Yes, we use the native mail app. Let me know if you have any other questions.

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

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

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

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

  27. @cblemuel thanks… that is a pretty large chunk for B2B newsletters if Outlook does not accept media queries.

  28. 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?

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

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

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

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

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

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

  37. 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?

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

  40. 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!

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

  44. I received an update on Gmail for Android and it seems that the @media query is now supported. Does anybody have some similar experience?

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

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

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

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

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

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

  52. Media queries work on gmail, I have tested it on my iphone gmail account and it has worked fine.

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

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

  55. Michelle and Geoff, thanks alot for the quick response and clarification. I feel like this article helped me understand responsive emails more.

  56. I’m a little startled that this template does not work for me.
    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?

  57. 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?

  58. It was indeed a problem with GroupMail. All sorted and works great now. Thanks :o)

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

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

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

  63. @Lisa,

    Sure, we’d be happy to take a look under the hood. Can you send your email to miki @ emailonacid.com?

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

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

  67. Hi

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

    regard

  69. Mat,
    That certainly doesn’t look right. How did you send the email to this device?

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

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

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

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

  74. I found out that this template, doesn’t work well in the iPhone mailing app called “mailbox.”

    -tommy

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

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

  80. 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!!

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

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

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

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

  86. I love this layout very much! But it does not respond to the iPhone 5. How could I edit this the code to adjust?

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

  88. 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?

  89. @Brandon,
    It should work on that device as well. How are you sending it to the RAZR?

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

  91. @cblemuel,
    Hmmmm, that’s strange. It’s working on an Android 4.2.2 device here in the office. How are you sending it?

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

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

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

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

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

    column. I did your last suggestion but you can still tell it missed align?

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

  101. So I am still in the early stages of learning about responsive email design. I started testing this template (thank you for this by the way) but when I send a test or even the initial HTML before making any edits to your file it won’t display correctly on my iPhone 5 or iPad Mini. Do I need to include some other code other than the HTML? I feel like I am missing something.

  103. Thank you for the template. I realize that “This blog post was updated on July 12, 2018. It was last updated in February 2017 and originally published in 2013,” but for accessibility purposes, aren’t most of the font sizes too small? It would be nice to see the template updated with larger fonts. I look forward to using this in one of my projects. Thanks again!

    1. Hi Carlos — Yes, the post content was updated but the template is still the original. We’ll take a look at it and see what adjustments we can make. Thanks for the feedback!

  104. This code has been extremely useful, but I wonder if the changes in screen/device sizes since 2013 also warrants an update to the media queries. 280px in the media query seems to leave large margins around the sides of the content area in mobile devices. And simply changing this from 280 to 300 causes other piece to break. I’d love to see a fresh version of this code for today’s devices!

Comments are closed.

Latest Articles

Black Friday email envelope with red fractures.
Black Friday Email Disasters and How to Avoid Them 
preheader text examples
Preheader Text: How to Use the Email Subject Line’s Secret Weapon
Image icon and speaker icon for alt text audio
How to Write Alt Text for Better Accessibility in Emails