How to code a responsive HTML email table step by step - tutorial
In this tutorial I will explain how to code a very basic HTML responsive email table. Hopefully it will help most of the people that are starting with responsive email design to get a bit of a clearer idea of how this work.
1. Introduction: CSS classes and media queries
Every time you hear talking about responsive, you hear talking about media queries. At this point a quick introduction about media query is necessary to start the discussion about responsive code. If you are already familiar with classes and media queries feel free to skip to step two.
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). It became a W3C recommended standard in June 2012, and is a cornerstone technology of Responsive web design. Wikipedia
A media query will look like:
@media only screen and (max-width: 500px) {
/*your classes*/
}The above media query means: "If the size of the device screen is smaller than 500px then..." and, when that state is true, it will use the classes that are within the curly brackets.
All the media query are included in the <head> within the <style>.
This means that you can then add a class to a tag and decide when that class becomes active depending on the size of the screen. It is easy now to understand how this can be used with a 100% width class to create responsive layouts.
It is important to understand the difference between responsive layout and fluid layout. I will create a post about this difference soon, in the meantime if you are not sure about it, you can check it online or you can have a look here: Difference between fluid and responsive layout.
2. Creating the holding table
The process of coding emails is slightly difference from the one used to code websites. The main difference is that all the layout have to be based on tables (instead of <div> or other tags as it is common in web dev). The standard width for an email is 600px wide, even if this can be adapted to your needs. I personally like to be a bit flexible about this, depending on the requirements of the email i have in front of me. But as a standard, lets consider a 600px email.
I personally prefer to avoid using tables side by side, and i prefer to keep every complex element inside its own cell <td> even though the tables method is not wrong.
The first element we will need to create is the holding table:
<table cellpadding="0" cellspacing="0" border="0" width="600" class="fullwidth"> <tr> <td align="center"> Your content </td> </tr> </table>
This table will now have a fixed width of 600px but we also want it to adapt to the maximum width of our phone.
To do so we have addthe class "fullwidth". You can name the class anything you like as long as it has the same name of the one you are going to use in the media query. This class will have to be added inside the media query in the <head> as below.
3. Updating the media query with the right classes
...
<head>
<style type="text/css">
@media only screen and (max-width: 500px) {
*[class].fullwidth{width:100% !important;}
}
</style>
</head>
...As explained above, the media query uses these classes when the width of our device screen is below 500px. This value can be changed if you like; media queries can also be used multiple times to target different screen sizes, for example both iPad and iPhone, adding a second media query width different pixels value. For now lets focus one media query at a time.
Adding the "!important" after the style make sure every other style is ignored and the one specified in the media query is used instead. So our table will now ignore its original width of 600px and will use 100% instead.
4. Stacking cells inside a responsive table
Now that we have created our table, we need to add a second cell next to the initial one and the responsive code in order for the cells to stack on mobile.
Lets start with updating the media query. We need two new classes added in order to create a bulletproof responsive email.
The first class is "float: left" and the second one is "display: block".
...
<head>
<style type="text/css">
@media only screen and (max-width: 500px) {
*[class].fullwidth{width:100% !important;}
*[class].float_left{float:left !important;}
*[class].display_block{display:block !important;}
}
</style>
</head>
...We can now update our table as:
<table cellpadding="0" cellspacing="0" border="0" width="600" class="fullwidth"> <tr> <td align="center" class="float_left display_block fullwidth"> Left cell </td> <td align="center" class="float_left display_block fullwidth"> Right cell </td> </tr> </table>
Note that alongside the two new classes to the <td>, we need to add also the class "fullwidth" in order to push the cell to use 100% of the space it has available. Remember that even if you add "fullwidth" to a <td>, if the holding table has a different width (e.g. class="width_ninety" as "width: 90% !important;"), the cell will only adapt relatively to the size of its parent table.
In our case, we have a table that is stretching to 100% of the space available and cells inside it that are stretching 100% of the new width of the parent table.
5. Changing <td> to <th>
As explained in my previous post How to get a responsive HTML email to work on Android? the above method will not work on Android mobile emails. You can easily fix this problem by changing all the <td> to <th> and adding this bit of code to the header style (outside the media query):
table th { margin:0 !important; padding:0 !important; font-weight:normal; border-collapse: collapse;}6. More complex layout
Now that you have learnt the basics of responsive email design you can play around with more complex layouts. It is really that simple! You will just need to plan properly in order to don't get stuck with overly complex layouts. I personally find it very helpful to sketch the tables and the cells both on desktop and how i want them to stack on the mobile version. Make sure you then define all the widths of tables and cells and apply the appropriate classes to each of them.
All nested tables will work exactly like the one above. They can stack or not depending by your needs.
Here is an example of a slightly more complex layout using the same classes as above with nested tables:
<table cellpadding="0" cellspacing="0" border="0" width="600" class="fullwidth"> <tr> <td align="center" class="float_left display_block fullwidth"> <table cellpadding="0" cellspacing="0" border="0" width="600" class="fullwidth"> <tr> <td align="center"> Top left cell not stacking </td> <td align="center"> Top right cell not stacking </td> </tr> </table> </td> <td align="center" class="float_left display_block fullwidth"> <table cellpadding="0" cellspacing="0" border="0" width="600" class="fullwidth"> <tr> <td align="center" class="float_left display_block fullwidth"> Bottom left cell stacking </td> <td align="center" class="float_left display_block fullwidth"> Bottom right cell stacking </td> </tr> </table> </td> </tr> </table>
And the result:
I hope you have found this tutorial useful. If you have any question or would like to leave any feedback it would be good to hear from you. You can contact me directly via the contact form here or with the comments below.