How to handle table component of Office UI Fabric

In fact the source code of the table component of Office UI Fabric looks a bit weird because it is currently built with <div> elements instead of HTML table elements.
The intention behind such div based tables come from the idea to improve the responsive behavior. This idea behind this is almost more than five years old. A time that marked the beginning of responsive web design. Nowadays this pattern is only hardly used because no matter how you build your tables you always face the same problems.
Yesterday i got the confirmation on GitHub that this pattern is subject to be changed.
Time for me to show how this pattern can be transformed to a normal HTML element and to show some advanced techniques to deal with tables in responsive web designs.

See the Pen Office UI Fabric – Table by Stefan Bauer (@StfBauer) on CodePen.14928

[Read more]

0 comment

The not so responsive new Office 365 suite bar

Many people recently discovered a new enhancement in Office 365 and especially SharePoint. The suite bar is now responsive if “First Release” option on your tenant is activated.

Responsive Office 365 suite bar rendered on mobile device

Responsive Office 365 suite bar rendered on mobile device

The first people that blogged about this responsive improvement were Wesley Hackett and Marc D. Anderson.
The current implementation works well on desktop but not on mobile devices.

Why it doesn’t make your Office 365 / SharePoint responsive?

Actually the current suite bar lacks of one important thing. The viewport meta tag is currently not implemented in SharePoint or Delve. This tag is responsible to render the page correctly. The display of modern devices has a higher pixel density than the normal desktop computer. The viewport meta tag helps the browser to scale web sites properly. Is this html tag missing in the header of the html document the website will be rendered as a desktop version, but everything is tiny and unreadable unless you pinch and zoom.
If you have a new Lumia 950 for example the pixel density is 314 pixels per inch. Desktop monitor in reality has pixel densities beyond 72 pixels per inch but thus the actual base size your browser renders the web site. All CSS values are calculated based on this.

On mobile devices without a proper viewport meta tag the web site will look like the desktop version, but really tiny and therefore unusable.
This brings us back to the new shiny responsive suite bar. A good example when a web site wasn’t tested on a real device. Works perfectly on a desktop browser but not on mobile. Someone might have forgotten to include the view port on the master page. On my phone, SharePoint will be rendered like this.

Suite bar rendered on mobile device

Suite bar rendered on mobile device

As mentioned earlier, it is currently only available for first release subscriptions. So currently nothing to worry about. I hope this will be fixed in the final release and we currently see an early beta version of the suite bar.
Where can the problem be spotted. Simply everywhere in Office 365. Here is a detailed list:

  • Missing viewport meta tag
    • SharePoint
    • Delve
  • With viewport but not responsive design
    • Outlook
    • Calendar

Outlook and Calendar use device detection. Some sort of Device channel to work responsive.
The only first an real native responsive apps are currently Sway and blog post on Delve. Both are equipped with a correct viewport.

Final thoughts

The new suite bar gives a nice outlook on coming up design features. I expect to see more improvement in the near future. Currently, SharePoint in Office 365 and SharePoint 2016 is built upon XHTML 1.0 and not HTML 5. Once the doctype have been converted an all functions work on HTML5 I guess we will see more adoptions to come out faster and more reliable.

From my perspective the new suite bar is a fast shot. I also have concerns about the usability. On mobile the waffle aka app launcher is hidden behind the three dots in the suite bar. To switch between SharePoint and Mail or Calendar users have to tap twice. This forces to learn user a new behavior because the app launcher was one of the essential improvements recently.
On the tablet devices the app launcher is jumping from left to right. This is actually a no-go. User will get confused. A small resize of the window is enough to show this effect. You don’t even have to be on a tablet device.

If you think about to change the master page of SharePoint to make this work. In Office 365 editing the master page is not recommended to do so. I guess this issue will be fixed by Microsoft sooner or later.
In case of a publishing page SEO meta tag injection can be use to add a proper meta tag. For a javascript based solution to add the viewport meta check out the solution provided on OfficeDev Pattern & Practices.

If you have other concerns, feel free to comment on this blog post.


Pure CSS Burger Menu

It is summer here in Vienna and nothing tastes better than a home made burger in the evening. The recipe for a burger is pretty simple. Put some self made patty on the grill. Wait a couple of minutes take the meat from the grill and assemble it all together with some additional component, such as cheese, onions and different kind of sauces, in a burger bun.

Jucy Lucies

To build a burger menu in SharePoint is that simple too, and far beyond rocket science. Again, no master page editing is needed to create such menu. To make sure it works on the premises as well as in Office 365.

[Read more]


Apply grid system to SharePoint using SUSY

As promised in my blog post “What is inside your SharePoint CSS” I like to show how it is possible to add a grid system to SharePoint without using Bootstrap or edit the master page.

Grid systems for web sites were popular long before Ethan Mascotte wrote his famous article about “Responsive Web Design” back in 2010. The first grid system I ever used was the It was released in 2008.

[Read more]


How to use CSS and JavaScript files from Yeoman directly in SharePoint

In the first blog post I explained how to set up your Yeoman development environment. You have now a local web server and you can start your web development. Now lets take a closer look how you can integrate the files on this web serve directly into SharePoint on-premises and Office 365.
Open your project and start the web serve with the command ‘grunt serve’.

[Read more]


Office 365 Icon font documentation

I’m not quite sure when it happened. During the last twosome of months, Microsoft provides some icon fonts in Office 365.Especially the newly introduced app launcher makes use of icons of this typeface.The content varies from icons, such as the Hamburger menu, arrows, general, UI elements, as considerably as all Microsoft Applications. The files of this font are hosted on the Microsoft CDN so they are ready to use to spice up Apps.

Office 365 Glyphs - Preview

Office 365 Glyphs – Preview

Why to use icon fonts?

Icon fonts provide a couple of benefits. Fonts are scaled better than any image across different screen resolutions and even looks great on high density displays without any loss of quality.
There is another advantage to use this font. By using the same icons as in Office 365 you will be able to provide a consistent user experience.
Microsoft created a while ago some UX Guidelines for Apps in SharePoint, but you won’t find any information on the icons.

How to get access to the icon font of Office 365?

As mentioned earlier CDN is the key. Microsoft provides some centralized assets there. There is only one problem the use of a CDN is mostly undocumented. One general documentation can be found on the MS Technet.
There are several CDN endpoints and in case of SharePoint only one url exist in Office 365 for a long time. This URL is // This url can be accessed via http (port 80) and http’s (port 443).
To make use of the icon font the following code needs to be used in your courses.

You might recognise the path in there that points to “_layout/15 “ which is the current version of SharePoint. The path before the layouts fairly undocumented and might change over time. I try to maintain those urls in future until there is an official documentation available.

Content of the icon font

The font-face definition can be added to the custom style sheet of your app. Again the content of this font is undocumented as well.
This was the reason why I set up a small interactive documentation that use the CDN urls and shows all relevant icons. So you don’t have to search all the 65536 glyphs (or characters).
The guide be found on my newly created lab site under the url
A page that I’m looking forward to maintain in the future and add some additional information and things there.
Following the principles of “Ship or die”. The mobile support is currently beta too. I’m looking forward to provide a superb user experience.
If you have any comment, suggestion how to improve. Please feel free to comment. I will be lucky to hear from you.


2015 – A look back and a new beginning

Looking back to the old year I must say it was the most challenging year in my life so far. There were great times and there were bad times. Before I can provide an outlook for the new year. Let’s take a look back at some of the most enjoyable moments.

2014 – Conferences, People and Blog Posts

Two times Stockholm and Sweden, first time in New York, back to Las Vegas, summer in Barcelona. This was actually one travels I did in the old years and I enjoyed every trip. I met a lot of great new and well known people on those trips.

Sunrise in New York

Sunrise in New York

The only thing I am really sorry about that I couldn’t come to the war room of SP24. Instead, I was awake for 24 hours and supported the team from a remote. I am really proud I was part of the team that make this all possible. I especially like to thank Mark Jones for inviting me to be part of the team, my other team mates, the speakers and anchors and all the people that watch those great sessions.

Sadly, I haven’t had that much time and mood to blog much in 2015. Here are some of my favorite blog posts of the last year:

2015 – A new beginning

The second half of 2014 was quite challenging for me and I recapped what I’ve accomplished so far and where I want to go. By the end of 2014 I quitted my job to work on my own and start my own business.

I will still continue to do a lot of stuff in 2015 based on SharePoint, Office 365 and Azure. On those platforms I will focus more than ever before on user experience and design, as well as web development. Another thing that i’m really interested in is to bridge the gap between the physical and the virtual worlds.

I also struggled with my effort for the community and thought about stop blogging.

Finally, what I found out after all those considerations, I won’t stop blogging and will invest effort in the global community of SharePoint and Office 365. The reason for that is simple. I really like being and stay connected with all my people and friends I found over the last years. You are all great out there.

Traveling and Speaking

To stay in touch with all of you I will be traveling this year again to some conferences. The dates that are currently fixed are:

  • Saturday, February 14, 2015 – [SharePoint Saturday Stockholm](
  • 9-12 November 2015, [European SharePoint Conference](

There is a another great conference this year that I would love to visit. The Microsoft Ignite Conference that will be held in Chicago from 4th to 8th of May. Chicago in May should be wonderful at this time of year.

Last year my effort to get a speaking engagement haven’t worked that well. I hope this year will work better for me because I love speaking about things that are important for me and might help others.

Thank you Microsoft

Well, it is hard to start your own business if you haven’t the right partner to start with. To get started, I joined a really great program by Microsoft.
This program is called BizSpark and provides all the tools I need. Office 365 E3, Azure and last but not least an MSDN Visual Studio Ultimate Edition.


In exchange I’m looking forward to provide some new applications.

That’s all for now

Hope to meet some of the readers of my blog post on some events around the world. I currently feel that 2015 will become a great year. See you all! Online and Offline.


Bind JSLink overrides to certain web parts only

JSLink can only be registered on certain list templates. This works well as long as only one web part on a page will be shown. If you added multiple list views of the same list template the template override will affect all web parts and not only the one that has the JSLink File attached to. To avoid this behavior the template override needs to be able somehow to conditional format the output.

[Read more]