With more than 50% of email occurring on mobile, it's becoming more important than ever to design with a mobile-first mentality. Keep the following in mind to be sure your emails are mobile-friendly.
DESIGN WITH A GRID LAYOUT
This ensures your email neatly stacks, scales, and stays organized on mobile devices.
USE BULLETPROOF BUTTONS
Maximize clicks by making your buttons bulletproof, which means designing them as HTML rather than images. By doing this, you're ensuring the buttons will still display when images are turned off in someone's inbox (which is usually about 50% of the time).
Be sure to consider sizing when designing! Your buttons should be just large enough that they not only grab the user's attention, but also provide the user with the ability to tap them with ease. Listrak suggests a minimum button size no less than 40px.
For your text within the button, make sure there's enough breathing room around the copy so it doesn't become cramped and difficult to read. You'll also want to make sure you're using a web-safe or Google Font. Learn more about Preparing Your Email Fonts for Inbox Rendering.
If you go the image-based button route, make sure that when it shrinks for mobile devices, it's still large enough to be legible and tappable.
TIP: Try switching up the copy in your buttons. Shop Now and Learn More can work well, but play around with more creative options to build curiosity and lure users into clicking through. However, don't build too much suspicion - we don't want the user to have to invest too much in a click. It should be very clear what the next action is going to be.
SAVE ABOVE-THE-SCROLL REAL ESTATE
On mobile, real estate is precious. Let your important promotional content shine by hiding the navigation (see more about this below) and shrinking the size of your logo in your mobile header.
PARE BACK THE NAVIGATION
Use a short navigation on desktop (max. five items) so you don't distract from the most important parts of your email. It's important to remember your email navigation doesn't have to match your website navigation. Focus on the most important links you want to direct your user towards. Then on mobile, create a secondary redundant navigation at the bottom of your email. This way, you can hide the top navigation on mobile and style the bottom navigation to stack nicely above the footer. This also gives your users that have scrolled to the bottom of the email an opportunity to click through to your site if the content of the email wasn't quite relevant to them.
OPTIMIZE WITH HTML TEXT
Because it will scale up and down depending on device width, HTML text is a great way to ensure copy is crisp and legible in all inboxes, whether on desktop or mobile. Keep in mind, the minimum legible font size for most mobile inboxes is 13px.
HTML is also great for coupon codes. Not only will the user be able to see it when images are turned off in their inbox, but they'll also be able to easily copy and paste it into their cart. Learn more about HTML text here.
TIP: If you have to save copy as an image, send a test to yourself before you hit send to ensure that it's still readable on mobile.
