{"id":6279,"date":"2017-01-27T19:19:02","date_gmt":"2017-01-27T13:49:02","guid":{"rendered":"https:\/\/email.uplers.com\/blogs\/?p=6279"},"modified":"2020-07-31T00:01:16","modified_gmt":"2020-07-30T18:31:16","slug":"mailable-microsites-rei-menu-email","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/mailable-microsites-rei-menu-email\/","title":{"rendered":"Mailable Microsites II – How REI \u2018Served\u2019 Up Interactivity Using Hamburger Menu"},"content":{"rendered":"

Any object\u2019s value is based on its utility in day-to-day situations. When the application of an object surpasses its initially defined purpose, it is called value addition. Value addition is always welcome. A minor tweak in the interaction to simplify the method of information dissipation is one of the values that email needs to satisfy.<\/p>\n

As second part of the ongoing Mailable Microsite series<\/a>, Uplers shall now enlighten you on the simplification Hamburger Menu brings when integrated in an email. In the first part, we had observed how inclusion of carousel effect in the emails<\/a> helped B&Q in improving information dissipation. With the inclusion of Hamburger menu in emails<\/a>, brands can hide their navigations on the top when the email is viewed on a mobile device. This way the subscriber will first lay eyes on the email without any distractions.<\/p>\n

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

Let\u2019s understand how adventure gear retailer, REI clothing implemented hamburger menu in their emails over the years.<\/p>\n

From a Responsive Email to a Menu Enabled Mailable Microsites<\/h2>\n

Earlier, emails were largely opened on desktop devices. In 2009, the need for responsive email templates<\/a> picked up pace as people started opening emails in mobile devices<\/a>. REI\u2019s 2012 email was a beacon stating their first step into the mobile responsive domain.<\/p>\n

In the first example from 2012, on a single look, you observe that REI have a navigation menu on the top of their email. The subscriber was free to click on them to be redirected to corresponding page on the website.<\/p>\n\n\n\n
\"Menu-in-emails-REI-2012-sample\"<\/td>\n\"Menu-in-emails-REI-2014-sample\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

The second example is from 2014, when they increased the amount of elements on the overhead navigation menu, meanwhile making use of the preheader text and shipping announcements at the header itself optimally.<\/p>\n\n\n\n
\n

\"Menu-in-emails-REI-2015-sample\"

2015 REI email with Hamburger Menu<\/p><\/div><\/td>\n

\n

\"Menu-in-emails-REI-2017-sample\"

REI email with Hamburger Menu (Open & Expanded Menu)<\/p><\/div><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

It was from the year 2015 when REI metamorphosed their website as well as their emails to a minimal and cleaner look. By making use of the Hamburger menu in their emails (in example\u00a0above), the navigation menu was hidden and the user had the freedom to interact with it to be redirected to the required page.<\/p>\n

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

Advantages of Menu in Email<\/h2>\n