It is always a best practice to ensure that your Forms, Landing Pages, and emails display well on mobile devices. Whether you want to make your marketing content responsive, adaptive, or just mobile-friendly, check out these tips for accomplishing this in Act-On.
General Best Practices
These principles can help content display well on mobile devices:
- Use white space in your design
- This can make content easier to read, especially on smaller screens.
- White space also gives elements room to move in adaptive or responsive layouts.
- For email, keep message width in mind
- Use shorter paragraphs
- Keep load times short
- Long load times will lead some users to abandon your content.
- Keep your image sizes as small as possible.
- Use the Review tab
- Test thoroughly on as many devices as possible
- Send your test messages to as many recipients as you can.
- Remember that different email clients will also render differently, so opening messages in different programs is useful as well.
Responsive design
- Responsive design is powered by CSS media queries. It is popular in web design, but it is not supported by all email clients.
- An example of responsive design is when a website layout adjusts based on screen size:
- 1000+px: Three columns
- 600-1000px: Two columns
- <600px: One column (this includes most smartphones)
- As content layouts change, elements will move to accommodate different screen sizes.
- Some graphical elements can be hidden completely on mobile devices.
- For more information on making an Act-On Email responsive, see: Create a Mobile Responsive Email Design
Responsive Settings in Act-On will stack columns vertically
When Act-On content sections have 2 or more columns, they will automatically stack vertically on smaller displays. This may reorder your sections in an unintended way. We recommend testing this on multiple devices to see the impact. To avoid this issue entirely, use a different section for each row in your content.
Adaptive or Fluid Design
- In adaptive design, your design scales proportionally to the size of the screen the design is loaded on. An adaptive design has a static layout (your one-column layout is always one-column) -- it merely changes size overall.
- Adaptive designs are powered by percentage widths. For example, a banner image that is 100% wide will take up the entire width of any screen.
- Adaptive design is supported in all email clients (unlike responsive).
- To make your design adaptive, use percentages for widths. It's important to do this for most elements, such as table widths and images, while some you may want to keep static, such as CTA buttons.
Mobile-friendly
Your email message, landing page, or form does not have to be adaptive or responsive to still work well and be effective on mobile devices. You can also:
- Use a single-column layout
- Use a relatively small width (e.g. 550px)
- Use smaller images
- Use larger fonts (so users don't have to zoom in on their cell phones)
