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 Take a Step Back… What are Others Doing?
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.
Call To Action
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!
What I think we need is a pack, distributable in a NuGet package as well as a Bower package, that includes all the CSS & JavaScript we need to easily implement all the common components in Office 365, SharePoint Online, SharePoint 2013 & Office Apps. What would this include? This would include things like:
- Layout
- Grids
- Tables
- Dialogs
- Alerts
- Lists
- Links
- Buttons
- Dropdowns
- Toggle Switches
- Quicklaunch / Menu
- Style
- Typography
- Themes (colors & effects)
What do you think?
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.
Comment here, comment on the UserVoice submission, or comment to @OfficeDev on Twitter… lets get this going!
Additional Thoughts - February 26, 2015 @8pm
Since writing this I have become aware of WinJS which you may be famliar with. It is the JavaScript library used in building WinRT and Windows 8 apps using HTML, CSS and JavaScript. It has been moved to GitHub as an open source project that is “a set of JavaScript toolkits that allow developers to build applications using HTML / JS / CSS technology.” To me, the controls look a lot like Microsoft’s Modern design implemented for the modern browsers. There’s even an Angular implementation!
One thing I struggled 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.
This could serve to be a great base for the start of this Modern Brand Implementation Pack I proposed in this blog post. We just need some themeing capabilities to make the colors look like the Office properties and maybe some additional controls that are specific to Office properties. Furthermore, looking at the code samples, I like what I see, but I still prefer the simplicity when you implement Bootstrap or Material Design… just CSS classes… you don’t have to write a bunch of JavaScript… and from the demos on WinJS that you can get to from the http://try.buildwinjs.com site, it seems like a lot more work to implement it.
