1. Rich vs. Reach: Understanding Your SharePoint Mobility Options
July 25, 2012

2. rightpoint At-A-Glance

3. Mobile + SharePoint
Session Objectives
• Apply the Rich / Reach spectrum to your mobile
initiatives
• Understand the approaches for taking SharePoint
mobile
• Identify the platforms for apps and how to integrate
these platforms with SharePoint

4. Mobile + SharePoint
Mobile + SharePoint Timeline
June, 2007 February, 2008 February, 2011
November, 2010
Original Apple opens Apple App Store
Windows Phone
iPhone App Store, passes 10 billion
Released
Available App SDK • SharePoint/Office
app downloads,
Mobile Events Hub HTML5 Working
November, 2006 SharePoint Draft published
2007 in 3 June, 2009 by W3C
Gartner
Released Magic
• /m Mobile Sites
• Mobile Views
Quadrants
• Search
• Portals Released
• Enterprise • V4 UI, Fluent Ribbon
Content • jQuery Support
Management • Client Side Object Model
SharePoint Events

5. Mobile + SharePoint
Mobile + SharePoint Strategy

6. Mobile + SharePoint
The Rich / Reach Spectrum
Reach Rich
Broadest Focused
Audience Experience
The Goal The Goal
Your app or site reaches the broadest Your app or site provides an immersive
audience of users, regardless of experience that takes full advantage of the
device, platform, or form factor capabilities of the user’s device
Benefit: Lower total cost of Benefit: Enables a full range of usage
maintenance, flexible to support new devices / scenarios, can deliver a better UX
platforms
Downside: Requires decisions about devices to
Downside: Lowest common denominator build for and support, potentially results in
approach, Higher testing cycle time multiple codebases if multiple platforms are
required

7. Mobile + SharePoint
Mobile+SharePoint Choices
Reach Rich
Broadest Focused
Audience Experience
Extend to Build Sites for Third Party Build Apps for
Mobile Mobile App Options Mobile

8. Mobile + SharePoint
Architecture Option #1: Extend to Mobile
Reach Rich
Broadest Focused
Audience Experience
Goal Tactics and Tools
Make existing SharePoint Conditional CSS with User Agent detection or @Media CSS3 class targeting
Websites more mobile- in Custom Master Page
friendly jQuery Mobile and ASP.NET Mobile Framework
Strategy
Either make existing pages Limitations
mobile-friendly or create Application pages must align with full-browser pages and only show an
pages in your sites to alternate rendering
enhance the experience SharePoint’s default pages are very command-dense and information-
dense, so presenting a compelling and complete mobile UX is difficult

9. Mobile + SharePoint
Rightpoint SharePoint ™ Mobile UI Framework

10. Mobile + SharePoint
New Balance iNB Mobile: HTML5 publishing site with
conditional CSS and mobile user agent detection

11. Mobile + SharePoint
General Mills Brands-On-The-Go: Tablet-Friendly SharePoint Mobile Web UI
through Custom Master Page loading CSS based on User Agent
ERP

12. Mobile + SharePoint
Architecture Option #1: Extend to Mobile – How To Do It
Technique #1: Mobile-Friendly Custom Master Page
1. Ensure that non-mobile pages are shown for mobile devices:
• Add following code to web.config (i.e. via a feature)
<browserCaps>
<result
type="System.Web.Mobile.MobileCapabilities, System.Web.Mobile, Version=2.0.0.0
, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"/>
<filter>isMobileDevice=false</filter>
</browserCaps>
or edit ASP.NET *.browser files on web servers
2. Start with Starter Master Pages for SharePoint:
http://startermasterpages.codeplex.com/
3. Target specific styles to mobile browsers by either:
• Use CSS3 @media queries in supplemental CSS to target browser experience based on
viewport, etc., see http://caniuse.com/#feat=css-mediaqueries for specific mobile browser support, or
• Load CSS conditionally based on user agent

13. Mobile + SharePoint
Architecture Option #1: Extend to Mobile – How To Do It
Technique #2: Add alternate pages with jQuery Mobile functionality
1. Check out jQuery Mobile: http://jquerymobile.com
2. Check out ASP.NET Mobile Framework: http://amf.codeplex.com
3. Use ASP.NET Mobile Framework, and SharePoint server API to create custom web parts to render content
from sites, lists/libraries, and list items.
4. The functionality behind the screenshots from the previous slide are used as a basis for Rightpoint to make
future specific customizations on a web part / page as needed.
5. This is a good approach if you can redirect a mobile user on a site to specific mobile pages that give you more
control than the SharePoint OOTB mobile experience.

14. Mobile + SharePoint
Architecture Option #2: Build Sites for Mobile
Reach Rich
Broadest Focused
Audience Experience
Goal Tactics and Tools
Create ASP.NET (MVC) Mobile ASP.NET MVC or WebForms
Website UI, leverage existing SharePoint Client Object Model (CSOM)
functionality and data using CSOM jQuery Mobile or other mobile JS frameworks
and façade services
Strategy Limitations
Build a new site and leverage Different devices need to be tested
services/data from existing site. Security groups may need to be involved to ratify architecture
Makes sense when existing pages
don’t align to the needs of a mobile
experience and you still need to
support a variety of mobile devices

15. Mobile + SharePoint
Architecture Option #2 Topology
Mobile Website
Internal
SharePoint
Environment

16. Mobile + SharePoint
Jones Lang LaSalle - OneView Projects

17. Mobile + SharePoint
Architecture Option #2: Build Sites for Mobile – How To Do It
Best Practices / Tips: Flow Authentication Credentials through to SharePoint
1. User authentication should be done via forms authentication, and subsequent service invocations to
SharePoint should use those credentials
1. Based on your SharePoint implementation, consider SSO and SAML options to minimize having to re-
authenticate with each service request
2. Obviously, the ASP.NET website should be only hosted in HTTPS/SSL
3. Or, if you are heavily using the CSOM, consider configuring the site and SharePoint for Kerberos and
the ClientContext should flow the credentials from the client browser through to the service
invocation. This is a bit tricky to set up, so budget for some time.
2. If you are not familiar, become familiar with the Client Side Object Model: http://msdn.microsoft.com/en-
us/library/ff798388.aspx
3. If CSOM isn’t meeting your needs, consider developing a service and deploying on SharePoint as a feature, and
invoking that service.

18. Mobile + SharePoint
Architecture Option #3: Buy Apps/Sites for Mobile
Reach Rich
Broadest Focused
Audience Experience
Goal Tactics and Tools
Provide functionality to mobile users Harmon.ie, Colligo, SharePlus, MobileEntree
that is met by existing third party
products, i.e. harmon.ie. This
functionality typically aligns with a Limitations
subset of SharePoint OOTB Some product assume that your SharePoint environment is
functionality for traversing and already exposed to the internet. That may not be the case. In all
working with sites, lists, and libraries. cases, check carefully to ensure that the product’s features match
your needs.
Strategy
Determine your needed capabilities
and cross-reference with existing
apps.

19. Mobile + SharePoint
Architecture Option #3: Buy Apps/Sites for Mobile
• Product features typically align
with document
library, workflow, and search
capabilities
• Different apps are supported on
different devices, but typically
most new devices are
supported, with a focus on iOS
devices.
• e.g. A search for SharePoint in the
Apple App Store yields 97 results

20. Mobile + SharePoint
Architecture Option #4: Build Apps for Mobile
Reach Rich
Broadest Focused
Audience Experience
Goal Tactics and Tools
Create an app; an app is focused PhoneGap (http://phonegap.com)
on a specific set of tasks that MonoTouch, Mono for Android (C#/Mono for iOS or Android –
take advantage of the device http://xamarin.com/monotouch or
http://xamarin.com/monoforandroid)
Strategy iOS: xCode, Apple Developer/Enterprise License
Target the device: iOS
Windows Phone: Visual Studio/MSDN
(iPad/iPhone), Windows
Phone/Windows 8, Android, etc. Limitations
Determine your app development PhoneGap doesn’t provide a full set of app capabilities, and
stack based on your platform developing native ties you to a platform; know your features and
choose carefully

21. Mobile + SharePoint
Architecture Option #4 Topology
Mobile Website – WCF services, etc.
Internal
SharePoint
Environment

22. Mobile + SharePoint
Groundwork – Property Appraisals iPhone App

23. Mobile + SharePoint
Architecture Option #3: Build Apps for Mobile – How To Do It
Best Practices / Tips:
1. A portal website and an app are not the same thing. Build your apps for specific purposes:
1. Employee Directory
2. Insight/Action into a specific workflow (Approve/Reject from mobile device, potentially using Camera
or GPS)
3. Mobile-ready BI dashboard (i.e. to replace emailed reports, etc.)
4. Specific mobile rendering of main page content
Note: Each of these would be a separate app. Avoid putting too many features into an app
2. Plan upfront for scenarios in which the app should be updated
3. If the device is not maintained by your organization’s IT, strongly consider avoiding the storage of any company
data on the device, and always authenticate the user upon app startup
4. Consider a hybrid option of wrapping a mobile-friendly site in an app. For instance, the News Feed and many
other screens of the Facebook iOS app are really just showing web pages on a browser window inside the app.
For iOS apps, check out the UIWebView class.

24. Mobile + SharePoint
Apps / Sites Decision Tree
Assuming a buy App • Offline
vs. build decision
Specific • Camera
was made, and
Features • GPS
build was
• Unique UX
chosen… ?
Yes
Select App No
Platform / Extend Site
Device Can work Yes
in
existing
UI? No
Build App Build Site

25. Mobile + SharePoint
Key Takeaways
• Use the Rich / Reach Spectrum and the 4 target
topologies as a tool to elicit requirements to determine
target architecture
• Use the Apps / Sites Decision Tree to determine the
best fit option

26. thank you
mswigert@rightpoint.com
jwillinger@rightpoint.com
Internal use only Jeff Willinger 312.622.2300