RocketResponder Template Guide
EMAIL DESIGN CONCEPTS
Think tables. It's very 2001 but email providers don't play nice with div tags and many use style sheets completely different. For this reason we'll use multiple tables for each block, and rather than table columns we'll use multiple tables floating to ensure they responsively expand on small displays.
CONTENT BLOCKS
Content blocks are the building blocks of all templates. The end user can easily add, remove, duplicate, or change the order they are displayed. To ensure your blocks are editable, they should each be in their own DIV tag.
Our editor comes with pre-made blocks the user can drag/drop into place. Below are the classes used for those blocks.
Classes
| .block | Used to ensure the editor knows its a separate block from the others. |
| .backgroundTable | Every block is wrapped in a full width table for the background color of the page. |
| .devicewidth | Used to responsively resize the width of the email itself (small screens 100% width, large screens typically 600px). Not recommended for color/styles. |
| .blockout | Used to color/style the blocks main color. Not recommended to use for sizing of the widths/heights. |
| .devicewidthinner | Used to responsively resize the inner content (small screens usually 100% width just like .devicewidth, big screens usually 10px less than .devicewidth). Not recommended for color/styles. |
| .blockin | Used to color/style the block inner content. Not recommended to use for sizing of the widths/heights. |
Block Example
<div class="block">
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0" class="backgroundTable">
<tbody>
<tr>
<td>
<table align="center" width="580" cellspacing="0" cellpadding="0" border="0" class="devicewidth blockout">
<tbody>
<tr>
<td>
<table align="center" width="540" valign="middle" cellspacing="0" cellpadding="0" border="0" class="devicewidthinner blockin">
<tr><td height="10" width="100%"></td></tr>
<tr><td>
<table align="left" width=49% class="devicewidthinner">
<tr><td valign=middle align=left>
<p><img width="250" style="width: 100% !important; height: auto;" src="https://www.rocketresponder.com/editor/assets/default/logo.png" alt=""/></p>
</td></tr></table>
<table align="right" width=49% class="devicewidthinner">
<tr><td valign=middle>
<p align=right>{$date}</p>
</td></tr></table>
</td></tr>
<tr><td height="10" width="100%"></td></tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
