Responsive Design Tutorial

Easy Responsive Design Tutorial in 7 Steps


Oct. 20, 2015 Update:
The technique covered in this blog (TD stacking) does not work with Android 4.4. For more information on this issue, read this blog.

We’ve had a lot of questions about how to make a template responsive, and how responsive design works in general. Today, I’m going to take a template from 99designs (one that we wrote about in our 600+ Free Templates blog) and add responsive behavior to it so you can see how it’s done. If you don’t already have the template, go to their site and get it so that you can follow along. This blog is intended to illustrate how to apply responsive design to an existing template.

For this tutorial, I am using the “newsletter blue” template, called “NEWSLETTER BLUE.html.” You’ll want to open it up in a text editor, and save a new version of it that you’ll make responsive.

Check out our samples of this email before and after adding responsive design.

Without media queries.

Blank email inbox iPhone

Email on Acid Template Before Media Queries
With media queries.

Blank email inbox iPhone

Email on Acid Template After Media Queries

1. Add a Style Block.

If you don’t already have a style block, you’re going to need one. This is where the media queries go, and that’s what is going to make your email responsive. A media query is a conditional statement that contains extra CSS rules to change the appearance of the email when the conditions in the statement are met. For this email, we’re going to use the same media queries that we used in our Responsive Template. You can check out the basic code right here:

<style type="text/css">
  @media only screen and (max-width: 640px) {
          
      }
      
  @media only screen and (max-width: 479px) {
          
      }
</style>

 

The first media query will trigger for screens of less than 640 pixels in width. The second query triggers for screens of less than 479 pixels in width. For more on min/max width, check out this blog. The query that triggers on smaller screens comes last so that it will take precedence over the earlier CSS rules in the block. We’re going to place our styles inside these media queries in the later steps.

Then we can add the attribute selector to each style in the media queries. You’ll see this in action in the next step.

2. Add the Yahoo! Fix.

This step is no longer necessary, as this was fixed by Yahoo.

3. Control the Width of the Container Element.

We need to control the width of the containing element, so that the email slims down to a single column on smaller devices. To start, let’s identify the parts of the email that determine its width. In this case, we’re looking at just:

<table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" align="center">

 

All we need to do is add a class to this table to control its width.

<table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" align="center" class="deviceWidth">

 

Now, we’ll add this class to our media queries:

  @media only screen and (max-width: 640px)  {
          .deviceWidth {width:440px!important; padding:0;}  
      }
      
  @media only screen and (max-width: 479px) {
          .deviceWidth {width:280px!important; padding:0;}
      }

 

If you save your file and resize the window now, you won’t be able to see any changes. That’s because resizing the container element isn’t the only thing we need to do to make the email reach the correct width. Any image or table that is too wide for the new table width will cause it to stretch to accomodate the wider element. That’s why, in the next step, we’re going to need to apply classes to some of the images in this email to control their size as well.

4. Add New Classes to Relevant Images.

Some of the images in this email are so wide (more than 440 or 280 pixels wide, respectively) that they’re going to break out of the new sizes for the table that we picked in step 2. We’re going to add some special classes to help us resize them. For instance, in the email’s header, we have a long horizontal bar.

 <td height="30"><img src="images/PROMO-GREEN2_01_04.jpg" width="393" height="30" border="0" alt=""/></td>

 

This bar is set to be 393 pixels wide, which will combine with the rest of the header to be too big. We’ll add another class here:

 <td height="30"><img src="images/PROMO-GREEN2_01_04.jpg" width="393" height="30" border="0" alt="" class="deviceWidth2"/></td>

 

The featured image for the email is too wide, as is another image being used as a horizontal rule near the bottom. We’ll do the same thing for them, with a custom class. For example, the featured image:

<td align="center"><a href= "http://yourlink" target="_blank"><img src="images/PROMO-GREEN2_02.jpg" alt="" width="598" height="249" border="0"/></a></td>

 

Becomes:

<td align="center"><a href= "http://yourlink" target="_blank"><img src="images/PROMO-GREEN2_02.jpg" alt="" width="598" border="0" class="deviceWidth3"/></a></td>

 

Notice that we removed the height attribute. If we leave that height attribute, the image will look stretched to reach that height. On the other hand, if we don’t specify a height, it will automatically maintain its ratio. Now we’re going to change the size of these images in the media queries, like this:

  @media only screen and (max-width: 640px)  {
          .deviceWidth {width:440px!important; padding:0;}
          .deviceWidth2 {width:300px!important; padding:0;}
          .deviceWidth3 {width:440px!important; padding:0;}
      }
      
  @media only screen and (max-width: 479px) {
          .deviceWidth {width:280px!important; padding:0;}
          .deviceWidth2 {width:200px!important; padding:0;}
          .deviceWidth3 {width:380px!important; padding:0;}
      }

 

When you resize the window, you should see the blue bar and horizontal rules get small enough to accomodate the new responsive behaviors. The email won’t get any smaller, though, because the table structure is still keeping it at the same size. In the next step, we’ll add a style to make the tables stack under each other.

Control Newsletter

5. Make some TDs Display:Block.

Most email designers use a table structure to create a “float:left” type effect for their content blocks. In this case, we have a sidebar on the right that will need to move under the rest of the content for the smaller views. Luckily for us, this is actually a pretty easy trick. We’ll just add a style to the containing TDs, in this case there are two of them. The TD containing the content on the left is width 58%, and the right side TD is width 35%.

<td width="58%" align="left" valign="top">
....lots of code in between here....
<td width="35%" align="left" valign="top">

 

Let’s add in the “block_td” class here.

<td width="58%" align="left" valign="top" class="block_td">
....lots of code in between here....
<td width="35%" align="left" valign="top" class="block_td">

 

Now we’ll add the CSS.

  @media only screen and (max-width: 640px)  {
          .deviceWidth {width:440px!important; padding:0;}
          .deviceWidth2 {width:300px!important; padding:0;}
          .deviceWidth3 {width:440px!important; padding:0;}
          .block_td {display: block;}
      }
      
  @media only screen and (max-width: 479px) {
          .deviceWidth {width:280px!important; padding:0;}
          .deviceWidth2 {width:200px!important; padding:0;}
          .deviceWidth3 {width:380px!important; padding:0;}
      }

 

With this class, each of these TDs will display in its own vertical space instead of sitting side by side. They’re still constrained by the percent width listed inline, so we’ll have to overwrite that in the next step.

Test Newsletter

6. Fix Percent-Based TDs.

Now our two main content TDs look like this:

<td width="58%" align="left" valign="top" class="block_td">
....lots of code in between here....
<td width="35%" align="left" valign="top" class="block_td">

 

We’ll add another class to them to make them 100% width on mobile. I’m calling this class “percent_td,” but you can name it anything you like.

<td width="58%" align="left" valign="top" class="block_td percent_td">
....lots of code in between here....
<td width="35%" align="left" valign="top" class="block_td percent_td">

 

I am creating a new class because there are a lot more places you’ll want to use this in the email to make sure that all of these content blocks expand to full size in the mobile view. Now let’s add the CSS.

  @media only screen and (max-width: 640px)  {
          .deviceWidth {width:440px!important; padding:0;}
          .deviceWidth2 {width:300px!important; padding:0;}
          .deviceWidth3 {width:440px!important; padding:0;}
          .block_td {display: block;}
          .percent_td {width: 100% !important;}
      }
      
  @media only screen and (max-width: 479px) {
          .deviceWidth {width:280px!important; padding:0;}
          .deviceWidth2 {width:200px!important; padding:0;}
          .deviceWidth3 {width:380px!important; padding:0;}
      }

 

Notice that we only need to add this style to the first media query, because anything that triggers the second query will also trigger the first. Our email is looking pretty good now! We do still have a few lingering problems to clean up.

Lingering newsletter problems

7. Finishing Touches.

If you’ve been following these directions faithfully, you’ll see there are still a few problems. A remnant of the dashed border that separated the left and right columns can still be seen, as well as the image from the right column just floating in space. Let’s hide both of these things in the mobile view, to clean it up a bit. The following technique can be used to hide almost any element of the email that you don’t want to show on mobile, if applied carefully. Be wary of removing whole table rows or cells, as this can sometimes mess with the rest of the structure of a table.

This is the code that creates the border effect:

<td width="5%" style="border-right:2px dashed #95989a"> </td>

 

So we’ll add the “dashed” class to it. We’ll overwrite the border to 0 in CSS.

<td width="5%" style="border-right:2px dashed #95989a" class="dashed"> </td>

 

We’ll also add the “hidden” class to the image from the right column:

<td><a href="http://yourlink" target="_blank"><img src="images/NEWSLETTER GREEN03.jpg" alt="buy her" width="181" height="144" border="0" class="hidden"/></a></td>

 

Finishing touches on newsletter

Last, we need to reset the size of some percent based TDs that are now too big. We’ll set these to be 155px wide, slightly larger than the image they contain.

 <td width="43%"><img src="images/NEWSLETTER GREEN01.jpg" width="150" height="130" border="0" alt=""/></td>

 

Becomes:

 <td width="43%" class="pic_td"><img src="images/NEWSLETTER GREEN01.jpg" width="150" height="130" border="0" alt=""/></td>

 

Give each of the following TDs (with 57% width) the “percent_td” class so that they’ll occupy the remaining width of the row. And now the last bit of CSS.

  @media only screen and (max-width: 640px)  {
          .deviceWidth {width:440px!important; padding:0;}
          .deviceWidth2 {width:300px!important; padding:0;}
          .deviceWidth3 {width:440px!important; padding:0;}
          .block_td {display: block;}
          .percent_td {width: 100% !important;}
          .pic_td {width: 155px !important;}
          .dashed {border-right: 0px !important;}
          .hidden {display: none !important;}
      }
      
  @media only screen and (max-width: 479px) {
          .deviceWidth {width:280px!important; padding:0;}
          .deviceWidth2 {width:200px!important; padding:0;}
          .deviceWidth3 {width:380px!important; padding:0;}
      }

 

Final responsive newsletter product

That’s it! You should now have a pretty good looking responsive email template. Of course, you’ll probably want to tweak some of the padding and a few other details to really add some polish to it. I hope this tutorial has helped you understand how responsive design works, and how easily it can be applied to any template! Here are those samples again, so that you can see how well you’ve done.

Without media queries.

Blank email inbox iPhone

Email on Acid Template Before Media Queries
With media queries.

Blank email inbox iPhone

Email on Acid Template After Media Queries

Extra Credit

Hide the table cells on either side of the “special column” using the “hidden” class (in the final sample of the media query, above), to make it extend to the width of the screen. You should always test carefully when hiding cells, as it may break your table. In this case, my testing showed that it would still look good in all clients. You might also want to do some work on the footer and header text, as the links look pretty jumbled now. Controlling the appearance of these sorts of things is the final “polishing” step of getting a perfect email for mobile clients.

Author: Alex Ilhan

27 thoughts on “Easy Responsive Design Tutorial in 7 Steps”

  1. Great post! Just wondering if the query for the class of hidden will work in gmail on android? I’ve done a few tests, and can never get display:none !important; to work…wondering if there are other workarounds?

  2. Mike,
    Gmail ignores most styles in the <head> of the email, including display: none. You could try hiding the element inline (which gmail will respect) and then showing it using media queries. That will create its own set of challenges, but it’s a start!

  3. Any news about Gmail client on Android / iPhone? All the above is pretty ok and a great article, but regarding Gmail client it doesn’t work as it doesn’t support media queries. Any workaround?

    Thanks.

  4. Arlequin Media Group,
    There’s no workaround for a media queries in Gmail. You can try to use a flexible design instead.

  5. Thanks for your answer. I knew. Problem is that all the articles related to responsive design clearly avoid talking about this issue that’s not minor. I myself spent countless hours trying to find workarounds and clear information but it seems that all the people advocating for responsiveness avoid explaining the problem on purpose.

  6. Arlequin Media Group,
    Yes, that’s probably true. From our perspective it seems like a well-known fact. Gmail’s lack of responsive design is well documented in other sections of our site and in the tips and tricks in our back end. It’s also discussed in other blogs on the site.

    We have a blog about what Gmail does and does not strip: https://www.emailonacid.com/blog/details/C13/gmail_web_app_allows_style

    Check out this blog on the value of responsive design here: https://www.emailonacid.com/blog/details/C4/is_responsive_design_really_effective

    Gmail only accounts for a small percentage of the market, and not all of those opens are on mobile. Some opens that are on mobile are through a native app, which will allow responsive styles. My point here is that responsive design is still very valuable, and we’ll just have to wait for Gmail to get with the times.

  7. Hi Geoff, is there a way to make alternating 2-column rows stack up the same way? In other words, let’s say I have a table with 3 rows, 2-columns. Here’s the code:

    ROW 1, LEFT COLUMNROW 1, RIGHT COLUMNROW 2, RIGHT COLUMNROW 2, LEFT COLUMNROW 3, LEFT COLUMNROW 3, RIGHT COLUMN

    On the desktop, it shows like this:

    ROW 1, LEFT COLUMN ROW 1, RIGHT COLUMN
    ROW 2, RIGHT COLUMN ROW 2, LEFT COLUMN
    ROW 3, LEFT COLUMN ROW 3, RIGHT COLUMN

    But on mobile, I want it to stack like this:

    ROW 1, LEFT COLUMN
    ROW 1, RIGHT COLUMN

    ROW 2, RIGHT COLUMN
    ROW 2, LEFT COLUMN

    ROW 3, LEFT COLUMN
    ROW 3, RIGHT COLUMN

    I can only stack the left column above the right column by assigning a class that floats left to each of the 2 TD tags per row. I’d like to also stack the right column above the left column. Hope this makes sense, thanks in advance!

  8. td {display: block} is no longer supported by Android for stacking table cells. table align is the only way to achieve this (if you want it to appear correctly on Android). I think email on acid is still using an earlier Android version, so folks using the display: block method will not catch it.

  9. Display:block on tds isn’t supported by Android 4.4 and higher. It’s best to work with floating tables instead. Which also gives you the opportunity of showing right content above the left on mobile by putting the code of the right table first.

  10. egrossbach, Marjolein Verheij, it’s not that simple. A few points to consider:

    1. With Android 5.0 already released, Android is replacing the native email app and directing users to the Gmail app which doesn’t support media queries all together. 4.3 and 4.4 doesn’t support stacking TDs because the doctype is stripped. Likewise with Samsung’s proprietary email app that acts like the native email app.

    2. Comparing the methods not considering compatibility, stacking TDs vs floating tables, stacking TDs is truly a superior method for simplicity. There are also methods for reverse stacking TDs that doesn’t involve reversing the content order and disrupting the actual flow, like with floating tables.

    3. Floating tables have spacing issues in Outlook 2007, 2010, and 2013. A workaround is to ghost table cells around the tables for Outlook only. This removes the spacing issues but then you’re unable to reverse stack content blocks by reversing the content order. To fix that, you then have to surround the tables with another div and declare display:table-header-group and display:table-footer-group in order to reverse stack, like with reverse stacking TDs.

    This 3rd method is probably the most compatible so far out of the 3, but requires a ton of work, and all because Android decided to strip the doctype which makes no sense. Overall, with Android shifting to the Gmail app, it simplifies the landscape a bit and with 4.3 and 4.4 adoption rates continuing to drop, the first method of stacking TDs may be the preferred method over time once again.

  11. A minor detail, but might a suggest a white-space: nowrap; in the footer links “unsubscribe”, “about” and perhaps a one or two column layout ther as well.

    I personally hurt my eyes when I see;
    ABO
    UT

  12. Jordan,

    Wow, well this is good to know, and very problematic. I imagine clients will be in disbelief when they learn emails can’t be responsive on Androids, assuming gmail will indeed become the default app.

    Do you by any chance have documentation on this? I searched and couldn’t find much on it.

    And Email On Acid really needs to publish something about this.

    I’ve been using the Outlook hack of ghosting table cells, haven’t had much call for reverse stacking.

    Curious how you reverse stack using TDs. I’ll try working with your method.

  13. egrossbach,
    Don’t worry, we plan on writing about this very soon! I really appreciate the feedback on this article. Too bad nothing in the email world stays the same for long.

  14. Hey egrossbach, not sure if there was any official announcements, but I recall reading about this in another email testing service’s forum. Also found a thread on AndroidCentral with people complaining about this:

    http://forums.androidcentral.com/google-nexus-5/461052-lollipop-killed-stock-email-app.html

    Regarding reverse stacking, you just have to wrap each aligned table in another div and fire display:table-header-group !important; and display:table-footer-group !important; to the divs in your media queries.

    Originally found the method here: http://labs.actionrocket.co/reverse-stack-using-table-align-based-methods

  15. egrossbach, just saw your latest reply. I don’t believe Android forces you to update to the latest OS, as the majority of people are still on 4.2.x.

    The thing with the Android ecosystem is the disconnect with software and hardware. While Google can release a new Android OS, it’s up to the device manufacturers and the carriers to decide if they’re willing to put in the time/effort/money to test and release the update to their devices.

    I’ve read that Samsung is already in the process of getting 5.0 ready for their devices all the way back to S4. That means S3 and below owners will not get the update. However, given that Samsung includes their own proprietary native email app, the force to the Gmail app in 5.0 probably doesn’t really matter anyways for Samsung owners. Good news is that Samsung’s marketshare is on the decline. Android really is a terrible mess, imho.

  16. Nice responsive email design tutorials, I am web designer at http://www.emailchopper.com I have already created some editable email templates.All these email templates has a wide range of stunning features like – responsive layout, drag & drop builder etc.

  17. I am just wondering, seems I do it backwards.
    I set my main CSS for mobile, then use MQ min width to cater for desktop. Sure, each site is different but I seem to end up with less in the MQ than yours.

    I will try it your way later to see.

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies