![]() ![]() However, we can use alternative methods for limiting the width of a layout. While websites can use the CSS max-width property to constrain the layout to a specific size, this technique isn’t widely supported in email clients. Line lengths can become unwieldy in unconstrained fluid layouts If left completely fluid, emails on these screens will be too wide and the copy will be hard to read. ![]() However, Campaign Monitor makes a good point that you will need to constrain the width of your emails on larger screens. Instead of using pixels for sizing tables, you use percentages. Implementing a fluid layout is relatively simple. For this reason, fluid designs typically work best for text-heavy layouts since there’s less control over how copy and images relate to each other. Fluid emails are similar to scalable ones, in that they don’t purposefully alter the layout or content of an email, but they have the added benefit of having content “flow” to fill space on the screen. Fluid emails use percentage-based sizing to make the width of tables and images adapt to the screen size on which they are viewed, similar to what is known as “liquid” layouts on the web. In between scalable and responsive is what we term “fluid” design. While scalable emails are good for teams that need a quick solution, more advanced solutions allow for better control over campaigns on different devices. They typically require no extra coding or knowledge beyond what most email designers already know-it’s just a matter of making mobile users a priority and altering the overall email layout to accommodate their needs.Ĭheck out these great examples of mobile-optimized, scalable emails: When optimized using the techniques above, scalable emails are a great way for marketers to engage with their mobile audiences without the need to drastically change process or introduce new workflows. Ideally, you should place the most vital information in your campaign on the left side of your email-keeping things like logos, important copy, and CTAs visible without having to scroll horizontally. One thing to keep in mind when designing scalable emails (or any email) is the Android “ Grid of Grim.” In some Android email apps, messages are not scaled at all, resulting in the need for subscribers to scroll both vertically and horizontally. Our Anatomy of the Perfect Mobile Email infographic is another excellent resource. Large text that is readable on screens of all sizes.įor more information on scalable design, Lauren’s post on the differences between scalable and responsive design is a great place to start.A simple (usually single-column) layout that scales down nicely.Since scalable emails don’t adjust the widths of tables or images between devices, and don’t use CSS media queries (we’ll get to those later) to swap content or change the size of text, it’s important to use a number of techniques to keep the content of scalable emails enjoyable not only on desktop, but when viewed on mobile devices as well. Scalable designs are typically the easiest to implement. While we’re using the term “scalable” to describe this approach, you may have also heard these concepts referred to as mobile aware, mobile friendly, agnostic or mobile first. Scalable design can be defined as any design that works well across both desktop and mobile without using code to adjust table or image sizes, or display or hide content between the two platforms. Let’s begin with what many email marketers are currently using: scalable design. Eliminating the possibility of not doing anything at all, mobile email design can roughly be broken down into three categories:įor marketers to choose the approach that best suits their needs, it’s important to understand the differences between these three approaches. To make matters worse, many marketers are confused about what strategies actually exist. We examine the differences between responsive and hybrid design, and cover the pros and cons of each. Since the writing of this post, there has been a huge movement towards hybrid design. Enterprise Plan Boost collaboration and drive results.Litmus Plus Automate testing to ensure quality.Litmus Basic Build error-free, effective emails quickly.All Plans See solutions for companies of all sizes. ![]()
0 Comments
Leave a Reply. |