Creating Responsive Designs for Content
- Responsive design is popular in web design, but is not supported in all email clients. It is powered by CSS media queries in both browsers and email clients.
- An example of responsive design is to change your website layout 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.
Adaptive or Fluid Design
- In adaptive design, your design scales proportionally to the size of the screen the design is loaded on. The design does not change 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).
- Existing email and web page designs can usually be made adaptive easily. Most of the effort involves changing set pixel widths to percentages.
- 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
- An email message, landing page, or form referred to as mobile-friendly is also generally lighter in terms of file size -- for instance, images loaded are not large
- Generally, the font sizes, buttons, and links on the page are not set to be very small (which would require zooming on mobile devices to be readable or usable)
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. Notice how the form below is reordered to separate the First Name and Last Name fields.
To avoid this issue, use a different section for each row in your content.
These principles can help content display well on mobile devices:
Use white space in your design
- Leaving some screen space empty 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
- Emails are rarely displayed fullscreen on a desktop computer monitor.
- Make sure messages display properly at around 550px.
- 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
- For Forms and Landing Pages, the Review tab will show an accurate view of mobile layouts for most devices.
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.