Getting Gmail to display your email properly

Responsive email exists for mobile users. It adjusts the layout to the dimensions of the device so that reading the message stays clear and attractive, easy to read without losing the design intent.

Unfortunately, responsive email still does not render fully in every recipient’s client, because some clients do not support CSS media queries — the mechanism that governs how media displays across different devices. Without media queries, responsive email is very difficult to render correctly on a phone.

Email clients focus their effort on security, and most have sacrificed responsive rendering for it. That includes Gmail with its enormous user base. Email designers have negotiated with Gmail repeatedly in search of a fix, and progress remains incomplete.

The HTML rendering engine in Gmail’s mail apps is not especially advanced, so its interpretation of responsive email remains limited and the layout does not come out right: width constraints get lost, background colours go wrong, components sit unevenly, things that should show are hidden, and things that should be hidden show up.

For now, three principles will get Gmail on mobile to render responsive email reasonably well:

1. Image dimensions

Fix every image used in the layout to the same set of dimensions — a large image at 600 x 400 px, multi-column images at 300 x 200 px or 200 x 100 px, and so on.

2. Think in boxes

Put the image and the text inside the same wrapper. If you are using our email editor, that means putting image and text in the same box. The renderer then constrains the whole block to the width of the image, and the result reads as consistent.