Responsive Templates and Design


A Growing Need for Responsive Design

As many email ninjas are aware, mobile engagement in the email world has been on a steady rise for several years now, and it shows no signs of slowing down.  This last month SendGrid reported that roughly 45% of all messages relayed through our system were engaged by a mobile or tablet device.  This growing trend has brought to light some issues in HTML/CSS rendering caused by the different ways that all of these devices and operating systems display a message.  There are many factors involved that can cause such as the rendering engines of these devices, the pixel allotment on each device's screen, and the different coding that each program and device is able to support.

For more information on what variables can affect the rendering of your messages please check out Litmus' Documentation on this subject.  We also encourage you to take a look at SendGrid's article regarding HTML/CSS coding and rendering.

In reaction to these trends, and in order to resolve some of our users' reported issues with HTML/CSS rendering, we have decided to release a few responsive email templates.  These templates are ready for use, however they were designed with the intention of being more of an interactive guide so that you can learn from them and eventually create your own custom email templates.

The More You Know

The first step in making these templates responsive was to research the most common screen resolutions and pixel sizes.  We narrowed this down to around 600 pixels, which guided our media queries and overall template size.  In essence, these media queries were designed to recreate the pixel sizes of the elements in this template so that they fit into the pixel allotment of these different sized screens.

The next task was to ensure that when this pixel change occurred the elements mentioned would stack over the top of each other.  For this we decided to use <align> in the table elements.  This also provided a workaround for the usual <float> tag, which is not widely supported by email clients.

To combat the different issues associated with image size, we used the max-height and max-width tags in addition to the normal height and width tags to make sure that image height was uniform within the template.  This eliminates many of the issues that come about from mobile rendering of images of different pixel sizes.

Best Practices and the Result

These templates have been tested to render as expected in Android, iOS, tablets, and across most mail clients.  There are still some minor display discrepancies, such as padding issues in Outlook 2003, 2007, 2010, (suprisingly fine in 2011) and 2013, which seems to only be affecting the text inside our table parameters.  These templates are not very responsive on Android's Outlook and Gmail applications due to complications with these apps' inability to accept these media queries.  These apps strips all CSS in the header, which invalidates the media queries.  However, since we used the different align calls and have tried to control padding and float, we were able to account for most of these issues.   

Those of you who are familiar with the issues associated with HTML rendering will know how many interlocking pieces are required to fit together in order for these templates to properly function across multiple platforms and devices.  As such, we do not advise changing any of the parameters you see inside of the calls except for the basics:  background colors, text styles, images, links, titles, heading, etc.  If you do personalize these templates for your own use, know that you do this at your own risk and it is advised you test the possible rendering afterwards.  It is also recommended that when you change these templates or build your own that you use meshing background colors, or all white.  This will eliminate the chance of borders and padding appearing to overlap certain cells.  

You can also change the actual format of the template itself to suit your needs.  However, if you do so then it is at your own risk and you should test it before sending to your recipients. You should make sure that when designing these emails that you are using images with a pixel width that is equal to or less than 580.  It is also recommended that your images be uniform in their pixel dimensions where warranted in order to achieve the best rendering on different devices.

We suggest using Litmus to test the rendering of these templates after you have personalized them, as they offer some of the best HTML template services on the market.  Litmus will allow you to test your message content rendering across almost all mail clients and mobile devices before you send.  A test of this sort is HIGHLY recommended before utilizing these templates to ensure that changing this content will not affect the way your message rendered.  We also advise that while editing your HTML/CSS you should also use a real-time HTML editor, such as HTMLinstant, to view your changes.

The Templates

In my experience I have found that it is best to keep mobile templates as simple as possible.  The more bells and whistles that you include in a mobile template, the higher the probability that something will go wrong when it is rendered.  Even when adding colored backgrounds or more elements, you will see overlapping borders and cells that can cause the message itself to render improperly.  Because of this, these templates have been left quite plain. 

We are releasing three basic responsive templates as of right now.  These templates have been left plain in order to promote more reliable rendering on different devices and screens.  You will see that all three respond nicely to differently sized screens and devices, with only a few minor rendering issues.  RT 3.0 is the simplest, and it seems to render the best due to its plain background colors, uniform image parameters, and simplified table design.

SendGrid users are more than welcome to change these templates to suit their needs, however we encourage you to use these templates as a learning tool in order to design your own responsive templates.  Truly responsive design should be geared towards one's own personalized content.  As stated earlier, there ARE some rendering issues to be expected with different devices and applications. These templates will guide you towards understanding these rendering issues and should provide you with the knowledge needed to resolve them.

RT 1.0RT 2.0RT 3.0

We're Here to Help

Please understand that these templates are not perfect, and that we will continue to edit them as trends and policies change.  As stated earlier, please refrain from changing any of the elements restricting pixel size, padding, and alignment unless it is truly necessary.  We hope that these basic templates meet your responsive design needs, and that they will eventually help you create your own customized, responsive templates in the future.

If you happen to notice any issues with these templates then please do not hesitate to contact our Support Team at your earliest convenience.