Steps to format a SP2013 site differently depending on the device
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
looks like that 
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
2- only works with Mobile Brower View Feature disabled (otherwise it takes over)
3- finally (this one too me even longer to figure out!) only works if Wiki Page Home Page feature is disabled.
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
|
| 3) |
Create mobile master page
|
| 4) |
Create a new Channel for the mobile device (here you can see iPhone)
|
| 5) | Edit Site Master page settings  to assign the Channel to the mobile Master page  |
| 6) |
Optionally …. Create new Layout page, however in my case it showed an error in Design Manager:
To fix:
(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.
