
Fail gracefully – queries aren’t fully supported, so you’ll need to make sure that if your user reads your email with a device setup that doesn’t support media queries, your email still looks good. Since the screen is smaller, it’s important that your design makes it clear what is important and what isn’t. Simplify – users don’t scroll through as much content, nor do as much reading or browsing, on a mobile device. The two most important rules for mobile template design: simplify and fail gracefully. You can address both of these things with your mobile design and code.
What are the main differences between viewing on a mobile device and viewing on a computer? We’ll return to this point later, but first let’s examine the different options in greater detail.Īs a graceful design will be useful in all mobile-optimized emails, we’ll start by talking about design.
Use CSS media queries to create 2 different view styles of the same template to send out.ĭeciding which strategy you want to use will depend primary on the differences you want between your mobile and non-mobile version. This method is also helpful for targeted app campaigns Send Campaign 1 to the users who open frequently on mobile devices, and Campaign 2 to the users who open most frequently on their computer. Segment your users by device usage and create 2 separate campaigns. One single, graceful design – send the same email to everyone, but use our design tips to make sure it will look good on any device. In order from easiest and least technical to most dev-resource-intense: There are multiple ways to approach experience optimization. What is the most important thing you want a user to do when they open your email? Important for design – make large, close to top (keep in mind where it will be on a smaller screen). Remember that the “fold” on a phone is different than the “fold” on a computer screen.
What is the first thing you want a user to see? It’s important for your email design to keep the most valuable information at the very top. What is the content of the template you are coding?
For example, if none of your users have mac.com email addresses, then you shouldn’t need to worry as much about how mac.com renders your code.
Html optimizer for mobile how to#
This will help you know which segments to focus on optimizing the experience – obviously you want to make it good for everyone, but it helps to know how to prioritize them. Use Audience Builder to identify your most active users: Who are your users? How do they view your emails?