This is a div block with a Webflow interaction that will be triggered when the heading is in the view.
- Branded signatures break on phones because the template was built for a monitor. Fix the template once, then deploy it, rather than fixing mailboxes one at a time.
- Width 300 to 500 pixels with an inline max-width, every style inline, explicit width and height on every image, and one column. Those four rules cover most breakage.
- Audit the delivered message on a phone, never the laptop compose window. On a server-side deploy the compose window may show nothing at all.
- Opensense deploys the HTML you lock exactly as saved. It does not rewrite two columns into one, and it does not generate retina variants for you.
- Test Outlook Mobile, Gmail, and Outlook on the web after every template change, then quarterly. The clients change under you; the template should not.
Branded email signatures break on phones because the template was built for a monitor. The fix is made once, by IT, in the one HTML template the company deploys, and the seven steps below are the whole of it. Employees editing the block on their own phones is how you get a different break on every device.
For the design system around it, fonts, line counts, legal lines, the complete email signature guide is the reference. This page is narrower: the signature looks right in Outlook on the web and wrong on a phone, and you want it fixed for everyone at once.
Audit the delivered copy, not the compose window
Send from the production tenant, the same path employees use, to mailboxes you control. Open the message in:
- Outlook Mobile on iOS and on Android
- Gmail on a phone, then in a browser
- Outlook on the web
- A tablet, held upright
Screenshot every one and note what broke. The usual suspects are a squashed logo and a horizontal scrollbar, plus the classic tell: a logo that arrived as an attachment called image001.png.
The laptop compose window is not evidence. On a server-side deploy the signature is applied as mail leaves the tenant, so compose may show nothing at all, which is expected. Audit the delivered copy.
If two employees already show two different breaks, you do not have a CSS bug. You have unmanaged local signatures, and step seven is the fix. The six before it decide what the standard looks like.
Width: 300 to 500 pixels, and the phone gets the final say
Phones present a message in a viewport roughly 320 to 430 pixels wide. A table built for a 650-pixel desktop signature does one of two things on that screen. It shrinks until the type is unreadable, or it grows a horizontal scrollbar.
Opensense’s help center puts the working width at 300 to 500 pixels, with up to 600 possible if you test it across clients. A target near 400 sits inside that band and fits a phone. Set a pixel width on the outer table inside that range, add an inline max-width: 100% so it can shrink further, and stop relying on a fixed desktop width.
Keep the block short while you are there. The guide’s figure is four to six lines: name, title, one phone, the company mark, one link. Long addresses wrap wherever the client decides, so break them yourself in the HTML. Body type stays at 14 pixels or larger, the name at 18 or larger.
Inline every style
Gmail and Outlook Mobile do not treat a signature like a web page, and neither does Outlook on the web. A style block gets stripped, and so does a linked stylesheet. A font size or a color that is not on the element itself will not survive.
So put it on the element. Web-safe fonts only. The guide’s list is Arial, Helvetica, Calibri, Verdana, and Georgia, because a custom webfont falls back to whatever the client has, the metrics change, and a line that fit on a monitor wraps on a phone. And do not paste from Word or a design tool. That markup arrives wrapped in classes and nested spans the client will either ignore or explode.
IT writes the inline styles once, in the locked template. Four hundred people do not each inline their own.
Give every image a width, a height, and a small file
An img with no width and height leaves the client to guess, and on a phone it guesses wrong: a 120-pixel logo becomes a banner, or a headshot flattens. Set both attributes in the HTML to the display size, and repeat them as inline styles with a max-width: 100% if the image has to shrink.
Resize the file before it goes in the template. The help center is explicit: resize images before embedding, and do not use HTML or CSS to scale a large file. For high-density screens, upload at twice the HTML size, so a logo displayed at 120 pixels wide is a 240-pixel file. That is an upload practice. Opensense does not generate or swap retina variants for you. Keep each file under 100 KB, the guide’s working ceiling.
Host over HTTPS from a URL you control, which for Opensense templates is the image bucket in the admin console, and give every image real alt text so the signature still names the company when the client has not loaded pictures yet.
One column
The logo-left, details-right layout is the standard desktop mockup and the standard mobile failure. On a 360-pixel viewport the two tables overlap, the text wraps under the mark, or the block scrolls sideways.
Stack it. Logo on the first row, contact lines on the rows below, social icons in one horizontal row rather than a grid.
Opensense does not rewrite a two-column template into one column at send time. It deploys the HTML you locked, to every mailbox, exactly as saved. If the mockup only works at 700 pixels and two columns, the mockup is wrong for email, and no deployment method fixes that.
Test three clients, then test them again after the rebrand
Each client parses the same HTML differently. Gmail strips CSS and proxies images through its own servers. Outlook on the web is not Outlook desktop, and Outlook Mobile on iOS is not Outlook Mobile on Android. Any other client on the server-side path receives whatever you locked, and if the markup is fragile it will show you.
Send from production after every template change. Check a light background and a dark one. Check the image-off state: alt text, name, and phone should still read. The Designer Studio preview in Opensense, including its Dark Mode Preview, is a sandbox for the template. It is not a substitute for opening the delivered message on a phone.
The FAQ on the email signatures page says Opensense signatures work on iOS and Android phones and tablets and are optimized for mobile viewing. Read that as “the locked template is what every device receives.” It is not a promise that untested HTML gets rewritten per client.
Then retest quarterly. Client apps change under you. The template should not.
Deploy the template so the phone does not get a vote
Steps one through six fail at scale if every employee still owns a local signature. One person pastes from Word. Another has no signature at all on the phone they actually send from.
Lock one HTML template, map name, title, and phone from Microsoft Entra ID or Google Directory, and deploy it one of two ways, or both:
| Path | How the signature gets there | What the phone has to carry |
|---|---|---|
| Server-side | An Exchange Online transport rule on Microsoft 365, or the Gmail API on Google Workspace, applies the signature as mail leaves the tenant | Nothing |
| Add-in | The Outlook add-in or Google Workspace Add-on shows the signature while composing. Employees can update the fields you enable and cannot replace the lockup | The add-in |
Most organizations finish the first deploy in about 45 minutes: connect the tenant, authenticate the directory, build the first template, roll out. After that a logo or disclaimer change is one template edit, and directory field changes follow on the connected sync cycle rather than mailbox by mailbox.
Why the same HTML looks different everywhere
Email clients are not browsers, and there is no shared rendering engine. Gmail has its own parser. Outlook desktop has historically rendered through a Word-based engine, and Outlook on the web and Outlook Mobile share it with neither Outlook desktop nor each other. Padding and margins differ, and so does which fonts even exist. A round headshot in one client is a square in the next.
Server-side deployment does not make Gmail render like Outlook. It makes sure Gmail and Outlook receive the same locked HTML instead of four hundred different pastes, which is the only part of the problem IT can actually close.
FAQs about branded email signatures on mobile
Why does the signature look broken on phones but fine on desktop?
The template is wider than the phone, uses two columns, or relies on CSS the mobile client strips. Fix the locked HTML, then deploy it so every mailbox sends that version, including mail composed on a phone.
Can we use media queries in an email signature?
Not reliably. Many clients strip them. Build a fluid single-column table instead: a pixel width in the 300 to 500 range, max-width: 100%, images with explicit dimensions. Opensense deploys the HTML you lock and does not inject a second mobile stylesheet.
How do we keep the logo from going blurry on mobile?
Set the HTML width and height to the display size and upload the file at twice that size, per the help center’s guidance. Resize before upload rather than scaling down in CSS. Opensense does not auto-serve retina variants.
Does this work with Outlook Mobile and Gmail?
Yes. Server-side deployment covers Outlook Mobile on iOS and Android, Gmail on the web and in the mobile apps, Outlook on the web, and other clients on that path. The add-in path covers Outlook, and Gmail through the Google add-on, wherever the add-in runs.
Should employees fix the signature in Outlook or Gmail on their phones?
No. That is how branded signatures drift. They can update the fields you enable through the add-in. They do not paste HTML into a mobile client.
Do we need a separate mobile signature?
No. You need one template that reads on both. It does not have to be pixel-identical.
Start with the phone in your pocket
Send yourself one message from the production tenant right now and open it on your phone. If the logo is squashed or the table scrolls, you already have the audit result for step one, and the rest of this page is the runbook. Book a demo to see the locked template on your own tenant.
