How many of your users will access your SharePoint site on a mobile device? Hint: more than you think. Will your SharePoint site handle it well? Configuring SharePoint 2010 for mobile devices had its issues, but now with SharePoint 2013, new options are available to us. In this session we will review how to enhance SharePoint 2013 and create a unified experience across modern internet devices. We will discuss in-depth the current trends and how to utilize them in your SharePoint 2013 projects. We will start with OOTB and progress to custom and hybrid options including creating a Responsive Design, amplified by Device Channels.
2. Introduction – Eric Overfield
Founder and SharePoint Branding/UI Lead, PixelMill
Speaker, Teacher, Advocate
Author, SharePoint Community Organizer
Located in Davis, CA
ericoverfield.com
@EricOverfield
Order Your Copy
http://pxml.ly/zsqykd
Co-author: “Pro SharePoint 2013 Branding and Responsive
Web Development” (Apress – June 12th, 2013)
Co-author: “Black Magic Solutions for
White Hat SharePoint” (August, 2013)
3. What You Will Learn
Why We Need a Mobile Strategy
SharePoint 2013 Mobile Features
Non-OOTB Solutions
A Look at Responsive Web Design
@EricOverfield - pixelmill.com
15. Out of the Box
Mobile Views
Device Channels
@EricOverfield - pixelmill.com
Push Notifications
Mobile Alerts
Mobile Apps
16. Classic View
Same as SharePoint 2010
Contemporary View
New to SharePoint 2013
Full Screen UI
Standard Site View
Mobile Views
@EricOverfield - pixelmill.com
18. Classic
Similar to SharePoint 2010
Designed for Collaboration Site Templates
Mobile Browser View Enabled By Default
Not for Publishing / Public Facing Sites
For Older Mobile Devices
Classic View
@EricOverfield - pixelmill.com
19. Contemporary
Contemporary View
New to SharePoint 2013
Also Designed for Collaboration Site Templates
Mobile Browser View Enabled By Default
Leverages HTML5
Optimized for Touch Screens
Includes a Link to Full Screen UI
Contemporary View
@EricOverfield - pixelmill.com
20. Full Screen UI
Your Default Site
Works with all Site Templates
Not Optimized for Touch
Contemporary ViewFull Screen UI View
@EricOverfield - pixelmill.com
Full Screen UI
21. Out of the Box
Mobile Views
Device Channels
@EricOverfield - pixelmill.com
22. Device Channels
New to SharePoint 2013
Interfaces tailored and maps to specific device(s)
Custom Master Pages per Channel
Custom DeviceChannelPanels
Change the order of content!
@EricOverfield - pixelmill.com
24. Device Channels – The Good
Tailored interfaces!
Good for Public Facing Sites
But…
Only works with Publishing Sites
Maintain multiple Master Pages and/or sites
New devices? Maintain that list too?
It’s a mixed bag
@EricOverfield - pixelmill.com
25. Let’s See a Comparison
Mobile View Collab Publish Touch Nav Customizable
Classic View Yes N/A No Links No
Contemporary View Yes N/A Yes
Nav
Window
No
Full Screen UI Yes Yes No*
Same as
Desktop
No*
Device Channels N/A Yes Yes Up to You Yes
Let’s See a Comparison
@EricOverfield - pixelmill.com
26. Out of the Box
Mobile Views
Device Channels
@EricOverfield - pixelmill.com
Push Notifications
27. Push Notifications
Push Events to a Mobile Device
Think Updating a Tile on a Windows Phone
Must activate the Push Notification Feature
Site Based
2000 Maximum Device Registrations
Required Visual Studio and Custom Code
Let’s See a ComparisonPush Notifications
@EricOverfield - pixelmill.com
28. Push NotificationsLet’s See a ComparisonPush Notifications – Example Please
@EricOverfield - pixelmill.com
http://msdn.microsoft.com/en-us/library/jj923094.aspx
29. Out of the Box
Mobile Views
Device Channels
@EricOverfield - pixelmill.com
Push Notifications
Mobile Alerts
30. Similar to Email Alerts
i.e. Notify of a List Modification Event
Uses SMS (Short Message Service)
Requires a Service Provider
Configured in Central Admin
You Must Create a Mobile Account
@EricOverfield - pixelmill.com
Push NotificationsLet’s See a ComparisonMobile Alerts
31. Out of the Box
Mobile Views
Device Channels
@EricOverfield - pixelmill.com
Push Notifications
Mobile Alerts
Mobile Apps
32. Windows Phone / iOS
Create status posts
Add comments
Read / “like” posts
Use followed documents
Push NotificationsLet’s See a ComparisonNewsfeed Mobile App
@EricOverfield - pixelmill.comhttp://www.tech-wales.co.uk/en-gb/office-365
33. Windows Phone, iPad, iPhone
Access in Inbox
Interact with Groups / Conversations
Push NotificationsLet’s See a ComparisonYammer Mobile App
@EricOverfield - pixelmill.comhttp://www.tech-wales.co.uk/en-gb/office-365
34. Surface, Windows Phone, iPad
Business Intelligence Center (viewing sites)
Excel services
PerformancePoint
* No Office 365 Support Yet
* Location aware list items
Push NotificationsLet’s See a ComparisonMobile BI Tools
@EricOverfield - pixelmill.com
35. Windows and Safari
Word, Excel and PowerPoint
Browser based
On prem or cloud
Push NotificationsLet’s See a ComparisonMicrosoft Office Web Apps
@EricOverfield - pixelmill.comhttp://www.tech-wales.co.uk/en-gb/office-365
36. Windows Phone 7.5 and 8, iPad, iPhone and Android
Add and access files, photos and videos
Share files and folders
Push NotificationsLet’s See a ComparisonOneDrive for Mobile
@EricOverfield - pixelmill.comhttp://blog.onedrive.com/one-place-for-all-your-work-files-introducing-onedrive-for-business/
37. Tailor a solution to a particular device
For Windows, have option of App store
Use REST API / CSOM for any device
May be very feature rich, you decide
Push NotificationsLet’s See a ComparisonCustom Mobile Apps and SharePoint
@EricOverfield - pixelmill.com
38. But With Mobile Apps…
@EricOverfield - pixelmill.com
Which devices will you target?
How will you handle new device updates?
Who will develop your app for you?
40. #2 trend for 2012 - .net Magazine
Coined by Ethan Marcotte in May 2010
Use fluid grids and flexible media to adapt
Uses CSS3 and JavaScript
All devices load same page, use CSS3 to adapt
Push NotificationsLet’s See a ComparisonResponsive Web Design
@EricOverfield - pixelmill.com
41. Fluid Grid – Flexible Media – CSS3 Media Queries
@EricOverfield - pixelmill.com
43. Push NotificationsLet’s See a ComparisonFlexible Media
@EricOverfield - pixelmill.com
Flexible Images
Flexible Video
Proportional Text
44. Push NotificationsLet’s See a ComparisonCSS3 Media Queries
@EricOverfield - pixelmill.com
Load a stylesheet in HTML:
<link rel=“stylesheet” type=“text/css” href=“css/styles.css”
media=“screen and (min-width: 768px)” />
Code Alert!
Media Queries in a Stylesheet
@media screen and (min-width: 768px) {
#banner {
display: block;
}
}
46. SharePoint and Responsive Design
Uses CSS3 (media queries) and maybe HTML5.
Generally only one Master Page for all devices.
Need to Turn Off Mobile View
Edit compat.browser or deactivate Mobile Browser View Feature
Wide lists and Site Settings pages are not mobile friendly
Primary issues are with RWD itself!
@EricOverfield - pixelmill.com
Push NotificationsLet’s See a ComparisonSharePoint and Responsive Design
47. Additional overhead
Does require CSS3
Bandwidth Concerns
Are mobile users and desktop users the same
User site requirements
SharePoint and Responsive DesignPush NotificationsLet’s See a ComparisonSharePoint and Responsive Design
@EricOverfield - pixelmill.com
48. Coding Responsive Design
Can be Difficult to Integrate a Fluid Grid
Many Existing Frameworks Exist
Not always easy to convert to SharePoint
Responsive SharePoint at CodePlex
Free, Open Source Responsive SharePoint Frameworks
SharePoint 2013 Ready
http://responsivesharepoint.codeplex.com
SharePoint and Responsive DesignPush NotificationsLet’s See a ComparisonCoding Responsive Design
@EricOverfield - pixelmill.com
49. Summary
New Improvement in SharePoint 2013 for Mobile
Contemporary View and Device Channels
Mobile Alerts, Push Notifications, Mobile Apps
Responsive Design and SharePoint 2013
Coding Responsive DesignSharePoint and Responsive DesignPush NotificationsLet’s See a ComparisonSummary
@EricOverfield - pixelmill.com
50. Resources
Overview of mobile devices and SharePoint Server 2013
http://technet.microsoft.com/en-us/library/fp161351.aspx
Responsive Frameworks for SharePoint
http://responsivesharepoint.codeplex.com
Mobile Alerts
http://technet.microsoft.com/en-us/library/ee428323.aspx
Push Notifications
http://msdn.microsoft.com/en-us/library/jj163784%28v=office.15%29
Configure Browser definition file
http://technet.microsoft.com/en-us/library/ff393836.aspx
Coding Responsive DesignSharePoint and Responsive DesignPush NotificationsLet’s See a ComparisonResources
@EricOverfield - pixelmill.com
Order Your Copy
http://pxml.ly/zsqykd
“Pro SharePoint 2013 Branding and Responsive Web Development” (Apress
– June 12th, 2013)
51. Shape SharePoint 2013
Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixelmill.com
For Mobile