Interactive Email – II: Introducing Accordion in emails

Before a week, we published ideas as to how different industries could use menus in email with three different sample menu types. The idea got an overwhelming response and with our zeal to add more to the interactive email basket, we have now researched and developed possibilities of using vertical accordion in emails.

After navigation and menus in interactive email, it’s also very much possible to actually use accordion in emails. So, do not send same boring layout. Innovate your campaigns and make sure you utilize some of these components to make them look attractive, interactive and out of the box. With the kind of accordions we have placed in our sample, you could actually keep the layout for your emails longer on Desktop, but the same layout converts to a smart accordion automatically cutting down the length of the email layout when viewed on mobile devices.

Advantages of using accordion

Stack-up content

Like the landing pages that are optimized for mobile devices, an interactive email with accordion would be the perfect fit for smaller viewing environments. With accordions, marketers could stack up the content in different tabs and clearly make emails smarter and accommodate a lot of content in a sleek way. By collapsing the information and showing just the titles marketers will be saving around 600% on vertical space (assuming a paragraph is five lines and a title is one line long).

Copy would not kill the UX

Some marketers tend to write lengthy emails which are tedious to read. This is mainly due to poor copywriting knowledge or information heavy emails. So, for marketers who need to share a lot of content in their emails can actually use accordion to improve the overall UX and at the same time save uses time providing them option to read what they like.

Measure the information consumed

Well, with all the information placed on the table (email) you don’t really know how much of it is or will be consumed. With accordion, marketers can measure the clicks on the tabs and identify which area of information is more interesting for users. It could also help in sending a better interactive email the next time.

Progressive disclosure increases engagement

With accordions marketers can also choose to provide progressive disclosure of information leading to more engagement while skimming through emails.

Feeback emails doesn’t require landing pages

Unlike previously where feedback emails used to land users on different landing page, with accordions, marketers can provide questionnaire within the emails and use them as forms. Doing so, users can provide feedback right in their inbox.

Application

• Retailers as always could show many product with different information clubbed in accordions.
• Media and technology companies can show various navigation options and use an accordion beneath each of these menus to further smarter their emails.
• Accordions are sure-fire ways to actually send feedback emails with questionnaire as mentioned earlier.

And, there are so many more industries that can use accordion in their interacive email for providing categorization smartly.

Sample

Get sample email on your mobile to see how it renders!

Compatibility

Using interactive accordions in mobile is compatible across many email clients now. To check detailed compatibility report, click here.

Limitations

The accordion will work only on mobile email clients. Windows based clients might not support such accordion as it uses CSS3. The accordion will work with email systems that support external CSS only. The accordions will also not work with gmail app and third party apps.

Few Best Practices

• Don’t overuse accordion as using them too frequently will also make your interactive email monotonous.
• Consider finger targets of mobile users while placing the accordion and content therein
• Don’t overload accordion with too many categories. It will create a clutter and make it hard to act upon.
• Check and test your code’s compatibility