Building Optimised Emails
Best practices for creating emails that display correctly across devices and email clients.
Email optimisation is the practice of ensuring your emails display and function correctly across all the major email clients, apps, and devices — without compromising design or usability.
Both custom and default UbiQuity EasyEdit templates are built to be responsive and optimised for most tablets, mobiles, and email clients out of the box.
How responsive emails work
UbiQuity email templates use Media Queries — a CSS standard that allows styles to adapt based on the screen size, resolution, and orientation of the device. When a recipient opens the email, if their device matches a media query, the appropriate styles are applied.
For example, a media query might specify that on screens narrower than 600px, images stack vertically instead of sitting side by side.
What an optimised email looks like
Desktop
Email centred with background colour and margins. Images full-size and correctly aligned.
Tablet
Similar to desktop with slightly reduced margins. Images retain size. Alignment unchanged in portrait and landscape.
Mobile
Email padding removed. Images and content stack in vertical panels. Header, footer, and content images re-aligned. Footer links and social icons stacked.
Email client types
How an email renders depends not just on the device, but on the email client being used. There are three main categories:
Email apps — downloaded or pre-installed apps (e.g. Apple Mail, Gmail mobile app). The operating system and version can affect rendering.
Desktop clients — software installed on a computer (e.g. Outlook, Apple Mail on Mac). Also affected by OS version.
Web-based clients — accessed via a browser (e.g. Gmail, Yahoo, Outlook.com). These often strip custom CSS and apply their own styles.
Fonts
Fonts are one of the most important design elements in email, as they need to render consistently across clients and devices. Many email clients block images by default, so recipients often see text before anything else — making font choice and fallback stacks important.
Email-safe fonts are fonts that are installed on most devices across Windows and Mac. Always specify a fallback font stack ending with a generic category.
Example: { font-family: Helvetica, Arial, sans-serif; }
Recommended email-safe fonts:
Serif: Courier, Courier New, Georgia, Times, Times New Roman
Sans-serif: Arial, Arial Black, Tahoma, Trebuchet MS, Verdana
Custom fonts
Custom fonts are supported on a limited number of email clients. For clients that do not support them, UbiQuity will fall back to the email-safe font you have configured. Custom fonts are supported on:
Apple iOS (iPhone/iPad)
Yes
Android (default email client)
Yes
Apple Mail (desktop)
Yes
Microsoft Outlook
No
Microsoft Outlook for Mac
No
Gmail (desktop and mobile app)
No
Outlook (desktop and mobile app)
No
Yahoo
No
Testing tips
Always test across more than one device and email client
Use your mailout report to identify the email clients most used by your audience — focus testing effort there
Make sure the very last change is tested before sending, even small tweaks can affect rendering
Keep a working version of your template as a control for comparison
Never forward an email when testing — email clients modify emails when forwarding, which distorts the rendering
Test the View Online link in mobile browsers as well as apps
Last updated
Was this helpful?