AUDIENCE: Administrators, Marketing Users, Web Developers
OBJECTIVES: Outline best practices for responsive, adaptive, and mobile-friendly design.
This article is applicable to the following on mobile devices:
- Landing pages (for Act-On forms, see the article Enabling Adaptive Form Widths Through CSS Options)
With roughly half of overall email opens occurring on mobile devices and a significant amount of web browsing taking place on mobile devices as well, it is important to keep mobile-friendliness in mind. The question is how to best prepare your new or existing designs to scale down to smaller screens in a readable way.
Mobile-friendliness does introduce complexity to the realm of web and email design, however in most cases even modest changes to a design can greatly improve mobile-friendliness.
Key terms to know
- Responsive design has become popular in web design due to unanimous support for it in modern browsers. In email, there is limited support, though it is possible in email to a lesser extent. It is powered by CSS media queries in both browsers and email clients.
- An example of responsive design is to have your website layout be three columns on screens wider than 1000px, two columns on screens wider than 600px, and one column on screens smaller than that (this includes almost every smart phone and some smaller tablets).
- When a layout changes in responsive design for smaller screens, typically a multi-column layout with content on the side of the screen is moved above or below the primary page content for mobile devices. For example, your website's navigation bar typically collapses down into a slide-out menu or drop-down menu on mobile devices rather than appearing as a wide horizontal row of links on larger screens.
- Some responsive designs will hide unnecessary graphical elements on mobile devices which would otherwise clutter the appearance on smaller screens.
In email, responsive design is not supported in many popular clients due to the email client application's developer company choosing to ignore responsive code (CSS media queries). Popular clients that do not support responsive design (media queries) include:
- Gmail mobile app for all platforms (and Gmail on the web)
- Yahoo mobile app for all platforms (and Yahoo on the web)
- Outlook mobile app for all platforms (and Outlook on the web and desktop)
- Mail application in Windows Phone
Adaptive design (also known as "Fluid Design" or "Fluid Layouts"):
- 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.
- For example, an adaptive email can have a banner image that is 100% wide. This means that the image is 600px wide on Outlook for the desktop where the email content window is given 600 pixels of width. On an iPhone where the screen is 320 points wide (640 pixels at 2x density), the image will be 320 points wide.
- Adaptive design is supported in all email clients (unlike responsive), and is technically much simpler to roll out for both email and web pages. Existing static-width designs can often easily be made adaptive. In essence, all it requires is using percentages in your email table widths and image widths rather than fixed-pixel widths as you might normally do.
- A responsive design typically incorporates elements of adaptive design. For example, the layout may change on mobile (via responsive properties) but the images will scale up and down proportionately with the screen size (via adaptive design)
- Mobile-friendly does not refer specifically to responsive or adaptive design, but to the overall concept of making your design work well on smaller screens.
- 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)
General tips for mobile-friendly design
Whether you are using responsive design, adaptive design, or some other method to make your email mobile-friendly, the following tips and best practices are always applicable.
- Provide 'white space' in your design
- White space refers to some empty space in your design, meaning in the world of web design or email that not every square inch is used for text, images, or video
- White space makes your text more readable
- It also provides a small 'safety net' for your design: Mobile HTML rendering engines will sometimes re-size small text to be more readable, and white space gives this text space to expand into
- Due to differences in font rendering between different platforms (not just mobile devices), fonts are not always the same size or width between one browser or mail client and another. For example, you may notice how text looks slightly different between Mac and Windows, or that text that is all in one line on your computer is broken into two lines elsewhere. Allow some margin of error here as text grows, shrinks, or changes slightly between devices.
- For email: Keep your overall width in mind
- Email messages are not like web pages and are usually not given the full screen-width on desktop devices
- If your email is not responsive or adaptive (Which is okay! It doesn't have to be to look good on mobile devices) be sure to avoid going any wider than 650px
- If your email uses some sort of designed layout with a fixed width, keeping it no more than 550px is recommended
- Use shorter paragraphs
- Unless you are familiar with your message recipients enough to know that they prefer a large volume of continuous text in your paragraphs, adopt a less-is-more mentality
- Use design elements, like dividing lines or space, to separate text content areas
- Keep load times short
- Long load times is one of the top reasons visitors will abandon a website. This applies to email as well.
- Keep your image sizes down, as these are often the biggest factor contributing to site load times
- For instance, if you are loading an image in a section of your design that is up to 400px wide, your image shouldn't be 1200px and resized by the HTML/CSS. A 400px version of the image could be 75% smaller in terms of kilobytes needed.
- Some mobile devices are older and slower, and some of your recipients may be downloading your content over a lower-grade connection
- Use a clear 'call to action'
- A call to action is what you want your reader to do with your email. In Act-On, clicks in email are an important metric, and clicking an email message also allows us to convert an anonymous visitor to known. 'Download Ebook' in a large, easy-to-click button is a good example of a call to action in an email or web page. A regular-sized text hyperlink that says 'click here' is less ideal.
- For email: Avoid background images or dark full-message backgrounds with white text
- Due to the wildly varying standards for an email client's HTML support or background color/image support, you can't assume that your dark background or background image will always be shown to the viewer. If it is removed, ensure your text will still be readable.
- Creating tables with a dark background color or background image is safer. Using a dark background or background image for the body of a message is discouraged.
- For email (designers in particular): Test thoroughly and remember that there are no HTML standards in email clients as there are in web browsers
- For instance, many popular clients such as Gmail (the web app and mobile apps) will ignore any internal CSS (in <style> blocks), and external stylesheets are almost never safe to use
- If your email uses responsive design, it needs to be built in a way that your responsive CSS <style> block adds the responsive behavior but all your 'core' styling is contained within inline CSS
- Web browsers have the w3c standards for HTML and CSS that ensure that web pages typically look the same or nearly the same between browsers. For email clients, there is no such standard. Some popular email clients such as Outlook for Windows or Gmail use more restrictive HTML rendering engines that block certain design elements.
Frequently Asked Questions
- Can I create a responsive design inside Act-On?
- Can I convert an existing design to be responsive?
- The easiest way is to generate layout in the new composer, and then to arrange your pre-existing content inside your layout. For example, if you have a single rich text block with a table structure, you would want to remove this table structure and instead move your content into the equivalent layout structure, with your content spread across multiple rich text blocks.
- Please keep in mind that converting non-responsive content to being responsive requires a moderate or substantial revision of your design. Responsive design involves a large amount of CSS that is written to apply to a specific layout, and the underlying HTML needs to be written in a way that enables CSS to modify the layout. A responsive design typically needs to be built with this in mind when it is first created. It is not possible to provide 'generic' responsive code that will work on any email message or web page.
- You can make a fixed-width design to be 'adaptive' in Act-On using our Rich Text Editor by converting fixed widths to non-fixed widths. For example, by changing an element with a width of "500px" to "100%".
- What about forms? Can forms be made to be mobile-friendly?
- Yes. For information on the changes necessary, see the article Form CSS Options to Enable Adaptive Width Inputs
- Can I use my responsive and/or grid-based framework in Act-On?
- Yes, you can use responsive frameworks such as Bootstrap and others. Keep in mind that these frameworks should not be used in email unless designed specifically for email. You will want to implement this via a Custom Stationery or a Custom Content Block. Act-On's new composer uses its own responsive grid to power the responsive behavior.
- My layout of my responsive page changes when I make my desktop browser window smaller, but is still zoomed out when I look at the page on my smartphone. Why?
<meta name="viewport" content="width=device-width, initial-scale=1">
- My email message doesn't look very good in Outlook, or looks different when I check it in some email clients versus how it looks in Act-On. Why?
- Outlook for Windows is roughly equivalent to Internet Explorer 4 in terms of ability, and furthermore there are differences in email rendering between Outlook for Windows and Outlook for Mac, or the Outlook/Exchange mobile applications and Outlook.com.
- Another example: Google allows only inline CSS in their Gmail applications and webmail viewers, whereas Apple imposes almost no restrictions for mail on iOS or Mac
- If you have a complex design in your email message, it needs to be designed in a way that will still look acceptable in less-capable clients. For readers opening your mail in less-capable clients, unfortunately it is important to understand that some design elements may be ignored, much like how a well-designed website will work in old browsers with some elements removed.
- Act-On does not change the underlying HTML/CSS of email messages in ways that would affect their appearance when delivered. If you have a pre-designed message created outside of Act-On whose appearance seems to be changed, please use a Custom Content block and review the article Differences Between the Rich Text Block and Custom Content Block When Using Custom HTML or CSS.
- Designing Custom HTML Email Messages
- Customizing Form Appearance and Functionality
- Create Stationeries
- Adding a Custom Content Block to an Email Message
- Differences Between the Rich Text Block and Custom Content Block When Using Custom HTML or CSS
- Enabling Adaptive Form Widths Through CSS Options
- CSS Media Queries (Mozilla Developer Network)
- Twitter Bootstrap (Official site)