Optimizing Emails for Mobile Devices (Mobile Responsiveness)

Slate provides powerful tools that enable you to exercise granular control over your email communications. Using the HTML editor, you can fashion templates that react and respond differently when viewed across different devices, such as desktops, laptops, and mobile phones. Email templates are often designed by a web designer at or working with a school, and the designer will provide the school with HTML source code for email templates.

As mobile phones constitute the majority of all email opens/views for most schools, it is important that HTML templates be optimized for mobile phones, which have less width available to them than email clients on desktops and laptops. The technique of creating HTML that reacts differently is known as a "responsive design." At this point in time, all web designers should be providing their institutional clients with HTML templates that are responsive.

We recognize that some emails may still be designed in-house within an office where staff may not be familiar with responsive design programming techniques. For these situations, we have provided some simple code that can be inserted into the HTML editor to make an email's contents fit more appropriately on a mobile phone. This is a blunt instrument, not a scalpel, so while it's not appropriate to include in all circumstances, you may find that it works just perfectly for most situations.

  1. When editing a message, click the Source button in the HTML editor.
  2. Between the <head>...</head> tags, place code listed below
    <style>@media only screen and (max-width: 480px) { table, img { width: 100% !important; height: auto !important; } }</style>
  3. Click Save.
  4. Click the phone icon next to the message preview to see how the message would appear on a mobile phone.

This small snippet of code creates a "media" rule that is applied to devices with a screen width of 480 pixels or fewer (e.g., mobile phones). It then forces all tables and images to have a width of 100% of the screen, so that everything appears on the screen without horizontal scrolling.

As mentioned earlier, this is a blunt instrument, since it will resize all tables and images indiscriminately, but this technique can be leveraged for many emails where a quick way is desired to make an email responsive.

The following full HTML code can also be used to create a centered table in which all of the content appears:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">@media only screen and (max-width: 480px) { table, img { width: 100% !important; height: auto !important; } }</style>
</head>
<body>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 650px;">
<tbody>
<tr>
<td>
<p>Testing 1, 2, 3</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Was this article helpful?
27 out of 28 found this helpful