Optimizing Emails for Mobile Devices (Mobile Responsiveness)
- 03 Apr 2024
- 2 minute read
- Print
- DarkLight
- PDF
Optimizing Emails for Mobile Devices (Mobile Responsiveness)
- Updated 03 Apr 2024
- 2 minute read
- Print
- DarkLight
- PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
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.
Make emails more responsive by adding an HTML snippet
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. While it's not appropriate to include in all circumstances, you may find that it works well enough for most situations.
To add the mobile snippet to communications:
When editing a message, click the Source button in the HTML editor.
Between the ... tags, place code listed below
<style>@media only screen and (max-width: 480px) { table, img { width: 100% !important; height: auto !important; } }</style>Click Save.
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.
This is more of a blunt instrument than a scalpel: it resizes all tables and images indiscriminately. However, this technique works as a quick fix for many emails.
Add an HTML table to prevent horizontal scrolling on mobile
The following full HTML code can also be used to create a centered table in which all 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?
