Do you know how much content is too much content in a marketing email? To find the answers, ask these questions:
- Is my email lengthy and overwhelming at first sight?
- Is every element in my email of equal importance?
- Is my content divisible into primary and secondary types?
Once you have the answers, look for better ways to present your content. One tried and tested option is to create your marketing emails as dynamic, interactive, AMP emails. The amp-sidebar component in AMP is particularly effective for displaying content more effectively.
So what exactly is the amp-sidebar component?
The amp-sidebar component brings app-like sidebar menus right into an email. You can add extra information like promotional deals and offers without dominating the main content. It also makes the content less crowded and easy to consume.
This post explains how you can present concise, dynamic, and even customized content, in your marketing emails. What you need is expertise with creating AMP emails. Particularly with using the amp-sidebar component.
What are the key benefits of the amp-sidebar component?
It lets you add more information without cluttering the email body. For example, you can include elements like additional links, navigational bars, complementary menus, and more… under a hamburger icon. Here are a few ways to build more appealing, more engaging, more effective emails using the amp-sidebar component.
Add paired content
Bring a lot of secondary content like settings menu, product information, guides, help docs, references, etc., into a single email. Offer interrelated content hooks users deeper into your emails.
Remove content confusion
Instead of cramming excessive content in the limited screen space, re-organize ancillary content with the sidebar section of your email. This way you keep the reader’s focus on the core message and the choice to access additional content only when needed.
Create an app-like experience
Most apps consist of sidebars to access different categories of products, profile settings and maybe even purchase history. Use the amp-sidebar component creatively to make your marketing email look and feel just like an app. Even though there’s a sidebar inside the email, users can access extended content from their inboxes by clicking on the sidebar icon.
How to use the amp-sidebar component?
The amp-sidebar component lets you display meta content intended for temporary access, such as navigation, links, buttons, and menus.
You’ll need to insert this script: <script async custom-element=”amp-sidebar” src=”https://cdn.ampproject.org/v0/amp-sidebar-0.1.js”></script>
You can use button taps to open and close <amp-sidebar> Or tap outside of the amp-sidebar. These button taps reveal the sidebar while the main content remains hidden beneath.
To display content that is within the sidebar onto other parts of the main content, use Child <nav toolbar=”(media query)” toolbar-target=”elementID”> elements.
The sidebar can only appear on a page’s left or right side. The <amp-sidebar> may contain any valid HTML elements (supported by AMP).
The <amp-sidebar> may include any of the following AMP elements:
- <amp-accordion>
- <amp-img>
- <amp-fit-text>
- <amp-list>
- <amp-live-list>
- <amp-social-share>
The sidebar’s maximum height is 100vh. If the height exceeds 100vh, a vertical scrollbar appears. The default height is 100vh. You can use CSS to override this limit.
You can set and adjust the width of the sidebar with CSS. The minimum width is 45px.
Touch zoom is disabled on the amp-sidebar and its mask when the sidebar is open.
To preserve a logical DOM order (for accessibility), and to avoid altering its behavior by a container element, <amp-sidebar> is recommended to be a direct child of the <body> Note that having an ancestor of the amp-sidebar with a set z-index may cause the sidebar to appear below other elements (such as headers) and break its functionality.
Set the ‘on action’ attribute on the element when it is tapped or clicked. Specify one of the following action methods to open, close, or toggle the sidebar:
|
|
The sidebar closes if the user taps back on the partially-visible main content area. Alternatively, press the escape key to close the sidebar.
amp-sidebar can automatically scroll the overflowing container to the first element decorated with autoscroll as an attribute in both sidebar and toolbar cases.This feature is useful when you want to present a long navigation list and want the sidebar to scroll to the current navigation items when the page loads..
<amp-sidebar> supports drill-down (nested) menus through a child component named <amp-nested-menu>. With <amp-nested-menu>, <amp-sidebar> you can nest one or more layers of submenus (and transition between them). When using amp-nested-menu, wrap every menu item in a <li> element to improve accessibility and keyboard support.
CSS tips to style the amp-sidebar component:
- Set the width of the amp-sidebar to adjust the width between the preset min(45px) and max(80vw) values.
- Set the amp-sidebar’s height to adjust the sidebar’s height if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw, but you can override it in CSS to make it shorter.
- Use the open attribute set on the amp-sidebar tag when the sidebar is open on the page exposes the current state of the sidebar.
If you wish to learn more about the amp-sidebar component for email, visit https://amp.dev/documentation/components/amp-sidebar/.
Variations of the amp-sidebar component
Here are some tips on how to use the component’s attributes, to style the amp-sidebar as per your requirements.
Adjust the display
Use the ‘side’ attribute to indicate which side of the page the sidebar should open from, either left or right. If there is no specification for the side, it takes the side value from the body tag’s dir attribute (ltr => left, rtl => right); if no dir exists, the side defaults to the left. Use the ‘layout’ attribute to specify the display layout of the sidebar, which must be nodisplay.
Create a toolbar
Build a toolbar element that displays in the <body> by specifying the toolbar attribute with a media query, and a toolbar-target attribute with an element id, on an <nav> element that is a child of <amp-sidebar>.
When styling the toolbar, the class amp-sidebar-toolbar-target-hidden is applied to the toolbar element when the toolbar-target element is hidden. Additionally, customize the mask’s opacity via amp-sidebar-mask.
Avoid accidental closure
Disable the ‘swipe to close’ the function by including the data-disable-swipe-close attribute on the amp-sidebar. If activated, swiping to close the sidebar will be disabled when using a mobile device or other touch-enabled devices.
amp-sidebar is frequently combined with the amp-list and amp-fit-text components to make the emails even more effective.
How can Netcore Cloud help you?
Netcore Cloud empowers you to create AMP interactive emails coupled with the world’s most advanced AI-powered email delivery. We send 18 billion emails/month on behalf of reputed businesses across 12 countries. We have worked with 50+ global brands to roll out interactive emails powered by AMP.
We offer an enterprise-ready AMP editor -a no-code, ‘drag-and-drop’ editor, which lets you quickly create AMP emails yourself. To customize further, connect with the in-house team of AMP experts. We’ll even design AMP emails for your specific use cases.
We’ll help you set up and integrate AMP emails in as few as 10 days. Yes, we know that AMP mails require whitelisting on Gmail and Yahoo! Mail. That’s why we give instant support for domain whitelisting, custom AMP design creation, and email delivery optimization. We want to make sure you maximize your email marketing campaign’s ROI.
Our team partners with your marketing team to help you leverage the power of AMP emails and drive more business revenue. Our experts share your brand’s unique KPIs and work as your team’s extension, to provide result-oriented solutions.
Connect with us to tap into our expertise, and creativity with AMP mails and a whole range of other Martech products and services.
