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.
Recently I added the code of my blog post on “How to deploy binary files from SharePoint hosted App” to the Office 365 Pattern and Practices repository. During the monthly community call I was able to present my part of these additions.
I case you missed the monthly call you will find the screen recording on Channel 9.
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’.
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
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.
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.
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.
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.
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
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:
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.
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:
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.
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.
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.
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.
This is not a tutorial how to customize the master page in Office 365. Microsoft doesn’t recommend to create your own master page because they will constantly evolve the user interface and this might break your branding.
The reason I created this case study is to show that it is yet possible to use the same master page in Office 365 and on-premises. This master page also takes into account that the Ribbon and Suite Bar are completely different in both environments.
Another important thing is to show how the master page might evolve in future so that it provides two things. Enables Microsoft to implement and add new features and allows custom branding as we currently do it on-premises.
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.
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
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.
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.
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.
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:
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.
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.
Typography First – Make your SharePoint content readable and compelling