Shape SharePoint 2013 for Mobile

For Mobile

Eric OverfieldSharePoint 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? ??@EricOverfield - pixelmill.com

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/ @EricOverfield - pixelmill.com

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 IsEven 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@EricOverfield - pixelmill.com

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 @EricOverfield - pixelmill.com

Push NotificationsLet’s See a ComparisonFluid (Flexible) Grid

@EricOverfield - pixelmill.comi.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!@EricOverfield - pixelmill.com

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 YouEric Overfield

@EricOverfieldericoverfield.com

[email protected]

Shape SharePoint 2013 for Mobile

Technology

mobile views sharepoint

mobile strategy sharepoint

mobile device think

notifications mobile

mobile account

device channels new

comparison mobile view

screen ui contemporary