Surely some of you use such popular services as Outlook or Gmail for sending emails. When making mailings, you encounter the difficulties of non-responsive design for mobile applications, and the email looks like a desktop version on mobiles. Today we will discuss this issue in detail.
What are the methods of buildings responsive (mobile-friendly) emails?
by using CSS Media Queries, let's call it “Responsive”;
without Media Queries, let's call it "Fluid-hybrid".
The actual problem is that some mobile email applications still don’t support responsive design.
We are aware of this problem and even published a dedicated blog post.
So what happens during the export process?
If you click the "Export" button, the email is sent right to the desired email client - and if the responsive design (Media Queries) is not supported, all the media styles are automatically removed by the email client, making the email non-responsive for mobile apps.
As we know, Gmail removes all CSS code from the responsive styles, and that's why you see a web version of your email on mobile devices after sending it from Gmail.
What should you do?
To ensure the correct display of emails in Gmail, we recommend you export the email to any ESP which supports media queries and then send it to Gmail. In this case, the email would be responsive to this email client.
The situation with Outlook is quite similar - not all versions of Outlook support responsive design - it just automatically removes all responsive styles from the code.
That is why some email clients show fully responsive (mobile-friendly) emails on mobile devices, and the Outlook app may show the web version on mobiles of the same email.
Important to note: all the test emails you send from Stripo to Outlook.com will be responsive on mobile devices. However, in the Outlook App, the same email may be non-responsive.
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at firstname.lastname@example.org.
We would be glad to talk with you.