Article
7 comments

Responsive List Forms – Don’t panic it’s just a table

When it comes to responsive web design and tables some people might get a panic. In general there is nothing bad about tables. Just treat them right.

This time I like to show how to make list forms responsive. Actually, this sound harder than it really is just because the form is rendered in a table. A table is as good and flexible as any other HTML element and can be transformed into any other form.

DON'T PANIC

 

[Read more]

Article
0 comment

Responsive video – Enhance SharePoint default player

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?

[Read more]

Article
7 comments

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
2 comments

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
2 comments

Enhance suite bar for your responsive experience

Over the last year I did more branding projects on Office 365 than on on-premise. Since the first call by Microsoft to avoid modifications of the master page I played around with certain scenarios and patterns to reduce or avoid such modifications.
One common issue is that the suite bar is responsive (everything that resize is responsive) but not well optimized for mobile. Without any enhancements this part of SharePoint shows only half of the content. With some small CSS only modifications the suite bar looks great on nearly any device.
The following blog post use SASS pre-processed CSS the compiled CSS can be found too at the end of this post.

[Read more]

Article
7 comments

How to add viewport meta without editing the master page

If you like to create a responsive user experience it is common practice to add a <meta name=”viewport”> tag to the html. This tag contains instructions to the browser in the matter of viewpoints and zooming and make sure that your web design is scaled properly according to your style definitions. Without this tag SharePoint on an iPhone will look as seen on the screenshot below. Currently SharePoint doesn’t support it by default.

[Read more]