Email marketing accordion menus can be a lifesaver. newsletters can get long.
Really long.
Now, we don’t recommend sending a boat load of content to your subscribers. But we do understand sometimes you’re required to send a large amount of content.
The least you can do, though, is make it scannable for your mobile audience.
A two-or-three-column email layout may be readable and condensed on desktop. However, as it stacks the content into a single column for legibility on mobile devices, the email may start to feel infinitely long.
To assist your subscribers in quickly finding the content that interests them most, email marketing accordion menus will do the trick.
Essentially, an email marketing accordion menu is a mobile-only interactive element that allows a user to show or hide specific email content. The ability to hide content can save more than 50% of email height, creating a more succinct mobile experience.
Let’s explore the most common uses of accordions: housing navigation in a hamburger menu and hiding stories/products/etc. under section headers.
Hamburger Navigation
Using hamburger menus for header navigation ensures the primary content doesn’t get pushed down too far. It still offers front-and-center access to specific pages of your website.
There are several ways to code email marketing accordion menus.
Some involve JavaScript. Some require lines and lines of complex CSS code.
In this example, we wanted to create something simple to implement that would work on most mobile devices. In our research, this one-click solution fit best.
Now on to the code:
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”OmmawR” default_tab=”html,result” user=”ktrane331″][/codepen_embed]
Content Accordion Menus
There are a LOT of nested tables and other styling elements in this example. But it basically follows the same technique as the navigation accordion menu.
In this example, we add two additional sections that contract when other sections are opened. This feature requires some additional IDs and accompanying CSS. It’s not too complex, though.
Here’s the code:
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”zwwMby” default_tab=”html,result” user=”ktrane331″][/codepen_embed]
Conclusion: Email Marketing Accordion Menus Save the Day
And there you have it! Those are our expert tips about why and how to implement email marketing accordion menus.
All in all, these design devices can make your email’s content so much easier to digest. And they’re not too tough to implement if you know a little code.
If you DON’T know code, but have dreams of using accordion menus… we can help. Just schedule a demo and our implementation team will be glad to help you.