Optimize marketing emails for mobile devices

When drafting a marketing email, you can hide specific sections on desktop or mobile email clients. You can also change the column configuration and overall layout to improve the experience for recipients reading your email on smaller devices.

Tailoring your email to different devices can help boost engagement and enhance the overall user experience of your emails.

Understand limitations and considerations

• Setting separate modules and styling on desktop and mobile can only be done using the drag and drop editor. For emails created using design manager templates, developers will need to manually add in any device customization. 
• The following email clients do not support mobile optimized emails: Yahoo! Mail on Android, AOL Mail on Android, Gmail IMAP, and some versions of Samsung Mail. In these clients, hidden modules will be visible and mobile-only configurations will be ignored.
• Module settings such as font size or padding cannot be set to different values for mobile and desktop. To use different values for these settings, it's recommended to create separate mobile-only and desktop-only modules with the same content.

Hide modules and sections on desktop or mobile

To customize which modules or sections appear for desktop or mobile recipients:

1. In your HubSpot account, navigate to Marketing > Email.
2. Click the name of a drafted email, or click Create email.
3. Click the desktop desktop icon ormobilemobile icon at the top of the email editor to configure the settings for each device type.

4. Hover over a module or section and click the hide hide icon to hide that module in the version of the email you're editing.

5. To show all hidden modules for a version you're editing, click the Display options dropdown menu at the top of the editor, then toggle Show hidden on. 
6. To switch a hidden module back to visible for that version of the email, click the view view icon where the hidden icon would be otherwise. 

Customize module stacking on mobile devices

You can customize how the modules in a section will stack when viewed on a mobile device. 

1. In your HubSpot account, navigate to Marketing > Email.
2. Click the name of a drafted email, or click Create email.
3. In the email editor, click a section. 
4. In the left sidebar editor, select an option in the Stacking section: 
   • Keep the same columns: the email will display the same number of columns on mobile as on desktop. 
   • Left on top of right: the modules on the left side of the section will appear first on mobile. 
   • Right on top of left: the modules on the right side of the section will appear first on mobile. 

Customize styling on desktop or mobile

You can configure separate desktop and mobile styling for a single section or the entire marketing email. 

1. In your HubSpot account, navigate to Marketing > Email.
2. Click the name of a drafted email, or click Create email.
3. In the email editor, click a section to edit its styling, or click the styles TTttemplate design icon on the left to edit styling for the whole email. 
4. In the left sidebar editor, toggle the All devices switch off next to a section to view separate settings for desktop and mobile. 

5. Edit the styling settings for desktop and mobile. 

When you're done editing the visibility and layout settings for your email, you can preview how the email will appear in different email clients.

Optimize emails for mobile devices

To improve the appearance of your marketing emails on mobile devices, it's recommended to follow these best practices: 

• Use a responsive email template: responsive content adjusts to fit the screen where it's viewed. While HubSpot's drag-and-drop templates are responsive by default, developers creating coded templates will need to use the responsive email template markup.
• Reduce image file sizes: smaller image files result in smaller email sizes and faster load times. While HubSpot automatically resizes any image with a set width, which reduces file size, you can also use a service like FastStone Photo Resizer.
• Create readable links and buttons: any text links and buttons should be at least 57 pixels in width and height. 
• Test email preview text: alt text of images placed at the beginning of a marketing email can be pulled into the email's preview text. You can remove the image's alt text should resolve this issue. It's recommended to send a test email to verify the preview text is appearing as expected. 
• Avoid Javascript and iframe elements: embedded Javascript and iframe elements won't be rendered by most email clients. It's recommended to avoid adding these to coded templates. 
• Reduce the email's size to avoid clipping: emails over 102 KB can have their content hidden behind a "View entire message link" in Gmail. Learn more about calculating and decreasing an email's size.