It’s me, Aileen from Dyspatch! 👋 I build a lot of emails in my day-to-day, so email clients and device testing are both on my mind a lot. I’ve done my homework on device testing over the years, so I thought I’d put together a quick guide to help you out.
Let’s dive into what device testing really is, a methodology for doing it right, and my top 5 list of devices to test.
What does device testing your emails mean?
Device testing is the practice of checking an email in different clients and devices to make sure it looks good no matter the screen size or technology it’s being viewed on.
You can use a tool like Litmus (included with Dyspatch), or Email on Acid, to easily preview emails on different devices. Or you can set up test inboxes for various email clients and send the email to them to test manually.
It’s called ‘device testing’, but in truth there is so much more to testing than the device. Mobile vs desktop is just one part of it. We also need to consider:
- The email client (eg: Gmail or Outlook),
- The operating systems (eg: Android or Windows),
- And the version of the email client (eg: Outlook 2009 or Outlook 2013)
Instead of just ‘desktop’ or ‘Outlook’, I recommend getting specific, like this: Outlook 2009 on Windows Desktop.
…woah
Details, details, details… try to make it a conscious practice to be more detailed with your testing. Not all email clients with the same name will render your email the same way.
If you think of device testing holistically, you can avoid wasting your precious time. How tho?
You might find yourself spending hours troubleshooting solutions for a small padding issue that’s happening in Gmail… when in reality, the issue is only occurring in the Gmail App on iPhone, iOS 14.2—which potentially none of your contacts are using anyways!
So now that we’re all clear on what device testing is—and that it’s not JUST testing the device—I’ll carry on calling it ‘device testing’ if you don’t mind… it’s much easier than calling it “Device, client, operating system, and version testing” 😂
How I Approached Building my Top 5 Device Tests
Before I dive in, a quick caveat: these are my recommendations based on my pseudo-scientific method, my experience, and the audience I send emails to—for you, certain steps might change and there may be varying nuances, but the methodology is pretty iron-clad!
Also, check to see if your email sending platform has a breakdown of open rates across devices and email clients! If you have that information, you'll want to make sure you are focusing your testing on devices your readers do and will use.
Methodology: The Two P’s of Device Testing?
I want to make sure that everyone who opens my emails is looking at the best possible render of that email, whether it’s a very popular device or an outdated one. No inbox left behind! To do that, I focus my testing on:
- Devices that are very POPULAR,
- Devices that are very PARTICULAR about what HTML/CSS they support,
- or sometimes, BOTH 😭
Which Devices are Popular?
To find out which email clients are popular, I like to keep an eye on Litmus’ Email Market Share report. Litmus regularly puts together a list of all the different email clients available, ranked by their popularity.
The big caveat these days is that it is becoming difficult to say for sure which email client is truly popular. Better privacy protection features in email clients (like Apple Mail’s MPP) make tracking where an email is actually opened by your reader—and not a security bot—much harder.
Which Devices are Particular?
Okay why ‘particular’? Mainly, because I’m a sucker for alliteration. 😏 But also, because some of these devices don’t have full support for all the modern HTML and CSS features we have available today— they’re picky about them (I’m picturing Microsoft Outlook picking border radius’ out of your email like my cousin picks mushrooms off pizza).
I use caniemail.com to find out what email clients have spotty support for HTML and CSS features. Caniemail.com has a neat scoreboard for the different email clients, so I can quickly see which devices are down at the bottom and might need extra consideration. I also love to look up any HTML or CSS I’m hoping to use in email designs to find out where it might not work (sorry box-shadow in Gmail).
Now that we’ve covered the two P’s, let’s take a look at my top 5 device tests. For each device I cover below, I’ll explain how they fit into the two P’s (popular & particular), how I use them, and my tips for what to look out for when testing with them.
Without further ado,
Aileen’s top 5 device tests (in no particular order):
#1 - Apple Mail
- Why?
- It’s super popular (it’s #1)
- It’s super popular (it’s #1)
- What to look out for?
- It should look great!
I said no order, but I actually like to test Apple Mail first. Not just because it’s super popular (Last time I checked, it’s number 1 according to Litmus!) but it also has great support for HTML and CSS. Apple Mail uses webkit to render emails, just like your web browser does, so it should look just like you expect it to. If it doesn’t look right in Apple Mail, something is probably really wrong in your code and maybe you need a new email code editor?
#2 - Gmail Desktop Webmail
- Why?
- It’s super popular (Litmus says it’s number 2)
- Very particular, likes to do things their way—partial support for HTML CSS, picky about linting.
- What to look out for?
- Your styles not displaying (Yikes!)
Gmail has surprisingly spotty support (alliteration!) for modern HTML/CSS, it also doesn’t tolerate typos. An entire style tag will get ignored if you have any typo in your CSS. Gmail only supports the webfonts Roboto and Open Sans—so if you use a neat webfont make sure have a good fall back font that maintains the spirit of your design.
#3 - Outlook on Windows
- Why?
- Particular: Very low support for HTML/CSS
- What to look out for?
- Everything? I’m kidding (mostly.) Border radius isn’t supported, and neither are your web fonts. Set a good font fallback if you don’t want them to default to Times New Roman
These versions of Outlook are likely the reason Outlook has a bad reputation with breaking your emails. But like I said earlier, if we consider device testing holistically, we know Outlook isn’t necessarily bad, but Outlook on Windows will likely give you trouble.
#4 Outlook DPI
- Why?
- Particular: Will scale things up! (ENHANCE!)
- What to look out for?
- Images, fonts, and padding can all get big, while other elements can stay small. Creating a funhouse mirror effect if you aren’t careful.
DPI stands for “Dots per inch”—it’s a setting that increases the size of elements in an email to make it more readable. This is a great idea, but the way Outlook implemented it can give you trouble if you haven’t coded your email with it in mind.
You can see our example email preview looks normal, and that’s thanks to DML (Dyspatch Markup Language) which basically keeps me from writing email HTML in ways that might cause things to resize strangely in Outlook DPI. There are tricks and ways to set up your email HTML to avoid these issues if you don’t have a handy email markup language like DML (more on DML shortly...)
#5 Gmail App (iOS or Andriod)
- Why?
- Very popular
- Very particular: low support for CSS/HTML features
- What to look out for:
- Media queries can be ignored.
This email client is probably one of the biggest reasons why mobile-first email HTML has become so popular. If you code your email for desktop and then intend to use media queries to change the layout and sizing for mobile, the Gmail app is going to give you a headache. Gmail on IMAP is less popular but also worth mentioning here as it will completely ignore your media queries. Instead of coding the desktop version first— keep the mobile version in mind when you start out, either by doing responsive design or by going fully mobile first and that will save you a lot of time tweaking media queries and inline styles.
#6 BONUS: Dark Mode for Outlook.com on Desktop & Gmail on iOS
- Why?
- Popular + Particular: The trickiest of the all the dark modes
- What to look out for?
- Watch all your colors get inverted, and make sure your email is still legible!
I just couldn’t talk about devices to test without mentioning dark mode. These two email clients will invert your colors, this means that light colors will get darker but also that dark colors can get lighter! Test these two out and make sure the colors you’ve picked for your email can invert and still be readable. In my book, if you test with these two email clients’ dark modes and your email looks good both? You are very likely safe in dark mode for any other email client.
Top 5 Summarized
- Apple Mail
- Gmail Webmail
- Outlook on Windows
- Outlook DPI
- Gmail App (IOS or Android)
- BONUS: Dark Mode for Outlook.com on Desktop & Gmail on iOS
If you can get your email looking good on these devices, then you can enjoy the peace of mind knowing that your emails are looking good everywhere. All these email clients have quirks and I really recommend working with them, rather than against them. Check your email sending platform to see if you have a breakdown of where your emails are being opened as well though!
And remember: You can still do really cool things even if every email client doesn’t support it, fallbacks are your friend!
Device Testing with Dysaptch
If you look back at my examples, they all look good, amirite?!? There’s a few reasons why, and they essentially all are because I built my emails using Dyspatch. Allow me to explain…
Dyspatch Markup Language (DML)
They may change a bit where they have to but they are still legible, and beautiful. And most importantly, they stay true to the branding throughout. To build this email—and all my emails—I use DML, Dyspatch’s home brewed markup language.
DML abstracts away from all the HTML tables and coding quirks required to make my designs work across different devices and email clients so I don't have to remember every little rule. Why not? Because DML knows the rules of every email client, and follows them to the letter. DML will generate code that works in every major email client – even Outlook!
DML injects all of the arcane and esoteric code a dedicated email developer would write—like ghost tables—to ensure that emails are responsive and work wherever your users are reading them.
Basically, DML makes it easy to build lovely emails that look good across email clients without sacrificing design dreams. 💃
Litmus in Dyspatch
We also have Litmus baked right into the Dyspatch email builder, making it faster to test all the devices I mentioned (and more) without ever leaving the builder. I was able to test and pull all the example screenshots you saw today from inside our email testing suite in no time at all.
Modular Email Builder
Okay lastly, when you design your emails using Dyspatch’s drag-and-drop blocks, you are actually using a modular design system. Which means you don’t need to do as much back and forth testing as you do when you build each email in HTML and CSS from scratch.
Inside Dyspatch’s drag and drop editor, no one has to touch the email HTML. When you want to make changes, you just click into a block and type. Or click an image to swap it for another. Anyone on my team (or yours) can build an email without having to worry about making any mistakes. Mistakes that could pop things out of alignment in Outlook or Gmail, for instance.
Let Dyspatch Help
Building with modular blocks, relying on DML’s built-in email client compatibility, and device testing in the builder means anyone who builds an email using Dyspatch can get by with a quick confidence check on their—or my—favorite devices!
Intrigued? Book a Demo of Dyspatch
Thanks for taking the time to checkout out my favorite devices to test! I’d love to hear which devices you like to test! Let me know 😊
