Shape SharePoint 2013 for Mobile

For Mobile
Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill
Shape SharePoint 2013

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)

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

The Evolving Web

The Evolution Continues

Today’s Web

A Look at the Numbers

Business Insider conference presentation shows (Blodget & Cocotas, 2012)

http://thenextweb.com/insider/2012/12/27/christmas-day-mixpanel-study-more-online-activity-on-mobile-devices/
Mobile vs Desktop Traffic

http://www.webpronews.com/mobile-technology-had-a-very-merry-christmas-2013-01
A Good Reason Why

By Search Volume

http://www.slideshare.net/G3Com/2012-b2b-buyer-behavior-survey-report

SharePoint 2013
Mobile Features

Out of the Box
Mobile Views
Device Channels
Push Notifications
Mobile Alerts
Mobile Apps

 Classic View
 Same as SharePoint 2010
 Contemporary View
 New to SharePoint 2013
 Full Screen UI
 Standard Site View
Mobile Views

Classic
Contemporary
Full Screen UI

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

Contemporary
Contemporary View
 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

Full Screen UI
 Your Default Site
 Works with all Site Templates
 Not Optimized for Touch
Contemporary ViewFull Screen UI View
Full Screen UI

Out of the Box
Mobile Views
Device Channels

Device Channels
 Interfaces tailored and maps to specific device(s)
 Custom Master Pages per Channel
 Custom DeviceChannelPanels
 Change the order of content!

Device Channels – An Example

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

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

Out of the Box
Mobile Views
Device Channels
Push Notifications

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

Push NotificationsLet’s See a ComparisonPush Notifications – Example Please
http://msdn.microsoft.com/en-us/library/jj923094.aspx

Out of the Box
Mobile Views
Device Channels
Push Notifications
Mobile Alerts

 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
Push NotificationsLet’s See a ComparisonMobile Alerts

 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

 Windows Phone, iPad, iPhone
 Access in Inbox
 Interact with Groups / Conversations
Push NotificationsLet’s See a ComparisonYammer Mobile App

 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

 Windows and Safari
 Word, Excel and PowerPoint
 Browser based
 On prem or cloud
Push NotificationsLet’s See a ComparisonMicrosoft Office Web Apps

 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/

 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

But With Mobile Apps…
Which devices will you target?
How will you handle new device updates?
Who will develop your app for you?

Reshape the Mobile Interface
Responsive Web Design
One Branding / UI Solution
Device Independent

 #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

Fluid Grid – Flexible Media – CSS3 Media Queries

Push NotificationsLet’s See a ComparisonFluid (Flexible) Grid

Push NotificationsLet’s See a ComparisonFlexible Media
 Flexible Images
 Flexible Video
 Proportional Text

Push NotificationsLet’s See a ComparisonCSS3 Media Queries
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;
}
}

Responsive In Action

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!
Push NotificationsLet’s See a ComparisonSharePoint and Responsive Design

 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

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

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

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
Order Your Copy
http://pxml.ly/zsqykd
“Pro SharePoint 2013 Branding and Responsive Web Development” (Apress
– June 12th, 2013)

Shape SharePoint 2013
Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixelmill.com
For Mobile

Shape SharePoint 2013 for Mobile

More Related Content

What's hot

Similar to Shape SharePoint 2013 for Mobile

More from Eric Overfield

Recently uploaded

Shape SharePoint 2013 for Mobile