Why does your newsletter look different in the inbox than in the preview?
Every device, operating system and email client renders a newsletter slightly differently. Laposta’s templates ensure that your newsletter looks good on every desktop, tablet and smartphone, although minor differences will remain. Outlook causes the greatest discrepancies in this regard. That is why, when creating a newsletter (in step 4), you cannot determine down to the pixel what the final result will look like.
Common differences in the inbox
The display of text in particular varies between email clients: the font size, the exact font and the line spacing. Some clients also change the colour of links and telephone numbers to show that your subscriber can click on them, for instance to make a call or to launch Skype.
Design limitations
You will encounter four limitations in almost any design. They cannot be solved with better code, as they are a result of the way email clients render a newsletter:
- Maximum width of 620 pixels. A newsletter almost never takes up the entire screen: next to it are columns with folders, other emails and calendars. Stay under 620 pixels, otherwise part of it will fall outside the window and your subscriber will have to scroll horizontally.
- No exact placement of elements. Within a block, you cannot specify the exact position of an element, such as an image.
- Differences in the length of your text. Because letter spacing and line spacing vary by client, the length of the text also changes. Two columns that are precisely aligned in one client may be slightly out of alignment in another.
- No rounded corners in Outlook. Rounded corners do not work there, which makes your newsletter look different in Outlook than in other email clients. In any case, Outlook does not support many modern email features that other clients handle without any trouble, and Microsoft is not expected to improve this significantly in the short term.
Tips for designing your newsletter
Because the exact alignment is not fixed, there is little point in having a line of text in one column start at the exact height of a photo in the other column. Aligning words or numbers with spaces and manually hyphenating long words does not work for the same reason: it looks right in the preview, but turns out slightly differently in your subscribers’ email clients.
Engaging content with a clear, calm design is therefore the safest choice. Images work well with this, but do not use too many images relative to the amount of text.
Checking the result
The preview shows your newsletter in your browser. Using the two icons in the top right-hand corner, you can switch between the computer and mobile views. You can read more about this in Viewing a preview of your newsletter. That mobile view also remains an approximation, because tablets and smartphones come in so many shapes and sizes.
If you want to see what an email client actually makes of it, send a testmail and view it in the clients your subscribers use, such as on your own mobile, in Gmail and in Outlook. Try turning on dark mode as well when you do this.
If you come across a device on which your newsletter is not displayed properly, please contact the helpdesk.