4/12/2023 0 Comments Mjml media queryScrolling through content on a mobile device is harder than on a laptop or PC, and the screen is smaller, so it’s likely to take up more of a reader’s time. If your customers are using their phones to read your content, you’ll need to take a different approach. Someone opens their inbox, reads through the material, and then sees a friendly reminder of what they should do next at the end, whether it’s subscribing to your newsletter or making a purchase. Usually, these are placed conveniently at the end of an email. This step should keep your mobile display visible.Īnother thing to consider is the placement of your call-to-action (CTA) button. Ensure that their attention doesn’t wander and that it won’t lead to mobile compression. Keep them interested by producing a short and concise message. ![]() Bigger and longer paragraphs are going to lead to many of the same problems as long headers and titles, and the last thing you’ll want to do is make your readers turn away. If you’re looking to prepare marketing or email content for mobile-friendly purposes, try to limit the amount you produce. The same rule applies to your general content. Long titles and verbiage tend to make things jumbled and compressed, which is likely to frustrate the reader or lead to other problems. The shorter they are, the better they’ll look on the reader’s phone. The first one involves ensuring your title and headers aren’t too long. If you’re looking for a way to make your email content a little more mobile friendly, there are a few steps you can take. For sending an HTML email, you’ll want to stick with Mailchimp or another ESP. Gmail doesn’t support the tag and, thus, media queries are not supported by Gmail, as they can only arrive in this form. So, while this technique works in iOS Mail and Android Mail (which make up the vast majority of mobile opens), you likely won’t have much luck in Gmail for iOS.Ī big thanks to Lando Calrissian for getting the conversation started, Jeremy Peter for providing a great code example, and everyone else who contributed to this fix. The second is that media query support is required in mobile email clients to make elements visible. However, if you’ve been around the traps for long enough, you’ve likely realized that nothing CSS-related does. There are two caveats: The first is that this technique does not work in Lotus Notes 6 & 7. You also have to surround the image with a or to ensure this technique plays along with both Gmail and Outlook. Hiding images makes for a more interesting scenario. * Media query for displaying content in mobile email clients only screen and (max-device-width: 480px) We combined a couple of approaches to hiding content in mobile and desktop clients and finally came up with a lightweight solution: When using responsive email techniques, like progressive disclosureīoth use cases have provoked lengthy speculation in our forums, so it was no surprise that the solution was to be found there also.To display links for mobile-specific content (e.g., a “Download from the App Store” button).There are a couple of inventive reasons why you would want to do this, including: Why hide content in desktop and webmail clients? Use it with care, as nothing can stop it when it’s swinging. As Chris here at Campaign Monitor puts it, !important is like the sledgehammer of CSS. So, while it’s been possible to trick this email client by using display: none !important this makes it impossible to use the display to toggle an element’s visibility in a media query for mobile devices. Gmail strips out display: none from HTML email code, thus resulting in today’s trouble. ![]() The central issue when hiding content is Gmail’s lack of support for the display CSS property. However, those days are over with this simple CSS display fix. Just when you’re making progress in Outlook, Gmail might end up displaying all your mobile content. Article first published in March 2013, updated April 2019ĭisplaying text and images exclusively in mobile email clients has long stumped email designers.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |