{"id":12251,"date":"2018-11-15T18:42:43","date_gmt":"2018-11-15T13:12:43","guid":{"rendered":"https:\/\/email.uplers.com\/blogs\/?p=12251"},"modified":"2020-05-24T21:29:37","modified_gmt":"2020-05-24T15:59:37","slug":"mailable-microsites-smashbox-hamburger-menu-css","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/mailable-microsites-smashbox-hamburger-menu-css\/","title":{"rendered":"Mailable Microsite VII: How Smashbox Brought Interactivity to their Menu in Email"},"content":{"rendered":"

Every email element in an email template has a role to play in the overall visual hierarchy.<\/p>\n

If you look at the image below, right at the top is the pre-header text in a font color that fades into the background, and a link to view the email in a web browser. This is followed by the brand logo for easy recollection and the Navigation Menu – for anyone interested to check out other products and finally the hero image greeting the subscriber (with a bold headline).<\/p>\n

\"Mailable<\/p>\n

This is great, but programmatically the subscriber first sees the brand logo, while the eye scan pattern moves down towards the navigation menu and finally onto the hero image and then the email copy. The same eye scan path is considered while designing the mobile layout. While all other elements are constantly optimized for mobile layout, navigation menu layout is sometimes overlooked.<\/p>\n

So, when such emails are viewed on a mobile device, the navigation menu is either scaled down as shown below:<\/p>\n

\"Mailable<\/p>\n

\n

Or each menu element gets stacked vertically, as below:<\/p>\n

\"Mailable

Fig 2. The responsiveness of the email stacks the navigation menu vertically, pushing the content further down.<\/p><\/div>\n

As you can see, with the navigation menu consuming a major real estate space in the email, the subscriber must scroll down to read the actual email. In this seventh edition of Mailable Microsites, Uplers here showcase how cosmetic brand Smashbox<\/strong> hid its navigation menu behind an interactive Hamburger Menu in Emails<\/strong><\/a> to reduce email content length.<\/p>\n

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

2015 \u2013 No Implementation of Navigation Menu in Emails
<\/strong>
Earlier, emails were mainly opened on desktop devices. In 2009, the need for responsive emails pick up the pace as people started opening emails more frequently in mobile devices. Smashbox\u2019s 2015 email was a beacon stating that their first step into the mobile responsive domain.<\/p>\n

\"Mailable<\/p>\n

In one look you find that Smashbox has a navigation Menu on the top of their email, where the subscriber is free to click and be redirected to a corresponding page on the website.<\/p>\n

2016 \u2013 Menu in Emails<\/strong><\/p>\n

2016 was the year when Smashbox metamorphosed their emails to a minimal and cleaner look. By making use of the Hamburger menu in their emails, the navigation menu was hidden and the user had the freedom to interact with it to be redirected to the required page.<\/p>\n

\"Mailable

2016 \u2013 Menu in Emails<\/p><\/div>
\n

\"Mailable

2017 \u2013 Menu in Emails<\/p><\/div>
\n

\"Mailable

2018 \u2013 Menu in Emails<\/p><\/div><\/p>\n

This way, those interested can check out other products via the navigation menu by clicking the menu on the top and rest of the subscribers can move forward with the email.<\/p>\n

\"Mailable<\/p>\n

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