Mobile Enabling a SharePoint site


So how easy is it to mobile enable a SharePoint 2013 site that has been built without any mobile capability? The favorite answer, as usual, it depends.
In my case we had to bring a mobile capability in a site developed SharePoint 2013 Foundation. The site had initially been developed by a awesome set of folks who followed MS best practices and made use of more of client side code than server side. All fine, however this added on to the complexity.

Since we did not have many pages – it was more of a intranet portal than a team site, our approach was to take the SharePoint bootstrap solution from codeplex, deploy it and move all the components to the bootstrap masterpages and page layouts. Easier said than done. Due to all the client side effects and rendering in the existing code, we had a lot of clashes with the bootstrap solution and had to write quite a bit of CSS to get around them.

Once we got all of those sorted out, we realized that on testing with real devices, the sheer number of CSS and JS files hampered performance, especially during initial load. Some optimization was achieved by moving the references around and also merging some of the files, however it still was not very usable. So more snips, removing all elements that were not required, going into details that were trivial in a desktop and also using CDNs for the boostrap, and jquery files rather than loading it from the server were looked into and at the end we got something that is usable, but still not fully perfect. Making it really perfect would mean redesigning the UI of the desktop site as well and that would get into other issues and hence it was dropped for now.

So lesson learnt, always plan for mobile rendering when building a web site even though it is not an immediate need. Would save a lot of headaches for the developer later on :).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: