BC tip: Suncor Energy – Social media pop-ups

Social media icons with pop-up menus can help integrate digital channels and send visitors to the right place.

BC tip - Suncor.png

The Feature

The social media icons in the footer of Suncor Energy’s corporate website have pop-up menus with links to different pages on Facebook, Twitter, etc.

For example, on clicking the Facebook icon, links to five of the Canadian oil company’s Facebook pages appear – the main corporate page; careers page; and consumer and campaign sites.

For icons with one channel, such as Flickr, there is an introduction ‘Check out our Flickr photostreams’. YouTube has a longer introduction to its two channels: ‘We maintain several official YouTube channels to share official Suncor videos as well as relevant videos and playlists from our stakeholders.’

The pop-ups also work in smartphone view of the responsive site. Unusually, the set of icons has one for Suncor’s blogs, with a pop-up menu describing three that the company maintains.

The Takeaway

The pop-up menus are a quick way of promoting multiple social media pages from one set of icons, and help visitors find the right channel.

Many companies have a main Facebook page and a Careers page, for example, and these can be brought together without worrying which one is being promoted in the footer at any given time.

There are weaknesses in the way Suncor uses the icons – some of the Facebook channel headings are unclear, for example. The blog menu is promoting two blogs that are no longer maintained.

One company we know used pop-ups, then dropped them.

Used in the right way though, they could be a neat hub for a company’s social media pages, and a good way to integrate the company’s online presence.

www.suncor.com

BC tip: Merck - Rise of the footer

A US pharmaceutical company’s home page footer expands upwards when the mouse hovers over it.

BC tip - Merck.png

The Feature

The Merck.com home page has a narrow footer panel with three headings in a row – ‘Latest News’; ‘Social @ Merck’ and ‘Other Merck Sites’.

When visitors hover the mouse over any part of the panel, it rises up the page to reveal more details under each of the categories – summaries and links to press releases; the latest tweets and social media follow icons; and links to other parts of the web estate. Moving the mouse off the panel causes it to collapse back down the page.

On a smartphone screen, the three elements of the panel are stacked vertically. The expandable footer appears to be limited to the home page; it is not on any of the section landing pages, for example, or anywhere else that we clicked.

The Takeaway

Merck’s expanding panel tries to do for footers what the mega dropdown menu has done for primary navigation. On the Merck home page, the feature is a space-saving way to let visitors see options that are not in the main menus at the top; and helps to keep the home page from scrolling. It could be a useful design in some circumstances – if footers can expand downwards, why not have the option to go up too?

It is not clear this works completely – for example, the way Merck have implemented it means they cannot have a longer home page, even if they wanted one. There are some other disadvantages in the way it is executed – on smaller laptop screens the panel obscures some of the text in the carousel.

If in doubt, a useful guideline to follow is, don’t try to innovate with navigation.

www.merck.com