Article
18. November 2015
0 comment
by Stefan Bauer

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.

Article
7. November 2015
0 comment
by Stefan Bauer

Update on the Office 356 icon font and SharePoint 2016

Office 365 Icon Font

Microsoft has recently “removed” or at least don’t maintain the Office 365 icon font on their CDN. The location of the icon font has recently fundamentally changed.

 

A possible reasons

The font is still available on CDN but shouldn’t be used anymore form my point of view. The problem is that the url to the font files always had a version number included.
With every upgrade of Office365 this address has changed and your custom code have to be adapted too.

@font-face {
    font-family: "SPO365Icons";
    src: url("http://cdn.sharepointonline.com/15325/_layouts/15/fonts/Office365Icons.eot");
    src: url("http://cdn.sharepointonline.com/15325/_layouts/15/fonts/Office365Icons.eot?#iefix") format("embedded-opentype"), 
         url("http://cdn.sharepointonline.com/15325/_layouts/15/fonts/Office365Icons.woff") format("woff"), 
         url("http://cdn.sharepointonline.com/15325/_layouts/15/fonts/Office365Icons.ttf") format("truetype"), 
         url("http://cdn.sharepointonline.com/15325/_layouts/15/fonts/Office365Icons.svg#web") format("svg");
    font-style: normal;
    font-weight: normal;
}

For my blog post “Office 365 Icon font documentation” and the demo installment on lab.n8d.at I had to adapt the urls form time to time.

Those changing urls hindered the use in custom implementations. The latest version is still available through the CDN link.

The new font location is _layouts

To be honest to change a CDN url from time to time was not really an optimal solution. So for lab.n8d.at I had to change the url at least five times. Nearly every month.
Recently I was a little bit nervous be cause the CDN was now static for at least two month.

Just to be sure, I checked the current location of the fonts files today and recognized that this has fundamentally changed on Office 365.
Now all fonts are located in the folder “_layouts/fonts”. This is new in SharePoint and Office 365. Fair enough to check if this folder is also available in the current SharePoint 2016 version and yes it can be found there as well.

Office 365 icon font location on SharePoint 2016

Office 365 icon font location on SharePoint 2016

Beside there are also some other fonts stored there that I will investigate soon.

Final thought

I really like the fact that SharePoint on Office 365 and SharePoint 2016 will now use the same basis again. While Office 365 in the past has improved much quicker on-premises SharePoint were always a year behind.
Hopefully we will see further improvements on both platforms at the same time. Through all the hybrid scenarios, it has to be this way.
I know to have the same fonts on Office 365 and Sharepoint is just a small improvement but it makes development of custom web parts (jslink, add-in part and angularjs) easier. You can develop them once and use the same the in the same way in both worlds. It currently serves most icons you need and you are able to provide a consistent design across SharePoint.

Article
10. August 2015
7 comments
by Stefan Bauer

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]

Article
15. July 2015
2 comments
by Stefan Bauer

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 960.gs. It was released in 2008.

[Read more]

Article
1. February 2015
14 comments
by Stefan Bauer

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 //cdn.sharepointonline.com. 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.

@font-face {
    font-family: "SPO365Icons";
    src: url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.eot");
    src: url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.eot?#iefix") format("embedded-opentype"), 
         url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.woff") format("woff"), 
         url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.ttf") format("truetype"), 
         url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.svg#web") format("svg");
    font-style: normal;
    font-weight: normal;
}

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 lab.n8d.at.
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.

Article
30. November 2014
by Stefan Bauer

How to use: Table of Content – jQuery Plugin

After I’ve published the revised version of my table of contents script I got many request on “How to use” it. You asked for it and here it is the guide how to embed the script. I won’t provide a full featured step by step guide here. Instead, I will provide a small package of a page layout and a guide how to script embed directly. To make this work you need to have an Enterprise Wiki or Publishing page. The first part covers how to add a page layout containing the table of contents script. The second method shows how to add the script using code embedding. You also need to download the following file TableOfContents-PageLayoutPack that contains all the required files.

[Read more]

Article
15. September 2014
by Stefan Bauer

Revised: Table of Contents for SharePoint Wiki Pages

It’s more then two years ago when I first wrote a table of contents script to enhance wiki pages in SharePoint. Time to release a new version and this time it’s a jQuery plugin. This new version will work potentially work with all versions of SharePoint and Office 365. I just have tested it in SharePoint 2013 and Office 365.
Now I also included support to for all levels of headlines (<h1> – <h6>).
This is possible because a found a good old part in the jQuery Documentation

Table Of Contents - Live in Action

Table Of Contents – Live in Action

[Read more]

Article
29. May 2014
0 comment
by Stefan Bauer

The future of SharePoint Branding

You cannot take a look in the future if you don’t know about your past. I started branding SharePoint in 2004. At that time I already had some years experience on developing web sites and application. Now we have 2014 and the SharePoint branding haven’t changed a lot. We still try to figure out how Microsoft built up the master pages and how we can bring them into a new form.

In SharePoint 2013 a great step forward has been made by Microsoft to improve the underlying style sheets and HTML. Tools like Twitter’s Bootstrap or Foundations and a couple of other frameworks have approach to bring responsive web design to SharePoint. Needless to say with all the benefits and downsides.

Global Experience Language by BBC

Global Experience Language by BBC

In the future we will see more and more applications (okay, okay apps) that will be integrated into our SharePoint.

Sooner or later our SharePoint will look like a patchwork of different designs. Will the future be of not branding SharePoint and use it as it is? I don’t think so we just need to find a smart way to adapt SharePoint to our visual needs and sometimes improved user experience for custom development inside the boundaries of the platform. Last but not least, how can we implement methods that helps us to adapt faster to future releases without recreating the branding from scratch as we did in the last versions.

CSS, FrameWorks, Themes

Currently, some branding like to do it the old fashioned way, just using the HTML and CSS to build up the user experience. Others prefer to use a framework and some might like to use the theming engine of SharePoint to change the look and feel.

There is no right or wrong with all these approaches. Over the last months I always asked myself the same question over and over again.

What can we do to create a smarter, better documented and future prover system than we do it today. Especially with Office 365, apps, display templates and much more everything become fluid. What worked today can be could be changed tomorrow.

For me the challenges of the future are focusing on content that lives throughout the different devices (Content Strategy). The usability that users expect on different devices. Last but not least we will see more and more different interfaces, there that access our content. May it be directly inside of an Office Application, a refrigerator, in our car or use a Xbox to manage a project.

We need to step one step back to see the bigger picture.

Design with a system

Wouldn’t it be great to have one central design system that handles all the different display forms without rewriting the code from scratch. Provide the same look and feel even user experience in SharePoint to Apps and even Office Apps. I think the key to success can be found in two concepts that are state of the art in web design today.

Design Systems

A lot of great information on design systems can be found on the web. The Laura Kalbag such system as:

“A visual design system is built out of the core components of typography, layout, shape or form, and colour.”

Another great explanation can be found in the article “Design Systems: Building for the Future”. Especially because he explains why design systems are more future proven than to use a framework in the context of a CMS.

The most inspiring article on this topic I found in a blog post called “Atomic Design” by Brad Frost. In his article he explained how to form a well structured and categorised design system for the future. He further explain how we can set up the core components (Atoms) that will be used to formulate larger components (from Molecules to Organism) that up into templates and pages. A functional demo of be found at patternlab.io

To me setting up such system has the following three benefits:

  • Better documentation of what we didIf no design system has been set in place prior the concrete implementation it will be hard to find the components that have been implemented. The consequence of this is that we might end up with code that does similar stuff, but with different classes attached.
  • MaintainabilityMost of the core components in HTML haven’t changed over decades, we just got some new. We can combine those in many different ways. The better we structure those the more maintainable the final branding will and easier to change in the future.
  • TestablityIf we know how our components look and behave in different view ports, we better understand how they function and work in the overall design. Testing smaller components is much easier to accomplish.

DRY – Don’t repeat yourself

SASS and LESS are great CSS preprocessors that allow us to write much cleaner code. Hence we can build our rich text editor styles by changing and assigning some variables instead of writing those style definitions from scratch. I know this is just a simple example, but the benefit of these technologies is that is also removes some complexity and gives us tools that are much easier to use.

Another benefit is that especially SASS allows to compile different CSS files based on the same code. For example, you create one in the context of SharePoint and one for a SharePoint Apps.

If you cannot wait for my next blog post. I can only recommend to read the blog post about DRY-ing Out Your Sass Mixins.

Finally and whats next

Those theories sound nice I know but how can we get started. I tried some things out over the last weeks and I will publish my findings over the next weeks. So stay tuned.

If I’m not completely wrong some people struggle with the implement a corporate wide branding. Though the changes in the app model we are not in the “SharePoint Exclusive Club” anymore. Sooner or later we need to move forward and take a closer look what other web developer do and what they are struggling with.

As Jeremy Thake said at the SharePoint Conference in Barcelona there are many of web developer out there that will be sooner or later able to build up Office Apps and SharePoint Apps.

If you like to follow my journey I would be pleased. Have comments on this, please feel free to comment. I hope at least for some it will be an interesting journey to the future of SharePoint Branding.

Other articles in this series

Typography First – Make your SharePoint content readable and compelling

Article
10. November 2013
0 comment
by Stefan Bauer

Responsive vs. Adaptive Web Design – What about Device Channels?

Three years after responsive web design was introduced by the “A list apart” – article – “Responsive Web Design” by Ethan Macotte. The reason why people love this is because it can be easily implemented. You just need to have a browser that supports CSS3 and HTML and you are ready to go. Is it really like this?

Currently web design is in a state that we code against the gray. We don’t know the devices that might access our web site.  A resolution of a screen doesn’t give any information about the device.

This is the main problem from my point of view. We care too much about device resolution but neither the user nor the context the device is being used. Using a tablet – the user might want to have the same user experience as reading a book or magazine. Using a phone – the user might in a hurry and just want to get a brief introduction to read on a tablet or desktop later on.

In the following presentation I try to sum up Responsive and Adaptive Web Design and what SharePoint 2013 has to offer to connect the users, their context and the content.

The truth is that the consumer of your content doesn’t care if something is done on the server or on their client as long as they feel comfortable with the content and their context.

I held this presentation during ShareCamp Vienna (7.9.2013). Special thanks to organize this event: Thorsten Hans, Christian Glessner, Martina Grom, Toni Pohl, Hans Bender and everyone else who was involved in the organization of this event.

Finally I want to thank Brad Frost for the ongoing inspiration and lending me some slides.

Additional feedback on this presentation can be found on SPYam.
Feedback is always welcome.