10 Ultimate Tips for Designing Emails for Mobile
Try Publicate For Free Today
Start Now
On average, people spend over 3 hours a day on their phones. In 2022, an estimated 333 billion emails were sent and received worldwide. Of course, we can also share the percentage of emails opened on cell phones per day (81%). When you put all of these stats together, you get a very clear picture of why designing emails for mobile is so critical.
Responsive email design can make or break your email communications, so we’re going to share how mobile-first email design can be made easy with the aid of email builder tools. Let’s dive in.
As the term implies, mobile-friendly email design means that your email renders properly on a small screen size, i.e. a tablet or smartphone. Designing emails for mobile is also known as responsive design, because the design will respond and adhere to the limitations imposed by the screen’s size.
Mobile friendly designs are important because they improve the user experience, so a reader doesn’t have to zoom into your content to be able to read the words or view the images. It also means that buttons are clickable.
Imagine driving on the highway and seeing a billboard that is designed for the size of a regular sheet of paper. It’s going to be completely illegible, and in turn, useless. The same can be said of emails that are designed for desktop computers but are opened on mobile devices.
Designing emails for mobile is not only important because the use of phones and the amount of people checking their emails on mobile devices is ubiquitous, but it is also crucial because it’s the only way to ensure your message gets received by your intended audience!
Responsive emails result in:
By now, it’s likely clear as to why mobile email design is a must. Otherwise, you wouldn’t have been reading this in the first place. But, more importantly, you’re here to learn how to make it happen.
Here are three ways to accomplish mobile email design:
Scalable design uses a grid system and single-column layout along with big buttons so there’s no need to adjust code between screen sizes. This method is known as mobile-first.
Fluid design works off a percentage-based sizing to create table and images width so your design can fit multiple screen sizes by “shrinking.”
The most surefire way to design emails for mobile is with responsive design that is based on CSS media queries that adjust the email’s design, font size, images, and buttons according to the screen size.
But, don’t worry– you don’t have to know how to code or design to make this a reality. Email builders like Publicate offer hundreds of professional fully customizable pre-built templates that are all responsive already!
Designing any email, whether it will be read on mobile or a desktop, starts with intention and careful planning.
By using an email builder like Publicate, you can save time on the design aspect as the platform will help manage everything with a few clicks. It provides drag-and-drop functionality to make customization easy plus it maximises engagement by following all the best practice tips.
Since everything is ironed out for you, you get more time to focus on the email’s content and message to maxmise your emails success.
Let’s see what’s important to remember when designing emails for mobile:
Of course, you’re sending an email with a purpose. For email newsletters, both internal or external, there’s likely an action you want your users to take after reading the content of your emails.
This is known as a “call-to-action,” and it’s especially valuable to keep it short and clear for your audience. The best call-to-action buttons are about 2-5 words, and when on mobile devices, you must ensure that the button is big enough to click on with a finger.
A subject line is an introduction to what you reader can expect when they open your email. It’s also the first thing they will see in their inbox, which will often compete against many other emails at once.
That’s why it’s a good idea to keep your email subject line intriguing and also short so that the entire subject line appears on their device’s screen.
To complement your subject line and add a little extra context to your email’s message, you also have the opportunity to include preheader text.
This is the copy that shows up right under a subject line in an email’s inbox. Try to keep this message to about 40-100 characters, so that the whole message can fit across the smaller screen size.
A lot of people keep their phone in dark mode, which inverts black and white text to give a dark background to the screen. As such, keep this in mind when you’re designing emails, whether it be for the background color and/or font color.
Adding a lot of color is tempting because it’s fun and eye-catching, but you don’t want it to have the opposite effect of distracting your reader from the message.
Images are a wonderful way to break up your text and engage your audience. But, if you don’t optimize your images, it could cause disaster for your email’s load time. Consider the image’s size and use image optimizers to lower the size of an image (in terms of memory required to load).
Resolution should be at least 72 dots per inch (DPI) so they don’t appear grainy or blurry. Publicate includes a multimedia library and thousands of royalty-images to choose from, as well as a built-in image editor which allows you to crop and resize images during the design phase.
If you are worried about adding images, an email builder takes case of everything with its own image editor allowing fast alignment, scaling, cropping and more from right inside the tool itself!
How do you know how your email will appear across device sizes if you don’t test it? Well, short of buying every device size known to man or spending countless hours using email testers, you can take the easy way out and trust an email builder to do that testing for you!
An email builder works with over 50 email services providers including Gmail and Outlook so wherever you need to send your newsletter, the HTML works with them all.
No matter how much you have to say and fit into an email, be very mindful of what you include. The last thing you want to do is overwhelm a reader who will then end up deleting your message, rather than scrolling through.
A great way to reduce the influx of information all at once is to balance the email’s design and leave “room to breathe,” or white space. White space also helps guide a reader through your email’s content and actually helps them to focus more on the call-to-action.
An email builder like Publicate offers templates that are thoughtfully laid out with white space included, so all you have to do is fill in the content!
Font size is especially important when designing emails for mobile because the screen size is smaller. A good rule of thumb is to keep your headlines around 22 points or more, and body copy fonts shouldn’t go smaller than 14pt (12pt at the bare minimum).
If you’re sending your emails in English, then you can bet your audience will read it from left to right and scroll the email’s body in a F pattern. It’s also estimated that people spend just about 10-15 seconds per email scanning the information.
As such, keep this in mind when designing your email and laying out your content blocks. It’s best to put the most vital information at the top of the email, in the event someone is just going to open the message, scroll quickly and move back to the rest of their inbox.
The use of headlines also helps to direct the reader’s eyes to what each section is about when you are sharing multiple different messages at once.
Last but not least, it’s necessary to adhere to regulations for mass email marketing messages. CAN-SPAM laws help to protect your audience from being spammed. As part of these regulations, you can only send your mass email marketing to those who have opted-in.
And, if they so happen to unsubscribe, you must opt them out of receiving your communications. It’s also required that you don’t send emails with misleading subject lines.
Writing mobile friendly emails is easy when you know what’s worth remembering! The most important thing you can do is to use a responsive email design because then most of what you have to worry about is already going to be taken care of.
In terms of the writing content part, remember to:
People will be using their fingers (not a mouse) to click on links. Be sure to keep them far enough apart so that they can easily click on the link they want.
Again, it’s necessary to keep subject lines short because only a few characters will show up on their device size, and a subject line can spell the difference between an open-and-read or delete-and-forget response.
Make use of email analytics to gauge your performance, rather than having to guess. Publicate provides key analytics when you send emails, such as: click-through rates, open rates, and a heatmap.
This was a lot of information, right?! To help you to put these responsive email design best practices in action, you can make use of a mobile friendly design checklist.
To make a checklist that is relevant to your business and audience, ask yourself these questions:
See what we mean–designing emails for mobile doesn’t have to be a pain in the you know what. With the right email builder tools by your side and knowledge in your head, you can be designing and sending mobile responsive HTML emails in no time!
Ready to get started designing your perfect email for mobile? Try Publicate for free.
