Article
0 comment

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.

Article
17 comments

Fixed width design in SharePoint 2013 – The fast way

I already provided a way to define a fixed width master page for SharePoint 2010. You might think that fixed width is not required because of all the fancy responsive web design. Mastering a fixed width design in SharePoint allow you to master responsive web design too. This is commonly known as progressive enhancements. By creating a fixed width master page first it can be easily adopted to responsive design too.

The modification are based on the seattle.html and if you haven’t done much with SharePoint Designer or master pages in 2013 I recommend you to read Master pages, the Master Page Gallery, and page layouts in SharePoint 2013 first. First I made a copy of the seattle.html because I wanted to provide the default look but add a fixed width. I also wanted to support the focus on content functionality that exists in SharePoint 2013.

Modifications in the Master Page

In SharePoint 2010 a JavaScript add the width of the current browser window to the s4-workpace element. This behavior hasn’t changed in SharePoint 2013. The good news is that applying the „s4-nosetwidth“ to the “s4-workspace” div avoids the JavaScript handler from being fired.

Before:

After:

Depending on the template that will be used in another issue arises. In my case there was a problem with the float containers of an Enterprise Wiki Template. The problem with those containers is that if they haven’t been implemented properly the surrounding div will collapse and reduce its size. In worst case to height will collapse to 0px. This can be avoided by using the so-called “clearfix”. I recommend you to read all about float on CSS Tricks to get more details about this behavior.

Fixed width master page without clear fix

Fixed width master page without clear fix

So to get the fix applied I decided to use the div-clearfix method. It doesn’t hurt much and also has not much impact on the over html source. The position where I placed my div can be found at the vary end of the “s4-contentrow” right before the closing div.

 

Master page is done. Now we are ready to do some CSS magic. Don’t close the master page yet. We still got something to do.

Adding Style Sheet

First we need to add a style sheet to SharePoint. The most pleasant way to do this is by adding the server control named CssRegistration. First look for the CacheManifestLink element and place the CssRegistration below.

 

In my case the CSS File is called “fixedwidth.css” and is stored in the Style Library.

I hope that the comments in the style sheets are descriptive enough for you. Otherwise please post a comment with your questions. In the end the result should look like this.

Final fixed width master page

Final fixed width master page

You will also find he download link at he end of this article.

Finally let’s take a closer look at the em, rem and pixel values.

em, rem instead of px

Using pixel in style sheets is something from the past. You still can use it but to be more flexible it’s recommended to use relative units like em, rem or percent.

Assume you have set the font size of a div element in your design to be 12px and like to have a total width of 60px for this element. Then you can simply assign a width of 5em.

12px * 5em = 60px

If you increase the font size of that element the width will scale in proportion. Setting the font size to 14px then the width of the element will be 70px.

14px * 5em = 70px

The downside of this is that you need to know every font size of every element to assign the proper value. The good news is there is the rem unit.

Instead of referring to the current element the rem, also called root em, refers to the font size of the body, which is a static value. The default value of the body is 16px. Now if you like to get a total width of 60px all you need to do is to divide the width with the font size.

60px / 16px = 3.75rem

That is the whole concept explained in short.

Worried about the browser that understands root em? Internet Explorer 8 doesn’t understand this value but you can define a simple fallback for that. This looks for the s4-bodycontainer like this:

To get a detailed overview of browser that support rem you can browse caniuse.com.

Download fixed width master page FixedWidthMasterPage.zip