When you send an email through SHR CRM, it may look slightly different depending on whether your guest opens it in Gmail, Outlook, Apple Mail, or on a mobile device. This is normal, each email client uses its own rules for displaying emails, which means the same design can be interpreted differently across platforms.

This article explains why this happens and what you can do to produce emails that display as consistently as possible across the clients your guests use most.

Email clients are not like web browsers, they do not follow a shared standard for displaying email designs. Outlook desktop, for example, uses Microsoft Word's display engine, which has limited support for modern styling. Gmail removes certain formatting. Apple Mail is generally more consistent, and mobile clients scale and reflow content in their own ways.

The result is that an email that looks perfect in one client may have shifted layouts, missing fonts, or broken spacing in another. This is not a CRM issue, it is a known characteristic of the email industry that affects every platform and every sender.

Use the layout that suits your design, the designer handles mobile stacking for you. Multi-column layouts can work well and are widely used in hospitality email. The SHR CRM email designer includes mobile stacking controls that let you define how columns should behave on smaller screens. When configured, columns that sit side by side on desktop will stack vertically on mobile, preventing the layout from breaking or content from being cut off. If you are using a multi-column layout, review the stacking settings for each column block before sending and always check the mobile preview.

Single-column designs are the simplest option and require no stacking configuration, they behave consistently on all devices without any additional setup. They remain a reliable default, particularly for simpler campaign types or when speed of production matters.

Keep your template width between 600px and 700px. The widely accepted industry range is 600–700px:

Use email-safe fonts. These fonts are pre-installed on most devices and render consistently across all major email clients:

Always specify a fallback font. If you use a custom or branded font, the designer should be configured with an email-safe fallback so that if the custom font fails to load in a given client, your text still appears clean and readable in a supported font. If you are unsure how your font is configured, contact your SHR Customer Success contact.

Set a minimum body font size of 16px. Current guidance from Apple (17–22px recommended) and Google (18–22px recommended) puts 16px as the practical minimum for comfortable reading on both desktop and mobile. Headings should be noticeably larger, 20–28px is a common range, to create clear visual hierarchy.

Always use the designer's Heading and Text content blocks for all headlines and body copy, including when using branded fonts. A common but problematic workaround is to render a headline as an image so it displays in a custom font. This is not recommended:

The Heading content blocks in SHR CRM's email designer output the correct heading structure automatically, which supports screen readers and accessibility requirements. Use the Heading block for your email headline and subheadings, and the Text block for body copy. Reserve the Image block for genuinely visual content only.

Use JPG or PNG formats. These are the most universally supported image formats in email. Avoid SVG, it is not consistently rendered across clients.

Keep image widths at or below 600px. This prevents images from overflowing the email column. For high-resolution (retina) screens, you can export an image at double the display width, for example, export at 1200px wide but display it at 600px, for crisp rendering.

Always include alt text. Some email clients, including Outlook, block images by default until the recipient chooses to display them. Alt text ensures the reader can understand the image's purpose even when it does not load. Alt text is also required for accessibility.

Host your images in SHR CRM's image library. Images linked from external websites can break if those URLs change or the domain expires. Use the built-in file manager to upload and host images used in your campaigns.

Use HTTPS image URLs, not HTTP. Some email clients will block or warn on images loaded over unencrypted connections.

Outlook desktop does not reliably display background images. If your layout uses a background image as a visual layer beneath text, Outlook users may see only a blank or plain background, making your text difficult or impossible to read against it.

Do not rely on background images to make content readable. If you want a background effect, always set a solid fallback background color using the designer's color settings. Use the background image as a design enhancement, not a structural element.

Dark mode is no longer a niche setting. Research indicates that approximately 34% of email opens now occur in dark mode, and around 82% of smartphone users have dark mode enabled on at least one app. Gmail, Outlook, Apple Mail, and Android mail apps all support it, and each handles it differently.

When a recipient views your email in dark mode, their client may invert or adjust your background colors and text colors automatically. An email with a white background and dark text may display as a dark background with light text, but logos, images with solid color backgrounds, and elements with hardcoded colors can look broken or become invisible.

Research consistently shows that a significant proportion of hospitality emails are opened on mobile, particularly pre-arrival and loyalty communications where guests may check on their phone while traveling.

The SHR CRM designer is mobile-responsive by design. When you build emails using the designer, your template scales correctly on mobile devices. For multi-column layouts, use the designer's built-in stacking controls to define how columns should behave on smaller screens, this ensures content stacks cleanly in a readable order rather than shrinking to an unreadable size side by side.

SHR CRM's drag-and-drop email builder is built with cross-client compatibility in mind. Templates created using the builder:

When you start from a pre-built template and customize it through the builder, these safeguards are applied automatically.

SHR CRM supports uploading your own HTML for email templates. However, custom HTML introduces variables outside our control: non-standard code structures, external image hosting, missing plain-text parts, and CSS that is not supported by major clients. We cannot guarantee that custom HTML will render consistently or pass the content checks required for delivery.

For more detail on why custom HTML can affect whether emails reach your guests at all, see CRM – Email deliverability: why emails may not reach your guests.

As of June 2025, email accessibility is a legal requirement in the EU under the European Accessibility Act. Approximately 27% of email subscribers have a disability that affects how they interact with digital content. Inaccessible emails exclude this audience entirely.

Always use the designer's Heading and Text content blocks, never use images to display text. Screen readers cannot read text embedded in images. An image used as a headline provides a significantly degraded experience for visually impaired guests, and WCAG guidelines state that images of text should be avoided. When you use the Heading block for your email headline and the Text block for body copy, the designer handles the underlying structure required for accessibility automatically.

Use the correct block type for each type of content. Using a Heading block for your headline, rather than a Text block with a large font size, ensures the correct structural hierarchy is applied. This allows screen reader users to navigate through your email by heading. Use one Heading block as your primary email headline, and use secondary Heading blocks for any subheadings, following a logical order.

Ensure sufficient color contrast. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 between text and its background for normal-sized text. Do not rely on light gray text, text over busy background images, or color alone to convey meaning.

Left-align body copy. Center-aligned text reduces reading speed and increases difficulty for readers with dyslexia. Center alignment is acceptable for short headlines but should not be used for paragraphs.

Do not use all caps for body text. All-caps text is harder to read and can be misread by screen readers as abbreviations.

Make call-to-action buttons large enough to tap. Buttons should be at least 44×44 pixels to meet Apple's accessibility guidelines; 48×48 pixels meets Google's recommendation. Button labels should describe the action in plain language, not 'click here' but 'Book your stay' or 'Claim your offer.'

There is no substitute for testing. Before sending to your guest list: