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 Views
 SharePoint 2013 Device Channels
 Other Solutions?
 A Look at Responsive Web Design
@EricOverfield - pixelmill.com

The Web has Changed?

Not The Web

Today’s Web

And Tomorrow?
Watches?
Game Devices?
Printers?
Who Knows?
Toasters?
Televisions?
Cameras?

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

Internationally Is
Even Bigger

Mobile Browsing

Mary Meeker, Kleiner Perkins Caulfield and Byers, '2012 Internet Trends Year-End Update'

How Will SharePoint 2013
Help Us?

Out of the Box
Device Channels
Mobile Views
Device Channels

 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
Device Channels
Mobile Views

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

What Else is New?
Mobile Alerts
Push Notifications
Mobile Alerts

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

What Else is New?
Mobile Alerts
Push Notifications

 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

What Else is New?
Mobile Alerts
Push Notifications
Mobile Apps

 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 ComparisonMobile Apps and SharePoint

But With Mobile Apps…
Which devices will you target?
How will you handle new device updates?
There has to be a better way
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
i.e. 860 / 940 ~= 91.489361%

The Grid – In Action

Push NotificationsLet’s See a ComparisonFlexible Media

Push NotificationsLet’s See a ComparisonMedia 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

www.its.ms.gov

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

The Best of Both Worlds
Use DeviceChannelPanels
Create a Device Channel for special cases
Responsive Design and Device Channels
Build a Responsive site for all devices

Summary
 New Improvement in SharePoint 2013 for Mobile
 Contemporary View and Device Channels
 Mobile Alerts and Push Notifications
 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)

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

Shape SharePoint 2013 for Mobile

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Shape SharePoint 2013 for Mobile

Similar a Shape SharePoint 2013 for Mobile (20)

Último

Último (20)

Shape SharePoint 2013 for Mobile

Notas del editor