alogo

Marketwatch Converts Menu Layout

Bootstrap-like sticky menus which are also mobile responsive are gaining traction among major vendor websites. Coverage on our sister site, JavaScripture, has increased about savvy  JS  Mobile Responsive Frameworks The latest example of mobile responsive use is the Wall Street Journal’s satellite site, Marketwatch. This site has undergone a major menu layout shift in the past few weeks:

mwatchnewm

Users of JS Mobile Responsive Frameworks like Bootstrap or Foundation Zurb will see no small resemblance to their navigation menubars in the screen shot above which is an interior post or story on Marketwatch.

And just like Bootstrap or Foundatio Zurb, the Marketwatch menus are sticky. But they are sticky with a strange twist:

mwatchsticky

Marketwatch’s sticky menus on scrolling down convert to tiny smartphone layout even though there is plenty of room for the full width menu.

mwatchphoneBut as can be seen to the left, the new menus do fit mobile phone screens as this smartphone screenshot shows.

Not only do the menus resize but also the contents are downsized to fit the smartphone window. Also the contents are swipeable rather than using scollbars as used on PC large screens. When PC screens are resized to smartphone dimensions scrollbars appear despite the fact that mousewheels and trackpads are capable of scrolling the screen.

Finally the menus collapse down to a dropdown menu icon used by many mobile apps. This shows the growing popularity of space saver UI widgets like dropdown combo boxes, accordions, and tabs.

Not only do these layout widgets save precious UI real estate but they improve performance as well. This developer deliberately hides large or complex images, videos, and diagrams behind closed accordion or tab panels on initial  Web page load to allow users to do useful work while the large scale items complete their downloads.

Summary

Sticky, mobile responsive menus are going beyond SPA- Single Page Apps. When a major website like  Marketwatch adopts them, they are “in”. However, note that Marketwatch has still  not adopted mobile responsive design for its main or Home page which is quite complex and may require a special design. Users can see this by opening Marketwatch into a 1/3 panel in Windows 8 or a deliberately downsized browser window.

What may be accelerating this trend to sticky menus is the fact that JS Mobile  Responsive Frameworks are free, open source [it looks like WSJ, the parent of Marketwatch, has cloned Bootstrap code] and also so easy to code and develop with. Just saying…

Pin It on Pinterest