# Building Optimised Emails

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

| Device  | Expected behaviour                                                                                                                                        |
| ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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:

| Client                           | Supported |
| -------------------------------- | --------- |
| 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ubiquity.co.nz/documentation/channels/email/building-optimised-emails.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.