Mobility: Development Strategies in SharePoint 2013

Amol AjgaonkarSr. Technical Architect

• Working in SharePoint since 2003• WCM / ECM • Focus: Custom Development / Tech.

Design

Introduction

Objective

• Why Mobile Friendly• Options in SharePoint 2010• SharePoint 2013 Features• Limitations• Enhancements

Mobility

68 percent of smartphone users who use the Internet every day

25percent of smartphone users who use the Internet exclusively on their smartphone

4.6

percent of all Internet traffic that originates from smartphones

One in four Americans own a smartphone, a number that grew by 60% in 2011.

Source: 2011 Pew Internet Study

Mobility

SharePoint 2010

• Device ChannelsTarget different devices through user agents

• Master PagesAssign master pages to device channels

• Mobile Panels in Page LayoutsTarget content to device channels

• Image Renditions• Display Templates

Create content templates.

SharePoint 2013 Features

Image Renditions

Display Templates

• HTML Snippets with JavaScript

List Control Template(<ul>,<div,> etc.)

Group Control Template

Item Template (E.g. <li>, <div>…)

Demo

• Device Channels• Image Renditions• Display Templates• Content Authoring (Catalogs)• Master Page Assignment

Limitations / Issues

• Maintain user agent strings in Device Channels.

• No web part zones in Mobile Panels.• Authoring experience could be better.• OOTB web parts cannot target device

channels.

Demo

• OOTB Content Authoring• Mobile Channel Panel with WP zones• Mobile Channel Panel w/o WP zones• Cannot target OOTB web parts to

channels

• Custom Mobile Panel• Allow web part zones in Mobile

Panels• Better authoring experience• Tabbed content authoring.

• OOTB web parts targeting device channels.

Enhancements

Demo

• Custom Mobile Channel Panel• Target OOTB Web Parts to Channels• Authoring experience using Tabs• jQuery and twitter bootstrap

framework

Design considerations

• Responsive Design• Device Channels

Responsive Design

Device Channels

Hybrid Approach

• Define device channels.• Create master pages for different

channels.• Frameworks• jQuery mobile• Twitter Bootstrap

• Create display templates • Enhancements to overcome limitations.• Define images renditions• TEST, TEST, TEST

Process

Responsive Design + Device Channels = Better experience.

Questions

• Twitter: @SharePointLife

• Blog: http://bit.ly/sharepointblog

• Profile: www.amolajgaonkar.com /http://bit.ly/spamol

• Email: amol.ajgaonkar@perficient.com

Thank You