Optimizing Emails for Mobile Devices (Mobile Responsiveness)
- 27 Mar 2026
- Print
- DarkLight
- PDF
Optimizing Emails for Mobile Devices (Mobile Responsiveness)
- Updated 27 Mar 2026
- Print
- DarkLight
- PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
Mobile phones account for the majority of email opens for most institutions, so it's important that HTML email templates are optimized for mobile. Mobile screens are narrower than those on desktops and laptops, so HTML that adapts to different screen widths — known as "responsive design" — is increasingly standard. If your institution works with a web designer, ask them to provide responsive HTML email templates.
Make emails more responsive by adding an HTML snippet
If emails at your institution are designed in-house by staff who aren't familiar with responsive design, the following code snippet can help. Paste it into the HTML editor to make email content fit better on a mobile phone. The snippet creates a media rule that applies to devices with a screen width of 480 pixels or fewer. It forces all tables and images to a width of 100%, so content fits on the screen without horizontal scrolling.
This snippet isn't appropriate for every email — it resizes all tables and images indiscriminately, without fine-grained control. However, it works well as a quick fix in many situations.
To add the mobile snippet to communications:
When editing a message, select Source in the HTML editor.
Between the
<head>tags, place this code:<style>@media only screen and (max-width: 600px) { table, img { width: 100% !important; height: auto !important; } }</style>Click Save.
Select the phone icon next to the message preview to see how the message appears on a mobile device.
Add an HTML table to prevent horizontal scrolling on mobile
You can also use the following complete HTML template to wrap your email content in a centered table, which prevents horizontal scrolling on mobile devices:
<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>Was this article helpful?
