With more and more people on mobile devices, it's more critical than ever to keep mobile in mind as you create your emails. Below are the best practices you can use when creating templates and campaigns.
Take note
- Classic email designer: It's not possible to edit an email just for mobile or just for desktop. Instead, you are creating one email that will be rendered differently in both apps
- Email designer launched in 2022: You can edit an email for mobile and desktop. This setting is located under "Global Settings"> "General Settings"> "Responsive design" of the email designer. Additionally, you can hide content on mobile or the web. This gives you the flexibility to design a mobile-friendly email and a desktop-friendly version at the same time
Use the "Enable mobile responsiveness" setting
This setting is automatically enabled for every campaign and automation email you create and can be manually turned off.
To ensure this setting is on, click the gear icon on the top right of the email designer. The campaign settings modal will open. If "Enable mobile responsiveness" is off, click the toggle to turn it on.
Note that most older versions of the Samsung native email app do not support responsive rendering for mobile.
Avoid copying and pasting text from an outside source
When text is copied from an external source, such as a word processing program, and pasted into a campaign, we'll pick up all styling from that source in addition to the actual text. While we do our best to strip out anything that will affect the rendering of your email, not everything is caught. This means that extra padding in your design could make the text appear smaller when viewed on mobile and cause the email to look different when sent to an inbox.
Instead, we recommend typing your content directly into the text block, or you can paste the content into a plain-text editor, then copy that to your campaign. Both approaches will remove all accidental styling in your email.
The columns in your campaign determine the order in which they'll collapse in mobile view
The order in which your content appears in the designer (from left to right) determines their order when columns collapse in mobile view. In mobile, columns will collapse from left to right and then from top to bottom. This also known as stacking or block stacking.
We recommend ordering your content to follow the illustration below. The dash represents a row, and the grouping of images and text represents a column. The dark border represents the designer's column marker and only extends to the first row.
When columns collapse in mobile, the content is in the correct order:
Keep your email width to no more than 650 pixels
This is the width that works for most email clients and mobile devices. If an email is wider than 650 pixels, then a horizontal scroll bar may need to be used to view your message. This makes your message hard to read and may cost you an unsubscribe due to a less-than-stellar experience.
Image width should be from 400 to 650 pixels
An image at 400 pixels wide is the minimum needed to display full width on a mobile device. Images smaller than 400 pixels will not scale up on mobile. This accounts for logos and icons that aren't intended to scale up.
If you upload a large image, it will be sized down to no larger than twice the width of the email.
If the image or logo is too large when viewed on mobile, you can resize the image and then re-upload it to the email designer. Note that the Actual image width and the width you set in the designer are two different things. Images added as inline within a text block will not scale up.
To see how large your image is with the Email Designer launched in 2022, click the image in the designer and view the size in the Image Block options to the right:
To see how large your image is with the Classic email designer, click the image in the designer and view the size in the Options tab:
Remember, it's always better to scale a larger image down than a smaller one up.
Use Alt Text with images
ALT text is the written copy that appears in place of an image if the image fails to load in a contact's inbox or if they have images blocked. ALT text is also strongly recommended because it increases the accessibility of your content for those who depend on screen readers.
To add ALT text to your image using the Email Designer (launched in 2022), click on the image in your campaign and add 1-2 words into the "Alternate text" field in the Image Block options to the right:
To add ALT text to your image using the Classic Email Designer, click on the image in your campaign and add 1-2 words into the "Info" field under the options tab:
Use image blocks instead of inserting an image into a text block
Note that this method is only available in the Classic Designer.
Text content blocks containing an image and links in line with that image will not be clickable in Outlook 2007 or Outlook 2013. In addition, text may not wrap correctly around your image when viewed on mobile.
As a best practice, we recommend using image blocks instead of adding an inline image to a text block.
Use the "Spacer" block to create white space around content and images
The use of padding around an image or content to create whitespace will force your content to become narrow when viewed on some mobile devices.
Instead, use the "Spacer" block in the email designer and set it to "Hide on Mobile" (Classic email designer) or "Hide element" (Email designer launched in 2022) if desired.
Hiding the spacer block will prevent large spacing or margins to appear when the email is viewed on mobile devices.
Use the "hide on mobile devices" option
This option hides non-essential elements in your email when viewed on a mobile device. This will improve the experience for your subscribers and keep them engaged with your content.
To hide an item from mobile using the Email Designer launched in 2022:
- Click on the image.
- In the Image Block to the right, scroll down to the bottom and click the mobile icon, to hide on mobile devices.
- You can also click the desktop icon to hide the image on the desktop view under "Hide Element." Note that the "Hide on desktop" option is only available with the Email Designer (launched in 2022).
An icon with a line through the mobile icon will appear on the block you use the "hide on mobile" option.
To hide an item from mobile using the Classic Email Designer:
-
Click on that block and click the gear:
- From the list of options, click "Hide on mobile devices."
- When you hover your mouse over that element in the designer, you will see this:
Experiment with preheader text
Set yourself apart from the rest of the emails in your subscriber's inbox and entice them to open your email. Learn more about adding a preheader text to your email.
Test your email
Use the Desktop preview and send yourself and your colleagues a test email to view on different mobile devices. You can also use our compatibility preview feature to test your email with various email clients.