{"id":11425,"date":"2018-08-16T19:30:18","date_gmt":"2018-08-16T14:00:18","guid":{"rendered":"https:\/\/email.uplers.com\/blogs\/?p=11425"},"modified":"2020-10-28T17:24:12","modified_gmt":"2020-10-28T11:54:12","slug":"mailable-microsites-microsoft-emails-accordion-css","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/mailable-microsites-microsoft-emails-accordion-css\/","title":{"rendered":"Mailable Microsite VI: How Uplers \u2018played\u2019 a new tone for Microsoft using Accordion in Emails"},"content":{"rendered":"

Everyone loves to say a \u2018lot\u2019 in the online space, but space<\/em> as such has always been a constraint. But if you can do it, you win! One of the crucial reasons why Twitter became popular is because it realized the very notion of communicating your thoughts in 280 characters. Have you though how can you implement the same theory in emails? Accordion in emails can change the game!<\/p>\n

As a sixth part of the popular Mailable Microsite series, Uplers enlighten you on how you can dramatically reduce the email length without compromising on the email copy using Accordion effect. Just like the musical instrument accordion, the use of interactive design element – Accordion<\/strong> helps collapse and expand sections of the email based on user interaction.<\/p>\n

Pair the expand-collapse effect in Accordion with a relevant animation and you have an email that motivates your subscriber to explore all the sections.<\/em><\/p>\n

\"\"<\/a><\/div><\/div><\/span>
\nLet\u2019s understand how Microsoft experimented with implementing Accordion effect in their promotional email<\/a>, and how Microsoft can implement accordion effect in some more emails as in Newsletters.<\/p>\n

Check out Uplers futuristic approach to implementing the Accordion (interactive) element to a LOOOOOONG Microsoft Newsletter template >><\/strong><\/a><\/em><\/p>\n

How Microsoft Email Implemented Accordion Effect for Their Promotional Email<\/strong><\/h2>\n

Ideally, an email should only be 2 scrolls long. Any longer than this will discourage the subscriber to proceed till the end. Microsoft implemented Accordion effect in one of their promotional emails to promote their \u2018Surface\u2019 range of products.<\/p>\n

Here, as you can see in the below email, they have segmented their products into different sections when implementing the Accordion effect.It\u2019s only when they click any of the arrows, do the subscribers experience the magic.<\/p>\n

\"surface-accordion-css\"<\/p>\n

Details about each product is revealed and a relevant CTA is shown in each section. Moreover, only when the section is expanded, the complete product image is revealed which adds to the visual appeal. This way, each product gets individual attention and owing to expand-collapse feature, the overall email length is not affected by the content.<\/p>\n

While this email from Microsoft was a visual wonder that implemented accordion effect very well, it received a lot of flak from email developer community. This interactive email from Microsoft was not compatible in any of email clients from Microsoft except Outlook for Mac.<\/strong><\/p>\n

Accordion effect is compatible across Gmail (desktop and mobile), Apple Mail, iOS Mail and Thunderbird, so roughly 80% of the popular email clients<\/a> will support the email.<\/em><\/p>\n

\"\"<\/a><\/div><\/div>\n

<\/a>How Microsoft Can Include Accordion in More Emails<\/strong><\/h2>\n

In the following newsletter email, Microsoft promoting the features of their latest operating system, Windows 10. What if they created an Accordion effect for this email!<\/p>\n

From our email template<\/a> production experience of designing and coding emails for our 65,000+ customers worldwide,<\/a> we realized this email can be converted into an Accordion and have suggested some design suggestions. In fact, Uplers couldn\u2019t resist exploring the impact and fun, using interactivity like Accordion could have made to Microsoft\u2019s existing newsletter template below:<\/p>\n

\"Windows-10-Newsletter\"

Click on the image to view the full email<\/p><\/div>\n

Uplers Visualization on Accordion CSS in this email is:<\/p>\n

\"Windows-10-Newsletter-accordion-css\"

Click on this image to experience the email<\/p><\/div>\n

Suggestion #1: CTA button at first fold.<\/strong><\/p>\n

\"Windows-10-Newsletter-CTA-accordion-css\"<\/p>\n

Suggestion #2: Segment into sections<\/strong><\/p>\n

\"Windows-10-Newsletter-Section-expanded-accordion-css\"<\/p>\n

Suggestion #3: Improved Footer<\/strong>\"Windows-10-Newsletter-footer-accordion-css\"<\/p>\n

Advantages of Using Accordion in Emails<\/strong><\/h2>\n