By now most web designers and developers are used to the idea of mobile responsive websites. Instead of developing two separate websites for mobile and desktop, we now design a single website that can respond and resize to the screen it is being viewed on. Any website worth its salt needs to be able to fit in multiple form factors for the growing number of devices added to the market every day. Almost all websites now use responsive CSS that allows the website to flex shift and respond to the device width.
So the natural question when a web designer is asked to create a signature for their client is "how do I make this email signature mobile responsive?" It's an important question considering that up to 50% of emails are read on mobile devices according to TrueList, but the answer isn't as simple as we might like it to be.
TL;DR Email signatures cannot be responsive, but they can be mobile friendly
Responsive CSS requires something called "media queries". These are code statements that are used tell a web browser how to adjust the website styles at different screen sizes. Unfortunately, in the world of email programs, media queries will be automatically removed when you copy and paste an email signature into an email clients such as Outlook, Apple Mail, or Gmail.
And without media query code, an email signature cannot be "responsive" and change on different sizes of devices. So our best option is to design an email signature in such a way that it looks great on all device widths and sizes. We will talk about that more below.
What can I do to make a good mobile email signature?
Creating a great mobile email signature has more to do with the design than the code of it. Understanding how each mobile device treats email signatures and testing yours after you have created it is an important step to making a professional mobile email signature.
TIP 1: Don't make email signatures too wide
The best mobile email signatures are typically below 400 pixels wide. We recommend sticking to 320px if you want them to look great on older devices as well. Most iPhone email apps will scale down a signature that is wider than that. This can be hardly noticeable if you are a little wider, but if you have a 600 pixel wide signature, you will notice that both text and images will appear to get very small, and this can make them really hard to read for a recipient.
TIP 2: Keep font sizes small to medium
Really large font sizes can be visually appealing (or attention grabbing at the least) within an email signature on a desktop computer email client. But within a mobile email app, they can be far too large and distracting. Sometimes they can even push the text to multiple lines where it wasn't intended, which makes it hard to read and visually unappealing.
TIP 3: Don't use more than 2 columns
While there is nothing implicitly wrong with using multiple columns in an email signature, each column you add does tend to make the signature wider. So this has more to do with the first tip about width than anything else. With too many columns a mobile email client will scale the signature to match the width of the mobile phone, making it hard to read.
TIP 4: Don't add too much into your signature
While we love email signatures, it can be annoying on your iPhone to get a quick response email saying "Yes, I agree." with forty plus lines of email signature below it. Find that balance of what is important in your email signature without going overboard. Or consider designing a separate email signature that is purely sent from your mobile devices.
TIP 5: Be aware of dark mode
Dark mode can be a popular setting today on mobile devices. It is easy to forget that you need to design an email signature to be ready for dark mode. If your logo is transparent and includes black text, it will be rendered nearly impossible to read on a device with dark mode. If you need some design tips for handing dark mode, check out our article all about dark mode email signatures.
What happens to an email signature on mobile devices?
When using a "designed" email signature on a smartphone, you should be aware of what can happen to your mobile signature. Many of these things are out of our control and we can only partially design around them.
It may get scaled down in size
As we mentioned above, if your signature is too wide then iOS will add a "transform" property on it which shrinks the entire signature down to the width of the device. This is better than it getting cropped off, but it can make the signature harder to read the smaller it gets. Strangely, this transform property stays on the email signature after the mobile device sends a reply. Some email clients such as Apple mail will also render the signature smaller within the reply email!
It may be in dark mode
Its always good to be aware that there is a large population of users that have opted to set their device in dark mode, which can render a mobile signature differently than you may have designed it. See our dark mode tip above for more information.
It may lose its images after a reply
Because of the way Outlook sends images in an email, an iPhone signature can lose those images after a reply or a forward. This is a frustrating result of incompatibilities across the email ecosystem, you can read more about it in our article about how Outlook handles images in email signatures.
How do I code a mobile friendly email signature?
As I have reminded readers before, coding an email signature is like taking a pre-historic journey back to the beginning of the web. Some of the most popular email clients out there do not use modern CSS in the same way that you may be used to on the web. In fact, one of the most popular (Microsoft Outlook) doesn't use a web browser to render HTML code at all! It actually uses the Microsoft Word rendering engine, which has major limitations.
Outlook isn't the only problem though as all email apps come with their set of quirks. Gmail is particularly strict because they are loading your email inside of a website already, so they work really hard to make sure any styles you write in your email don't "bleed" out of your email and into their interface.
Since all of these platforms have limitations, we need to code email signatures very specifically:
TIP 1: Tables for Layout
Most of the time, its safer to use tables for any kind of layout in email. No flexbox, or grid, or even float based layouts. Just good ole' tables straight out of 1998. If you want to put two elements side by side, then tables with columns is the only way to do it.
TIP 2: Inlined Styles
This is not quite as true in all emails you create for marketing purposes any more, but it is very true for email signatures. Instead of putting your CSS styles into a separate CSS file, or even putting them at the top of your email in a <style> tag, you will need to separate your styles and put them inline on the elements that you want to change, such as this headline:
<h2 style="font-size:18px;color:#777777;font-weight:bold;">My Headline</h2>
Can I use media queries in email signatures?
In short, you cannot. There are two issues with mobile responsive email signatures: The first is that responsive css code depends on CSS media queries, which look like this:
<style>
@media (max-width: 400px) {
.class-name {
font-size: 12px;
}
}
</style>
See how that is wrapped in a style tag? There is no way to inline a css media query, it must live in a style tag. The problem is that almost all email clients will remove the style tag when you copy and paste a signature into the signature preferences for that program.
You see, hardly any of the email programs will take your HTML code as is. They all rewrite it at some point to convert it into the code that they will allow. Some of them more-so than others. Some will mostly leave it alone, but ignore certain elements, and others will take your code and change it so much that you would barely recognize it if you looked at it again after it was sent and received.
Signature.email can help you!
The good news is that our email signature generator already creates email signature code in the most compatible way and we have already tested our code across all of the major mobile devices and apps. Our advanced editor allows you to create a uniquely designed email signature for your company, including your company logo, brand colors, contact details, job title, company website url, and much more.
If you are feeling stuck, check out our creative email signature design tips and get the creative juices flowing again.
The bad news is that much of email signature mobile compatibility is up to you and how you use the tool. Decisions such as how wide the layout is, what images you upload, what font sizes you use and more will make a difference on mobile. Now that you know more about making a mobile friendly email signature, go try it out! (We promise it will be way better than "Sent from my iPhone".)
