News Flash: Wandering Office 365 Waffle, Or “Who Moved My Waffle?”

Call it the waffle or the App Launcher or whatever you want (internally it has the CSS class ms-Icon–waffle2, so I think Randy Drisgill [@drisgill] is right, as usual), but if you use Office 365 or the soon to be available SharePoint 2016, you probably click on it dozens of times a day.

Recent changes to the Suite Bar (CSS classes start with suiteBar) have made it more responsive for different sized screens. This is a good thing, as the Suite Bar can now scale from a wide-screen desktop monitors down to a phone screen. How modern.

The implementation may confuse, though, so be prepared for some quizzical looks from your users.

Desktop Mode

Desktop Mode

Tablet Mode

Tablet Mode

Phone Mode

Phone Mode

As you can see, the waffle is where you’d expect it in desktop mode, and I get to see my Sympraxis Consulting logo as well.

The phone mode also seems to make sense. The logo is gone – there’s not really any room for it – and the icons are all hidden, albeit behind the dread ellipses rather than the hamburger most people are used to.

It’s the tablet mode that will probably throw your users. “Where my waffle?”, you might ask? Well, it hops over to the right, jumping over the Suite Bar title (“Sites”, “Outlook”, etc.) to hang out by the notifications icon (at least for now – the Suite Bar changes frequently).

It looks like the media query kicks in at 1024px, which may be the width of some of your users’ regular desktop screens, even in this day and age. Even if they have higher resolution monitors, they may not use their browser in full screen mode. (I’m a full screen guy myself.)

All in all, it’s no harm – but some of your users may cry foul. Be prepared for it. I’m seeing it in my own First Release tenant as well as in several non-First Release tenants as well.

Thanks for Stefan Bauer (@StfBauer) for the heads up on why this is happening.

5 Comments

  1. great post and points Marc. Thanks for the heads up. And, good luck with your First Release tenant app.

    Btw — I had to look up “hamburger UI” … I guess we’ve all seen it a gazillion times, but I never paid attention to what people called it. The more ya know!

    Reply
  2. The code name was “waffle” and engineers in Redmond still call it that. But it is official called the “App Launcher” externally ;-) that’s the problems with codenames, they sneak out in stuff like this and too late to refactor. lots of examples…seen MyBrary.aspx *sigh*

    Reply

Have a thought or opinion?