How To Optimize Email On Pc For Mobile Phone Display

This mail was updated on July 25, 2019. It was originally published in January, 2014.

Mobile email design has seen some changes over the last half-dozen years. At least 61% of users at present open e-mail on mobile devices, and 31% report that a smartphone is their master device to click through and buy.

If your make isn't optimizing every electronic mail for mobile, or if it's been a while since yous've evaluated your email strategy to ensure mobile is a big office of it, at present's the fourth dimension.

For your email optimization pleasance, hither are 10 uncomplicated ways to improve your email design for mobile.

i. Keep it Simple with a Single Cavalcade Layout

Creating an email design with a single cavalcade layout that has a responsive width and font could be the easiest way to create an email that looks and behaves slap-up on mobile.

Yet, if multi-column is your preferred cup of tea, creating a responsive email template that has multiple columns on a desktop device will stack content on mobile. That said, pay close attention to the content orientation so it stacks in the order you want it to. You tin reach this with a responsive template (similar these free Electronic mail on Acid templates).

2. Hide/Testify Dissimilar Email Components

Using the code beneath, you lot can hide desktop elements and show mobile elements of an email. For case, y'all can add a mobile-optimized image that is a better size ratio or call-to-activity (CTA) button that will but display when a user opens the e-mail on mobile.

          <style> @media screen and (max-device-width:600px), screen and (max-width:600px) {       .hibernate {         brandish: none!important;         width: 0px!important;         peak: 0px!important;       }      .show {         display: block!important;         width: 100%!important;         max-tiptop: inherit!important;         overflow: visible!important;       }    } </mode> </caput> <body>         <tabular array role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="images/desktop-epitome.png" alt="" width="548" height="217" style="display: block;" course="hide">  <!--[if !mso]><!--> <div grade="testify" way="display: none; max-height: 0px; overflow: hidden;">  <img src="images/mobile-image.png" alt="" width="100%" style="brandish: block;"> </div>   <!--<![endif]--></td> </tr></table> </body>

iii. Resize Fonts & Images

Increasing or decreasing font sizes and images using media queries tin apace and easily create a better user experience on all devices. Using the technique from Everything You Need to Know About Email Fonts, nosotros can change the font according to the viewport width (screen width) of a user'due south device:

          <style type="text/css">  @media            screen and (max-device-width:640px), screen and (max-width:640px) { .mobfont { font-size: 2vw!of import; line-height: 3vw!important; } } </style>

Then, we add the class mobfont to any text nosotros want to resize:

<td style="font-family unit: 'Timmana', Helvetica, Arial, san-serif;" class="mobfont">Responsive Text</td>

Similarly, adding a width and height CSS holding to a mobile paradigm class can automatically resize an image. The below code will ensure your images are at 100% width of the parent container (aka the mobile device) and the elevation is set to automobile, keeping the paradigm proportions correct.

          @media screen and (max-device-width:640px), screen and (max-width:640px) { .mobimage {width: 100%!of import;min-width: 100%!important;max-width: 1000px!of import;height: auto!important;} }

iv. Become to the Point!

Yous only accept a modest screen size to get your message across, and mobile devices are full of distractions. Stick to short, abrupt messaging and avert long, wordy emails.

Adidas's simple, mobile-friendly email design and layout

v. Employ Touchable Buttons

Brand your CTA a push button, and ensure information technology has plenty of real estate on mobile, merely like in the Adidas example above. Create space around whatever links so users tin comfortably gyre without accidentally clicking a link and possibly getting annoyed at your email.

Tip: Make text links accessible with special characters (>) or emphasize with bold or underline.

Apple recommends at least 44px width for touchable buttons on the iPhone. Remember that y'all can also brand some of the area around the button touchable equally part of the aforementioned link, as long as it'southward non too shut to other buttons.

vi. Use Loftier Contrast Designs

With mobile users conscious of bombardment life and screen effulgence, keeping your designs high contrast will mean better readability. Different desktop users, mobile users could be opening your email exterior in vivid sunlight and the added contrast volition actually help.

Related: Attainable Contrast Ratios: Why Electronic mail Colors Matter

7. Keep it Light

Mobile users aren't always connected to WiFi and are never wired into the internet. Connectivity issues, indicate strength, WiFi speed and even telephone memory can touch an e-mail's load time.

Proceed the code for your emails as light as possible (definitely under the 100kb Gmail-clipping limit) and ensure images are optimized to be every bit small a file size as possible. This will increment the hazard of your email loading and rendering as information technology should.

Tip: Retrieve to add together alt text to images – only in instance point strength is low and images tin can't load, you'll want alt text equally backup content. Similarly, if you are using background images, remember to set a groundwork color that contrasts well with any text and CTAs so they tin exist seen whilst images are loading.

Contrast ratio examples

eight. Stick the Landing

After going to all this trouble to brand your email mobile friendly, it would be a shame if the subsequent messaging was less impactful. Brand sure you optimize the entire mobile experience for subscribers by as well optimizing your landing folio for mobile.

9. Mobile-Specific Code Fixes

iOS devices tin can sometimes reformat your email and cause image sizes to be a little odd or change alignment. Calculation this handy line of code into the head of your email will go along it from messing with your HTML:

<meta proper noun="x-apple-disable-message-reformatting" />

Calculation this to your CSS will terminate Apple from highlighting links and irresolute your formatting:

          a[ten-apple tree-data-detectors] { color: inherit!important; text-decoration: none!important; font-size: inherit!important; font-family: inherit!important; font-weight: inherit!important; line-height: inherit!important; }

Samsung devices will highlight your links and modify the color to blue and underline them. Inserting this piece of CSS will stop it from irresolute the links:

          #MessageViewBody a { colour: inherit; text-decoration: none; font-size: inherit; font-family unit: inherit; font-weight: inherit; line-summit: inherit; }

Note: This is not to say that you shouldn't be emphasizing text links in some way. It's fine to keep it on-make, but always make every unmarried link accessible.

x. Test Your Email!

Information technology seems obvious, but since you always take your telephone in artillery reach, send a exam email and brand sure it looks equally expert on your small screen besides equally your computer.

I prepare upwards the Gmail and Outlook apps and bookmark webmail clients to have a quick wait through.

Run a exam on the clients and devices Electronic mail on Acid offers, including tablets (to brand certain your media query is set correctly), and make certain your e-mail looks slap-up everywhere.

Make Every Bulletin Accessible

It simply counts as "optimization" when your email is accessible to everyone. Campaign Precheck's Accessibility feature is the just tool on the market place that scans your e-mail for accessibility and makes ADA-compliant adjustments to the code in but a few clicks.

What are your go-to tricks for mobile optimization? Allow us know in the comments below!