Responsive Email Design Patterns: The Exotic Navigation

Mike Parry

Optimising or responsive email for mobile means more than making them mobile friendly. There is a range of possibilities to make your email win big on the small screen. One element that deserves extra attention in any superior mobile email is the navigation bar. In my previous article I went into the popular design patterns for responsive email navigation. Let’s see some more exotic examples, because you don’t want to be standard, do you?



Iconise

This is pretty cool. Replacing certain navigational elements with icons allows you to free up space and be more visual. In the Swarovski email ‘gifts’ becomes a gift icon and the ‘shop finder’ a way sign. The rest of the navigation is shifted below the main message. The bottom of the desktop version shows that Swarovski is consistent in the icons that are used.

Hamburger menu

Feeling hungry for hidden menu’s? Have a burger! The hamburger menu is increasingly common in responsive designs but, although it is an interesting technique, doesn’t work in all email clients so isn’t a particularly viable option.

Alert!

In some cases the mobile view calls for a call-out. This email from grammar.ly stimulates you to start using the tool with ‘go to my editor’, but the editor isn’t meant for smartphone use so the desktop view shows a direct log in link, which is hidden in the mobile version.

Abbreviate

No need to ‘Visit a restaurant’, just ‘Visit’ will do, as Pizza Express show here. By abbreviating the menu item descriptions and using the short hand version, designers can keep the design concise and allow for more padding and breathing room around the items. This Kurt Geiger example shows a combination of two methods; the nav items ‘Brands’ and ‘Be Inspired’ are hidden in the mobile version. While ‘Bags & Accessories’ is abbreviated to ‘Accessories‘.

Sidebar to mid

We don’t see sidebars and sidebar navigation that often in emails anymore. Otto has a normal target group and category navigation bar at the top, but also lists the popular shops on the right hand side of the mail, doubling the navigation real-estate. In the mobile version the sidebar shifts below the main offer and is shown in two columns.

Miniaturise

Not every possibility is a good idea to try. This email from Arhouse shows what happens once we take an image to display the menu and just let it scale. The menu wasn’t great to begin with and even if your subscribers can decipher the navigation on mobile, it will likey lead to people accidentally cluster bomb-clicking.

Call out & add an item

This email from Cooking.com has a design made with two breakpoints. At the first breakpoint, the free shipping call out shifts below the navigation, remaining an eye catching item. What is interesting is an extra navigation element is added at the left: ‘New’. Why? I don’t know, maybe it is even a fluke but it is definitely interesting and a way you could target the tablet users or hide an Easter egg :). This new cooking email also has another interesting detail; the desktop version comes with its own display ad to the right of the email.

App download Add-in

There is a lot of cool things going on in this Staples email. In the desktop version the ‘Daily deals’ and ‘Weekly ad’ are positioned next to the logo. On the small screen these are kept, by pushing the icon up and taking two rows for the text. The horizontal bar shift to a square is also well executed but what I wanted to show here is the add-in – on the mobile version you are encouraged to download the staples app, directly at the top.

Conclusion

With over half of all email opens originating from mobile devices, it is no longer a luxury to have your email tweaked for high performance on mobile, although not everybody is an email navigation bar enthusiast. Each use case will have a preferred mobile email navigation design. Will you drop, move, replace or something entirely different?

(96)