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

New devices? Maintain that list too?It’s a mixed bag

Let’s See a Comparison

Mobile View Collab

Publish

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

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:

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

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

eoverfield@pixelmill.com

Shape SharePoint 2013 for Mobile

mobile views sharepoint

mobile strategy sharepoint

mobile device think

notifications mobile

mobile account

device channels new

comparison mobile view

screen ui contemporary

Technology

SharePoint Summit Toronto2011 KWizCom SharePoint2010 mobile....

The Power of SharePoint Mobile Web Solutions

SPCA2013 - SharePoint Mobile Strategy and Design

SharePoint@Enterprise 2016 - Digitale, mobile Formulare mit....

European SharePoint Conference: Mobile Applications for...

Managing sharepoint in a mobile world

Client-facing SharePoint Access on Mobile Devices

SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup.....

SharePoint Server 2016 - InfoNet Day · 2016-11-07 ·...

SharePoint Summit Vancouver: Reach your audience with a...

SharePoint 2013 Mobile Intranet Strategy #SEASPC

SharePoint Intranet Mobile

Engage iOS Admin Guide 7 - SharePoint Mobile Apps ·...

Part 1: SharePoint Mobile Development Frameworks

Developing SharePoint-powered mobile apps

Mobile SharePoint Enterprise ready