If you’re a developer for Office 365, SharePoint Online, SharePoint 2013 or Office Apps, you’ve no doubt run into the following - How do I make this look like Office / Office 365 / SharePoint?. This isn’t easy… not by any stretch. Sure some folks don’t care about this, but in my opinion this is a bad approach because now your app looks very different from the rest of the host application’s UX… which can lead to user adoption & training issues. I don’t know about you, but I hate user training… if they area already used to the UX in the host app, why reinvent the wheel?
So say you want to make your app look like the host app being O365, SharePoint or Office? You’ve go to get your designer to do this or you’ve got to be a CSS ninja or just rip it off from looking at the source. The last option is how I’ve done it for my SharePoint apps …
But it shouldn’t be like this… it should be so much easier! No doubt you’ve heard of Bootstrap … and it’s great and easy to implement your own UX with little to know detailed CSS tweaking. Just add some CSS & JS, then use the classes and poof you’re off.
The problem is that Bootstrap doesn’t look like the Microsoft Modern design guidelines so you’re left to do it on your own devices. This is hard as heck.
Let’s look at a comparison… like Microsoft, Google has their own design language. They call it Material Design & it has a lot of similarities to the Microsoft Modern design approach. Like Microsoft, they just throw their design guidelines out there, but other projects have popped up, like Polymer & it’s Polymer Paper Elements . Check out their demo of their components that implement Material Design … it’s pretty badass!
Building off this, Google’s Angular team has taken notice and has a project going to implement Material Design easily into Angular applications - Angular Material . I’ve used the latter and it’s very slick… in fact I’ve been using it in a lot of my SharePoint apps as the UX is pretty close to the Office 365 UX.
Microsoft has already defined the guidelines… there’s one for SharePoint and one for Office Apps . What’s missing is an actual implementation with source snippets, just like how Bootstrap does it as well as how Angular Material does it . This would help us make beautiful apps!
- Toggle Switches
- Quicklaunch / Menu
- Themes (colors & effects)
I’ve created a UserVoice submission for this ( UserVoice: Provide a Design Implementation for O365, SPO, SP2013 & Office App Developers ) so let’s see if the community can get behind it and make it happen? Personally I’m ok if the community does it, but I’d rather see it as a project that was led by the the OfficeDev group at Microsoft & have community involvement, similar to how the Office 365 Developer PnP work is going.
One thing I sruggled with when I was working on this blog post originally was thinking “this really shouldn’t be an Office 365 / SharePoint / Office App thing… it should be a Microsoft Modern design thing.” However I elected to target Office 365 / SharePoint / Office Apps because that is really the only place where I really see the Modern design principles really being implemented online on a Microsoft property… plus there are some things that are specific to Office that you don’t see elsewhere.