Rendu mobile des signatures d'e-mail : ce qui semble mauvais et pourquoi
The lede: your carefully crafted email signature—logo, phone, title, links—looks like a ransom note on a phone. The 600px-wide layout you perfected in Outlook is now a 375px-wide column of broken text, overlapping buttons, and a QR code the size of a postage stamp. This isn't a cosmetic issue; it is a conversion killer. Every email you send is a mobile landing page, and if that page renders poorly, you lose the click.
The physics of the 375px viewport
The core problem is not your design skills; it is the fundamental difference between a desktop email client and a mobile one. On a desktop, your signature has roughly 600–800px of horizontal space. On an iPhone SE or a standard Android device, that space shrinks to 360–375px. Email clients do not reflow HTML the way a modern browser does. They rely on a mix of table-based layouts and inline styles, and when the container is narrower than the content, the client makes a decision: scale down, truncate, or wrap.
Most clients choose to scale. Gmail and Apple Mail will shrink the entire table to fit the screen width. This is why your 14px font looks like 8px on a phone. The layout is "correct," but it is unreadable. The alternative—wrapping—is worse. A table cell with a fixed width of 200px containing a long URL will break mid-word, shoving your phone number to a new line and creating a jagged left edge.
The fix is not to design for the desktop and hope for the best. You must design for the constraint. Use a single-column layout, stack elements vertically, and rely on fluid widths (max-width: 100%) instead of fixed pixel values. If you are still using a two-column table with a logo on the left and text on the right, you are already failing on 60% of your recipients.
The tap target problem
Mobile is not just about reading; it is about tapping. Your thumb is roughly 45–57px wide. Apple’s Human Interface Guidelines recommend a minimum tap target of 44x44pt. Most email signatures have links that are 12px tall and 80px wide. That is a miss on the first try, and a frustrated recipient on the second.
Consider the standard signature layout: a name, a title, a phone number, and three social icons. On desktop, those icons are 24x24px, which is fine for a mouse. On mobile, those same icons are 24x24px, which is a 50% miss rate for a thumb. The result is that users zoom in, tap, miss, zoom in again, and then give up.
The technical culprit is the lack of padding on the anchor element. You cannot just make the icon bigger; you need to increase the hit area. Wrap the icon in a <td> with padding, or add padding: 10px to the anchor itself. This does not change the visual size of the icon, but it expands the clickable region. If you are using a signature builder that does not allow you to control padding, you are locked out of the most important mobile fix.
Why Outlook on mobile is a special kind of hell
You might think Outlook is a desktop problem. It is not. The Outlook mobile app uses the Word HTML rendering engine, which is notoriously bad at supporting modern CSS. It ignores max-width on divs, mishandles flexbox entirely, and has a habit of adding extra space between table cells. This is why a signature that looks perfect in Gmail will suddenly have a 20px gap between your name and your title in Outlook.
The specific issue is the mso conditional comments. These are HTML comments that only Outlook renders. If you do not include them, Outlook will default to its own quirky layout rules. For example, a common fix is to add <!--[if mso]><table role="presentation" width="100%"><tr><td><![endif]--> around your content. This forces Outlook to use a table-based layout that it understands.
But here is the catch: the Outlook mobile app does not fully support these conditional comments either. It renders them, but it also applies its own padding and margin resets. The result is that your signature might look fine in the desktop client but have a broken layout in the mobile app. The only reliable fix is to test on the actual device. If you are not testing on an iPhone and an Android phone with the Outlook app installed, you are shipping broken code.
The image trap: logos and QR codes
A logo is a critical part of your brand, but it is also the most common source of mobile rendering failure. The issue is not the image itself; it is the dimensions. If you set a logo to width="200" height="80" in the HTML, the mobile client will render it at that size, even if the screen is only 360px wide. This pushes the text below it down, creating a massive white gap at the top of your email.
The fix is to use max-width: 100% on the image and set the height to auto. This allows the image to scale down proportionally. But there is a second issue: file size. A 500KB logo will load slowly on a mobile connection, and many email clients will block images by default. If your signature relies on an image to convey your contact info, and the image is blocked, the recipient sees nothing.
QR codes are the worst offender. They are a grid of black and white squares that require a minimum resolution to be scannable. If you shrink a QR code to 80x80px to fit a mobile screen, it will not scan. The camera needs at least 150x150px of clear space to read the code. If you must include a QR code, put it on its own line, give it a fixed size of at least 160px, and accept that it will push the rest of your signature down.
The dark mode disaster
Dark mode is not a trend; it is a default on most modern phones. The problem is that email clients handle dark mode differently. Gmail will invert colors, Apple Mail will apply a dark background, and Outlook will do nothing at all. If your signature has a white background with black text, it will look fine in Gmail (it inverts to black background with white text), but it will look broken in Outlook (white background stays white, but the text might become light gray on a dark background).
The technical fix is to use the prefers-color-scheme media query in your HTML. You can define a dark mode variant of your signature with a dark background and light text. However, support is inconsistent. Gmail supports it, Apple Mail supports it, but Outlook does not. The practical approach is to design your signature with a transparent background and high-contrast text that works on both light and dark backgrounds. Avoid fixed background colors on the table or the cells.
The bigger issue is with images. A logo with a white background will show a white box in dark mode. The fix is to export your logo with a transparent background (PNG) rather than a white background (JPG). This is a simple fix that most people overlook because they are designing on a white canvas.
How newmail.click handles this
We built newmail.click with mobile rendering as a first-class constraint, not an afterthought. Our free signature builder generates table-based HTML with fluid widths, proper tap-target padding, and dark-mode-safe styling by default. We do not allow fixed-width layouts that break on a 375px viewport. For Pro users, we add click and open tracking that works on mobile clients, with alerts delivered to Slack or email so you know when a lead opens your email on their phone. We also set UTM defaults on your links automatically, so you do not have to manually append tracking parameters to every URL. The output is a single block of HTML you paste into Gmail, Outlook, or Apple Mail, and it renders correctly on the first try.
The difference between a signature that converts and one that annoys is measured in milliseconds. A mobile user decides in under a second whether to tap your link or delete your email. If your signature is broken, they delete. If it is clean, they click. The tools are free, the fix is simple, and the payoff is a measurable lift in engagement from the device your recipients use most.