Rebelmail designs all of our emails in 3 formats and at retina resolution. Our emails are then coded to take full advantage of all the features available in the best clients and a fallback gracefully in less capable email clients.
For example PSDs see here:
- Interactive Mobile - All clients that support interactivity and responsive css, while running on devices below 600px wide (i.e. iOS Mail on Apple iPhones)
- Interactive Desktop - All devices above 600px, responsive support not required (i.e. Apple Mail)
- Static - This is the static fallback design for all devices, where interactivity is not possible (i.e. Outlook)
All Rebelmail email use the same base wrapper code. The wrapper is robust, and uses what is often referred to as fluid hybrid email code. This means it has a maximum width set (600px) and if the email is viewed on a device narrower than that width, it will adjust to fit the viewport.
- You can read more about it on our blog
There are a lot of articles that talk about the best way to code email. Our code is different so it's best to largely ignore these.
Most important, avoid fixed width code. Your code will be placed in our container, which has a default width of 600px, which can be adjusted to fit brand. Therefore, setting a width of 100% to your custom HTML will fill our container, not the full screen. As the container shrinks for smaller screens, the content will shrink as well. Using fixed width code will prevent the width from adjusting and break the layout and functionality of code.
Along with building our code in a fluid 600px container, we declare a default
color, so no need to reset those unless you add a new table. This helps minimize file weight.
A complete HTML email is not required in order to work with the Rebelmail wrapper. We recommended creating stand alone snippets of HTML and the related CSS.
class names are compressed and uglified, so they will not conflict with your custom code.
Included in every Rebelmail template is a CSS media query will apply a width of 100% to container at screen-sizes below the defined container width
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#dddddd" style="background:#ddd" class="kxm"> <tr> <td style="font-size:0" class="qjr"> </td> <td align="center" valign="middle" bgcolor="#eeeeee" width="600" class="ydw" style="font-family:Arial,Helvetica,sans-serif;color:#333;font-size:14px;background:#eee;text-align:center;line-height:24px"> <!-- Custom HTML --> <!-- Rebelmail Interactive HTML --> <!-- Custom HTML --> </td> <td style="font-size:0" class="qjr"> </td> </tr> </table>
Custom CSS can be added as well. It will be included in the document
<head> after the Rebelmail CSS.
<style> /* RM style blocks */ </style> <style> /* CUSTOM style blocks */ </style>