Steps to format a SP2013 site differently depending on the device

Standard

 

This week I was doing some research on how to design to use the new Sharepoint 2013 “device channels” feature which allows designers to show a different MasterPage per device (link), as opposed to just enabling a unique mobile format for all devices.

How to make this

imagelooks like that image took me a good part of the day !

I found a bit of help in various places and will say that JussionSharepoint probably has the most comprehensive steps however he doesn’t discuss designing the Master Page and Layout Page in HTML which is now the recommended way in SP2013, Sonja’s Sharepoint2013 blog also has some valuable reading, but because my brain tends to think in a bullet list kind-of-way so here are my quisksteps on the subject.

[warning] I was going to describe all the steps to configure so that you can navigate your site with a mobile device. However while I was doing so I couldn’t figure out why it still didn’t work on the homepage of my 2013 environment. So here are the pre-requisite before attempting any design. [/warning]

Pre-requisites

1- only works with Publishing Feature enabled

image

2- only works with Mobile Brower View Feature disabled (otherwise it takes over)

image

3- finally (this one too me even longer to figure out!) only works if Wiki Page Home Page feature is disabled.

image

So now that we got that figured out, we can proceed to the customisations.

My 5 or 6 Steps

1) First of all you need to be able to access your Sharepoint site from an HTML editor (I used Notepad++) , so you need to map your computer to the Sharepoint site as a network drive.
2)

Open Site Designer

image

3)

Create mobile master page

imageimage
(use Design Manager to add snippets of code to your HTML file that you will open from your client HTML editor and save again)

4)

Create a new Channel for the mobile device (here you can see iPhone)

image image

5) Edit Site Master page settings
image
to assign the Channel to the mobile Master page
image
6)

Optionally …. Create new Layout page, however in my case it showed an error in Design Manager:

image

To fix:

  • click on the link shows you the error, it seems that Sharepoint is creating a blank Layout page with a few errors as a duplicate <head/>
  • Edit the HTML and correct it by deleting <head /> on Line 10
    image
  • and <title> to </head> on Line 26.
    image
  • Save the HTML and go back to Sharepoint, within a few second it would have converted succesfully
    image

(same as for Master Page use Design Manager to add snippets of code to your HTML file that you will open from your client HTML editor and save again)

I said Optionally for step 6, because there is not point creating a LayoutPage just for a certain device unless you are designing a site specific for a device OR you are going to create a page for each device.

Now open the site in Chrome or IE9 and you can change the user-agent so that it simulates you browsing from a mobile device. My preference at the moment is “User-agent Switcher for Chrome”.

Other tips to share

A few things I experienced that I would place in the “good to know” :

– rename the alternative MasterPage for a channel and it will break all channel (ie I renamed the masterpage for iPhone only, the home page errored when opening it using the defaut channel (IE or Chrome), until you edit the MasterPage settings and fix the missing MasterPage for that channel you renamed.

– after I edited the HTML of the Master page a few times, for no reason there was a large blank space that would be added between some DIV elements, even though they were not showing in the code. I had to remove the .master, it will get re-created form the .html within the same second but fixing the blank lines.

Conclusion

Now I have to say I am not impressed… Basically it would be great to build a LayoutPage for each device so that when you load the page one device A it will be LayoutPage A that opens. This way the webpart zone that have been defined horizontally for computer devices could be changed vertically for phone devices.

But that’s not the way it works, because each webpage uses a LayoutPage and that one is not dependant on the channel. The Master Page is the one that depends on the channel however MasterPage do not hold Webpart Zones but the Content Place Holder for the Layout Page.

Therefore there is still some good design work to do if you want to have a full any-devices-friendly sharepoint site.

In the meantime I will play more with the Mobile Browser View features that turns a site into mobile as it may just be the answer.

Of course it will not be adapted to all devices, and what would be nice is to use this feature “most of the time” and for a couple of page to create a layout that uses our special channel Master Page, but since both cannot co-exist it’s a no go for now.

Advertisements

Force Sharepoint to open full site when viewed from a mobile device

Standard

What sounded really cool when first launch may turn to be not so great in Sharepoint : opening a page with a mobile / smartphone.

By default Sharepoint 2010 detects that you are using a mobile device and will redirect your page to the mobile version of that same page (/_layouts/mobile/xxx.aspx or old /_layouts/m/xxx in 2007).

to force your site to open the full (desktop) version, follow this blog post and either edit one of the 3 settings or all did the trick for me: 

http://blogs.pointbridge.com/Blogs/broweleit_seth/Pages/Post.aspx?_ID=14#EntryTabs

Make a Sharepoint publishing site NOT convert to mobile format

Standard

It has been like months that I wanted to look at this common issue : when you open a Sharepoint publishing site from a mobile device, it recognises the device is mobile and forces to open the mobile version, but prompts fo ra login, not great for anonymous users !

thanks to Glyn Clough’s I now have an explanation of the why (cf. feature in his reverse engineering tests) and thanks to Randy Drisgill I manage to force mobile users to open the full desktop site, which looks much better on an iPhone anyway.