---
title: "Optimizing Emails for Mobile Devices (Mobile Responsiveness)"
slug: "optimizing-emails-for-mobile-devices-mobile-responsiveness"
updated: 2026-03-27T19:49:05Z
published: 2026-03-27T19:49:05Z
canonical: "knowledge.technolutions.net/optimizing-emails-for-mobile-devices-mobile-responsiveness"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.technolutions.net/llms.txt
> Use this file to discover all available pages before exploring further.

# Optimizing Emails for Mobile Devices (Mobile Responsiveness)

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:

1. When editing a message, select **Source** in the HTML editor.
2. Between the `&lt;head&gt;` tags, place this code:

```xml
<style>@media only screen and (max-width: 600px) { table, img { width: 100% !important; height: auto !important; } }</style>
```
3. Click **Save**.
4. 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:

```xml
<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>
```
