How to Optimize Your Email Signature for Mobile Devices

Although mobile devices can be considered miniaturized versions of desktops, they still have some obvious and not-so-obvious differences that are surprisingly overlooked. Knowing these differences is very important when you’re wanting to optimize your email signature for mobile use.

As a result of being handheld devices, most mobile devices have smaller screens which result in a narrower viewport. This, of course, was made for convenience as it makes them easier to operate using even just a single hand.

However, this can be a bad thing when it comes to email signatures. Wide email signature designs tend to do poorly on mobile devices due to their narrower screens. In most cases, even flipping the phone to portrait mode cant help with this issue.

The majority of issues related to email signatures and mobile devices happen due to email signatures being wider than 400 pixels.

Mobile email apps of the same name but on different operating systems can vary greatly in terms of functionality, unlike their desktop versions. For example, although Outlook for Windows and Mac have some differences (design-wise), their core features and functionality remains exactly the same. They both use the Word Rendering Engine to render HTML, which makes email signatures look more consistent.

On the other hand, Outlook for Android only recently started supporting HTML email signatures whereas Outlook for iPhone already supported this much earlier. And although they both now support HTML email signatures, the resulting signatures look different when compared between the 2 devices.

This disparity between platforms can sometimes make it rather difficult to optimize your email signature for mobile devices.

Unlike desktop devices, mobiles have a more limited selection of options and settings which can directly affect how email signatures are handled. A limited number of installed fonts, a lower screen resolution, and limited zoom are the most common issues.

Having a limited number of installed fonts can mean that your email signature text reverts back to fallback fonts more often, which can sometimes affect spacing. Screen resolution is restricted to the default so it can’t be used to give room to wider email signatures.

Lastly, mobile devices can only really zoom in and not out when viewing emails, so an email signature will be displayed at its smallest possible size, which is sometimes too big. 

This is usually the result of a wide email signature being displayed on a mobile screen. Due to most mobile devices having a low resolution, they can only do so much to fit a wide signature or image on their display.

Compressing or squashing images is the most common adjustment made when mobile email apps try to render email signatures. However, the images don’t need to be very wide for this to happen. Certain layouts like an image side by side with particularly long text can also cause this.

Basically, any signature width greater than around 400 pixels can experience compressed images.

However, there is a fix for this! If you want your image to maintain its size, you can put a height and width attribute onto the <img> element, which will ensure the image isn’t compressed at all.

<img height="120" width="120" alt="image" border="0" src="<hosted image URL>">

This will stop your images from getting squashed (or compressed) but is causes another problem, which is text wrapping.

Similar to compressed images but for text, text wrapping is the continuation of long text onto the next line. This is the same as writing a long sentence and continuing it on the second line when it can no longer fit on the first line.

Addresses, phone numbers with extensions, and disclaimers in your email signature are the main ones affected by this due to how long they can be, especially if the font is bigger.

But it is important to note that certain email signature layouts like the classic left image, right text can cause text wrapping even if the text is relatively short. This is because images also take up space when horizontally aligned with the text. 

Commonly observed when sending from desktop to mobile, the email signature is displayed with a reduced size but retains its overall structure similar to how it looks on desktop.

Basically, the mobile device adapts itself to the signature instead of the other way around. So, image compression and text wrapping are non-factors in exchange for a smaller-sized email signature.

The size will vary depending on the overall dimensions of the email signature. This can occur when sending from mobile to mobile but it is quite rare. Also, sending from certain desktop email clients like Outlook, Apple Mail, and Gmail increases this occurrence but it is not guaranteed. 

Believe it or not, considering everything that has been tackled so far, it is possible to optimize an email signature for mobile use. Although it can be limiting when it comes to design, having a fully functional email signature on mobile is way better than having one that looks great on desktop devices, but is practically unusable on mobiles. Here’s how to optimize your email signature for mobile devices.

Optimizing an email signature for mobile use can be complex at times. There are a few hurdles to jump through and it can be tedious work (as you’ll find out below).

Using a professional signature tool such as Gimmio will save you tons of time, especially since all the templates have been tested for mobile compatibility and are professionally coded. No need to optimize anything or dabble with HTML code, just enter your details, and away you go!

A critical dimension that should always be considered when designing email signatures is the signature width. To optimize your email signature for mobile, the width of the signature should be kept under 400 pixels.

Going above the 400-pixel maximum value can cause image compression and text wrapping as the signature is too wide for mobile displays.

Another very important note is that although mobile devices have two modes which are portrait (upright) and landscape (sideways), email applications only seem to consider the portrait width. This means switching from portrait to landscape will provide little to no benefit to the email signature. It will still behave as if it was being displayed in portrait mode. 

With that said, it is also advantageous to be aware of the common mobile screen widths and heights (known technically as the viewport size) to help with designing your email signatures.

As you can see from the table to the right, most modern mobile phones have a screen width of around 400 pixels or under – hence our recommendation of keeping your email signature width under 400 pixels.

Due to the display limitations of mobiles, certain layouts become impractical to use if you want to optimize your email signature for mobile compatibility. With this in mind, there are two types of layouts:

Among the two, horizontal (side-to-side) layouts are clearly at a disadvantage due to the 400-pixel width limitation as they are typically the wider of the two. The most basic horizontal layout is having an image on the left and then the text on the right (or vice-versa depending on your preference). However, this does not mean that they are unusable on mobile. It only means that they will have to be more compact than usual.

With that said, here are a few tips to help make horizontal layouts more compact for mobile use:

1. Minimize spacing – such as between the two sides of an email signature (left and right).
2. Avoid (overly) wide images – they take up more space, leaving less space for text. Try to use long/tall images instead.
3. Use short tags for contact details – for example, ‘M’ instead of ‘Mobile’ or remove them altogether. You could also use an icon instead of text for the tag.
4. Long text should start on the far left – such as a long address or disclaimer. Design the email signature in a way that the text can go under the image (to gain more space for the text).
5. Use a small font size – smaller fonts are narrower, which reduces the overall signature width.

If adjusting a horizontal layout proves too difficult, then using a vertical (top-to-bottom) might be easier. Unlike horizontal layouts, vertical layouts are longer than they are wider. This very characteristic makes them better suited for mobile displays as they do not have to deal with the width issue (in most cases). Typical layouts of this type have their image either at the very top, in the middle, or at the bottom. Ironically, this allows them to use wider images. They can also use slightly longer text lines and/or full tags since they are not placed side by side with images.  

However, despite being well-suited for mobile, vertical layouts do have one glaring issue and that is how lengthy they can become. A signature that is too tall will require the recipient to scroll down just to see the rest of it. This can be an inconvenience for recipients. An email signature and its entirety should fit on the screen without requiring any additional scrolling (excluding the scrolling required to go over the email).

Although making email signatures compact for mobile is essential, this can also have an adverse effect if you’re not careful. This is especially true for social media icons and text hyperlinks as it can cause users to accidentally tap on the wrong link which can be rather frustrating. Therefore, spacing out each element appropriately is a must.

Elements that do not have hyperlinks or do not usually get hyperlinked can remain compact. These include your Name, Title/Position, Photo, Disclaimer, and other similar fields.

On the other hand, hyperlinked elements or those that may get hyperlinked later on will definitely need to be spaced accordingly. The smaller the font/icon/image, the more space they should have. This makes accidentally tapping the wrong element less likely. For bigger fonts/icons/images, the reverse should be followed. Their inherently bigger size already makes them easier to tap on. Thus, only minimum spacing is required for them. 

Basically, email signatures and their hyperlinks should still be accessible and convenient to use despite being compact.

Mobile devices use scaling in order to enlarge any images you use in your email signature. Thus, if you’re using rasterized images (PNG, JPEG, GIF, etc) their flaws become more apparent if the image resolution isn’t high enough.

To avoid degrading the quality of the images used in your email signature, it is highly recommended to use images with at least 3x higher resolution than what is actually used in the <img> element of the signature.

For example, if this is your <img> element:

<img height="150" width="150" alt="image" border="0" src="<hosted image URL>">

The height and width are set to 150 x 150 pixels. That means the resolution of the image should be 450 x 450 pixels.

All images are made up of pixels and each pixel contains information about the image. The number of pixels determines the quality of the image. Therefore, if an image has a 3x higher resolution, then its pixel count will be three times higher which results in an image quality that is also three times better. That is more than enough to mitigate the quality degradation and pixelation when the images are scaled down and/or zoomed in on mobile. 

Of course, images with even higher resolutions can be used, but be careful not to go overboard as larger images also make your email signature size (in Kb) bigger. Having a large email signature has many disadvantages such as the recipient’s computer taking longer to download the images, and your emails taking up more hard drive space on mail servers.

Choosing the correct font size(s) for an email signature can mean the difference between clear, readable text and a bunch of digital scribbles. Mobile email signatures are notorious for having fairly inconsistent font sizes. Text that looks appropriately sized on desktops can sometimes look tiny on mobiles.

The typical font size range for email signatures is 11 – 18 pixels which also happens to include the most common default font sizes for email clients and apps which are 11 and 12 pixels. Of course, there are no strict rules against going outside this size range. Bigger fonts can be used to emphasize certain text, but they take up more room. On the other hand, smaller fonts will draw less attention and can be used to fit in lengthy disclaimers. However, they may not be suitable for visually impaired recipients, hence why we don’t recommend using fonts smaller than 11 pixels.

The main goal is to ensure that the resulting email signature is clear and legible on desktop and mobile devices.

A click-to-call link makes it easy for your recipients to call you directly from your email signature. They just tap on your phone number in your signature, and it opens the dialler prompt on their phone.

From there, they can tap the call button to begin calling. Much easier than manually copying and pasting your phone number.

Unlike with websites and email addresses, phone numbers are not guaranteed to be hyperlinked automatically by email clients and applications. If the email app and/or device recognizes the phone number either via your contact list or from past usage, then it may hyperlink it automatically. But more often than not, it is safer to assume that phone numbers will be left untouched. This makes adding a click-to-call link to your phone numbers essential when you optimize your email signature for mobile.

Adding a click-to-call link is easy, simply add ‘tel:’ before the phone number into the href property in the <a> element.

<a href="tel:+1-682-773-9167">(682) 773-9167</a>

The above href property tells the phone to use the dialler to call the phone number directly after the ‘tel:’ part.

Similarly to click-to-call links, you can also add a Google Maps link for your business address. When clicked, it takes you to a location in Google Maps, which will make it easier for your recipient to find your business.

To add the Google Maps link to your address, simply find your address in Google Maps, click “Share”, and then click “Copy Link”. Then, paste the link into the href property of the <a> element.

<a href="<your copied Google Maps link>">1015 Fillmore Street, San Francisco, CA 94115, USA</a>

The above code will open your location on the recipient’s phone either via their browser, or the Google Maps app if they have it installed.

Even if all of the above tips are followed to the letter, it will not guarantee that your email signature will always work perfectly on mobile. Email applications are updated on a regular basis, and these updates often make changes to how HTML emails are rendered, which can completely break your email signature.

This is where testing comes in. No amount of designing and speculation can replace actual testing. The results you get from testing, regardless of success or failure, are invaluable as they provide you with a concrete basis for any changes or improvements you wish to make to your email signature.

To help ease up the testing process, it is important to focus on one issue or thing at a time so as not to overlook anything. Trying to address multiple issues at the same time (unless they are closely related to each other) is a recipe for disaster.

This is where the benefits of using a professional signature tool like Gimmio become extremely clear – the hard work of endless testing is all done for you.

Is there an easy way to optimize email signatures for mobile?

Yes! Using a good quality email signature generator will ensure you get a professionally coded email signature that follows HTML coding best practices and has tried & tested templates that are optimized for mobile.

Do HTML email signatures always look the same on mobile devices and desktops?

No. Despite mobile devices being considered miniaturized versions of desktops, mobile devices operate very differently. They use completely different operating systems which render HTML differently. This means that most of the time, email signatures look different between the two. Email signatures can display differently on both desktops and mobiles even if the same email client/app is used. 

Can HTML email signatures be responsive?

No. In terms of HTML/CSS rendering, email clients are about 10-15 years behind modern web browsers. Unfortunately, most email clients will only read inline CSS styles, and will completely ignore any CSS media queries. Because of this, it’s not possible to make email signatures responsive.

How do you prevent email signature images from being blurry on mobile?

Mobile devices use display scaling, which causes images to be scaled up/zoomed in. If the image doesn’t have a high enough resolution, this will cause it to look blurry on mobile. The way to fix this is to use high-resolution images, which are 3x the resolution of the image you wish to display. For example, if you want to display a 24 x 24 pixel image, you would use a 72 x 72 pixel image and set the height and width in the <img> element to be 24 pixels.

What are the best email signature templates to use for mobile devices?

To optimize your email signature for mobile, you should use a template that is no wider than about 400 pixels. Therefore, narrow email signature templates are better suited for mobile compatibility.

Mobile email signatures still have ways to go both in terms of design and functionality, but that doesn’t mean they cant be optimized. Fully functional mobile email signatures are always a sight to behold in spite of the glaring limitations. Not only are they impressive, but the benefits they offer are also too good to pass up.

Given enough time, mobile email apps and by extension mobile signatures may eventually catch up to their desktop counterparts.