Last time we looked at why should an organization invest into Responsive design and shared few few tips http://topliners.eloqua.com/message/27900 to get started. As many of you have adopted the trend, there are common questions such as how do you get the email to behave from 2 or 3 columns on desktop to single, one column design in mobile browsers. Let's look at the example below to get started. The example will not only work for 2 or 3 columns but as many as needed.
Let's use the basic structure of HTML tables for email in the body section.
<body>
<table border="0" cellpadding="0" cellspacing="0" class="columns-container">
<tr>
<td class="col" style="padding-right: 20px;" valign="top">
<ul><li>Cloumns 1 text goes here</li></ul>
</td>
<td class="col" style="padding-right: 20px;" valign="top">
<ul><li>Cloumns 2 text goes here</li></ul>
</td>
<td class="col" style="padding-right: 20px;" valign="top">
<ul><li>Cloumns 3 text goes here</li></ul>
</td>
</tr><table>
</body>
</html>
You can have nested tables or any text within each <td> tag referenced above. It doesn't matter, it will line up based on the three <td> cells referenced in above table.
Now insert the following header code above page which will all all colums to appear as rows.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0"> <!-- So that mobile webkit will display zoomed in -->
<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->
<style type="text/css">
/* Constrain email width for small screens */
@media screen and (max-width: 600px) {
table[class="container"] {
width: 95% !important;
}
}
/* Styles for forcing columns to rows */
@media only screen and (max-width : 600px) {
/* force columns to rows */
td[class="col"] {
display: block;
padding-right: 0 !important;
}
</style>
</head>
Hope this helps you to get started on complex responsive design email or landing page templates.
Thank You
Amit Pandya