Simple Tweaks to Make Your Marketing Emails More Mobile Friendly

Many designers, marketers, and other creatives unfortunately aren’t proficient with the nuts & bolts of email design – and I don’t blame them! It’s a completely different beast to website design, and something that takes a lot of time to master and understand the quirks of. Because email design & development is something I specialize in during my day to day, I wanted to share with you some easy tweaks you can immediately start implementing to increase the mobile friendliness of your emails, no matter what platform you use. This is incredibly important as now more than half (53%) of all email users are viewing campaigns on a mobile device!

Start with a mobile-ready template

You wouldn’t believe in 2018 how many emails I read on my phone that still aren’t responsive or mobile-friendly. You don’t want your readers to be frustrated squinting at the tiny text and fuss with trying to zoom in and panning back-and-forth to read. Whether you’re working with a developer or customizing templates in a builder, don’t make the mistake of designing for or using a template that is only optimized for desktop. In your email platform, send yourself a test and check it out on your smartphone. Some platforms such as Mailchimp even have a visual smartphone preview!

Use images sparingly & purposefully

Create your email with a nice balance of copy and images. If your email is created entirely of sliced up images, it is only optimized for desktop devices. Keep the design straightforward and save the fanciness for your website or landing page.

Avoid using text on an image – unless it’s large enough

Similarly, when you’re making graphics for your emails, make sure to use text in images sparingly. If you do, it should be a large headline font that is still clearly readable on mobile.

Use retina images and compress them

When viewing an email on mobile, many devices have a retina display (Such as Apple iPhones). Retina essentially means that the screen shows a higher resolution and pixels per inch. Therefore, it is best practice to save images at double size – otherwise on a retina display it will show the images pixelated. Pixelated images give off an unprofessional vibe in your emails. Now that your email has retina images it will look beautiful and crisp!

Use an image compressor such as TinyPng or Kraken for large image assets. A lot of users read emails while using mobile data and you’ll want the images to load as fast as they can!

Use coded buttons and call to actions

When you use buttons created in code, it’s easy to adjust for mobile. If a button is created as an image, it can display smaller than intended and can be hard to click on mobile. Make sure the touchpoint is large enough for a human finger to be able to actually click your call to action! Also, it’s good practice to keep them above the fold (viewable before scrolling!)

Make sure your text is at a large enough size to read comfortably

Check that your body copy is either large enough to begin with or increased under a certain screen size for mobile. At least 16px size is standard for mobile.

A desktop & mobile email campaign from Levi’s. It’s clear here that they designed for mobile first, which results in a beautiful experience on all devices :)

Share the love!