These days more and more people are turning toward mobile phones for their internet consumption. In fact, as of the last quarter of 2021, about 54% of all global web traffic comes from mobile devices and it is only going to go up from there. Because of this upward trend in mobile internet usage more people are opening and answering emails from their phones. Instead of creating responsive designs for your emails, you should consider building for mobile-first!
Design
So, what is mobile-first design and how does that differ from responsive designs? Well, mobile-first design is just that – you design for mobile and desktop in tandem, but ultimately optimizing a user’s mobile experience and adjusting your desktop design to reflect. While responsive designs are meant to be reactive starting at the desktop level and adjusting based on the user’s screen size. Mobile versions are almost an afterthought when it comes to responsive designs.
When designing emails, content is always a top priority. If your email looks good on mobile devices, it translates better to all devices. When all versions of your email look good, you can expect better open rates, click-through rates, and even conversion rates!
Here are four tips for designing for mobile-first:
Choose the correct image sizes
One of the most common issues that I run into as an email developer is that images are not always the optimal size for mobile. This is more common with responsive builds because you have an image that looks great in the desktop view, but when shrunk down to mobile this image can look out of place due to stretching, uneven stacking, and other rendering issues. If you choose an image that fits well on mobile, it is a lot easier to scale that image when it comes to the desktop view.
Keep it simple
When figuring out the content of your email, highlight the most important information and images. It might look good on desktop with all your content in there but remember that this content gets blown up when the screen size is shrunk down. Stay away from emails that take multiple scrolls to reach the footer.
By keeping your emails simple, you’ll also reduce the size of your email which will allow it to load faster! Studies show that about 40% of people will abandon a website if the load time is three seconds or more, which is another thing to keep in mind when building your emails.
Mobile friendly CTAs and text
Keep in mind that the most obvious difference between mobile and desktop is the size of the screen. To provide a better user experience and maximize button and link clicks, you should make sure that your CTAs and text are the proper sizes for mobile. Ideally around 14-22px, so that users can easily click through with their thumbs.
Stack where you can
A common technique you’ll see when building responsive emails is column stacking. This is where you’ll see a section as two columns on desktop and when converted to mobile those columns will stack. If you begin the design with a vertically stacked layout, it will translate better to the desktop version, whereas if you create the two-column layout first, you may have to do some extra styling to size images, format text, etc., when creating the mobile version.
Conclusion
When designing emails, adjusting the layouts so that they just work on mobile is not enough. Mobile-first design is the way to go with the upward trend in mobile internet usage.
Remember: If your email looks good on mobile devices, it translates better to all devices!
