It seems like the default media player is not the right tool for responsive design scenarios. This player might could be replaced with a custom one, but this custom one might might not integrate perfectly into SharePoint.
Let’s take a look how the behavior of the built-in media player can be improved to meet responsive requirements.
The media player web part
The player is a current state of the art media and video player. It renders an HTML5 video tag and provide a fallback video playback through Microsoft Silverlight.
Thought the embedding of a video on a SharePoint page the player will be automatically set to match the format of the video file.
In general this is good, but in the case of making a video response and scale across different screen resolutions this is a problem. The applied inline style avoids the proper scaling of the player. A behavior you don’t like to have on a responsive design.
Why not make the video responsive?
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.
A couple of weeks I was contacted via twitter about my blog post that shows how to bind JSLink override to certain web parts only. Jared Matfess (@jaredmatfess) tried my script and recognized that somehow the paging of the web part was broken. I dug deeper into this issue and found the cause of the problem. It seemed that the way how I showed the View ID was the origin.
In this blog post I try to cover all the aspects around field values used in JSLink overrides. I recognised while working on the blog post “Bind JSLink overrides to certain web parts only” that some fields serve more information than just only the display value.
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
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.
src: url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.eot?#iefix") format("embedded-opentype"),
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.
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.
When you migrate SharePoint 2010 to SharePoint 2013 or to Office 365 some of the views that was created in the previous version might look the same.
The user will get a mixed user experience because document libraries, switch between the old view styles to views that are configured for client side rendering. Via scripts those views can be recreate, but they also can be upgraded in-place.
To hide the tool part of a web part is pretty easy. You just need to edit the settings and set them to “No Toolbar” and you are done.
Today I needed to do this programmatically. After I debugged the list view web part an haven’t found a setting for this I took a look into the “clienttemplates.js”, which is mostly responsible to render the views correctly and voila I found a solution how to hide the toolbar.
Recently I have tried to use more and more SVG in web projects, because they are more flexible to use in responsive web projects. The most common file formats that are used in SharePoint as a site logo are GIF, JPEG or PNG. I wondered if Sharepoint SVG supports as a site logo, I tried it out and it worked charmingly.
By using SVG you get a great new opportunity to use in SharePoint projects without modifying the master page.[Read more]