Understanding why your newsletter isn't displaying correctly on mobile

Main causes of degraded mobile display

Key points:

A newsletter might look perfect on a computer but be completely unusable on mobile due to a non-responsive design or fixed widths.
Mobile email clients (Gmail, Outlook, Apple Mail, etc.) sometimes rewrite the code, which changes margins, columns, and fonts.
Images that are too large, incorrectly configured buttons, or text pasted from Word can break the layout.
Systematic testing across multiple devices and email clients is essential before sending anything to the customer database.

When you send a test newsletter and it renders poorly on mobile, it's usually not a one-off "bug" but a symptom of an email that wasn't designed with mobile display in mind from the start. In the hotel industry, where the majority of users check their emails on smartphones, this can directly impact your bookings and hotel marketing campaigns. Let's look at the most common reasons and how to fix them.

1. A non-responsive or overly "desktop" email template

Many email templates are designed primarily for computer screens:

Multiple columns that are difficult to stack on mobile devices
Fixed width (600–800 px) which does not adapt to small screens
Text too small or not resized

Result on mobile:

The content overflows or requires zooming.
Some columns pass under others, but in an illogical order.
The titles become illegible or too cramped.

How to correct:

Use an explicitly "responsive" email template provided by your email marketing tool (Brevo, Mailchimp, etc.).
Limit yourself to one main column or a maximum of two columns that stack correctly on mobile devices.
Opt for comfortable text sizes (14–16 px minimum for the body text, 18–24 px for headings).

For a hotel, the goal is for the user to be able to read the offer in a few seconds, without zooming or horizontal scrolling, and immediately access the “Book now” button.

2. Images that are too large or not resized

Visuals are essential for a hotel website, but if they are poorly configured, they break the layout:

Image imported in very high resolution (e.g., 3000 px)
no maximum width limit
Text embedded in the image is difficult to read on a small screen.

Effects on mobile:

The image forces the email to become wider than the screen.
The user must scroll horizontally.
The text gets lost under the image and becomes difficult to read.

Best practices:

Resize your main images to around 600–800px wide before importing.
If possible, enable a fluid width (max-width: 100%) in your email marketing tool.
Avoid placing important text (offer dates, promo codes) solely within the image: use associated HTML text, which is much more readable on mobile devices.

💡 Hotel tip: Opt for a simple main image (facade, pool, featured room) with a clear text title below, rather than a busy, brochure-style visual. The key message must remain legible even on a 5-inch screen.

3. Buttons and CTAs poorly adapted to mobile

A common problem: the button is fine on a computer but tiny or misaligned on mobile. This is often due to:

Insufficient padding on the button
Font size too small
negative margins or complex alignments on desktop

Results :

difficult to click with the thumb
button stuck to the edge of the screen or to another element
truncated text (“Reserve my…” instead of “Reserve my room”)

Best practices for buttons:

Use clear action verbs: “Book now”, “Discover our offers”, “See the rooms”.
Make sure the button is wide and tall (comfortable clickable area).
Ensure the typography and colours are consistent with your hotel website.
Always test the link on mobile to avoid URL errors.

Even if the button modification is often done in your emailing tool, keep the same logic as on your site: one main CTA per block, very visible, without overloading.

4. Specific behaviors of mobile email clients

Mobile applications (Gmail, Outlook, Apple Mail, Yahoo, etc.) do not interpret the code in the same way. Some:

add their own margins and spacing
automatically reduce font sizes
They block images by default.
do not accept certain advanced styles

Possible consequences:

blocks that appear "stuck together" or, conversely, too far apart
Titles much smaller than expected
Entire sections that appear empty until the images are displayed.

What you can do:

Avoid overly complex layouts (nested sections, multiple columns, sophisticated visual effects).
Opt for a simple, centered design with clearly separated blocks.
Ensure the email remains understandable even without images (alternative text, clear hierarchy).

5. Content copied and pasted from Word or PowerPoint

A direct copy-paste from Word or PowerPoint can include "dirty" code (hidden styles, tables, complex margins) that disrupts the mobile display:

unpredictable line breaks
blocks that shift
Unpredictable font or color on mobile

To avoid this:

Paste your text "without formatting" into the email editor.
Then reapply styles, titles, and lists directly in the email marketing tool.
Review the mobile version after each significant change.

6. Difference between preview and reality on mobile

The preview provided by your email marketing tool is useful, but it doesn't always perfectly simulate every application or device. Therefore, it's possible that:

Everything looks perfect in the preview.
but that Gmail and Outlook mobile display certain sections differently

Good testing practices:

Send your test newsletter systematically to multiple email addresses (Gmail, Outlook, and possibly a work email).
Open the email on at least two different smartphones (iOS + Android if possible).
Pay particular attention to:
- readability of titles
- paragraph length
- displaying images
- alignment of the “Book” or “Discover the offer” buttons

For a hotel chain or group, formalize this testing process in your checklist before sending, just like proofreading and validating prices.

7. Image blockers, dark mode, and other special cases

Even with a well-designed email, certain external factors can give the impression that the newsletter is "displaying incorrectly":

Images are blocked by default (the user must click to view them).
Dark mode is enabled, which inverts colors and can make some text difficult to read.
Slow connection, which delays the loading of large images.

To limit these effects:

Always ensure a background color and text with sufficient contrast.
Avoid using light text on a transparent background if your audience frequently uses dark mode.
Compress your images to reduce file size without losing too much quality.

8. Adapt your hotel marketing process

To prevent this problem from recurring in every campaign:

Integrate a "Mobile View" control into your newsletter approval workflow.
Keep a standard responsive template that you reuse for your seasonal campaigns (winter offers, Valentine's Day, business packages, etc.).
Align your email CTAs with those on your hotel website: same wording, same colors, same promise.
Think about the complete experience: a readable email → a click on a clear button → arrival on a mobile-optimized landing page of your website.

A seamless conversion chain between newsletter and hotel website is key to maximizing your direct bookings.

Conclusion

If your test newsletter isn't displaying correctly on mobile, it's not a coincidence: it's a sign that the template, images, or buttons weren't designed with small screens and the constraints of mobile email clients in mind. By simplifying the layout, using responsive templates, carefully checking images, and consistently testing on multiple devices, you can ensure your campaigns run smoothly and provide a seamless experience for your future customers.

For a hotel, this is a direct issue of revenue: a clear, readable and well-designed mobile newsletter means more clicks on “Book” and less friction in your conversion funnel.