Shape SharePoint 2013 for Mobile

transcript

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

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

@EricOverfield - pixelmill.comhttp://www.slideshare.net/G3Com/2012-b2b-buyer-behavior-survey-report

Internationally IsEven Bigger

Mobile Browsing

@EricOverfield - pixelmill.comMary Meeker, Kleiner Perkins Caulfield and Byers, '2012 Internet Trends Year-End Update'

SharePoint 2013Mobile Features

Out of the Box

Mobile ViewsDevice Channels

Push NotificationsMobile AlertsMobile Apps

Classic View

Same as SharePoint 2010

Contemporary View

New to SharePoint 2013

Full Screen UI

Standard Site View

Mobile Views

ClassicContemporary

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

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 GoodTailored interfaces! Good for Public Facing Sites

But…Only works with Publishing Sites Maintain multiple Master Pages and/or

sitesNew devices? Maintain that list too?

It’s a mixed bag@EricOverfield - pixelmill.com

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

Out of the Box

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

@EricOverfield - pixelmill.comhttp://msdn.microsoft.com/en-us/library/jj923094.aspx

Out of the Box

Push NotificationsMobile 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

Out of the Box

Push NotificationsMobile AlertsMobile Apps

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

Reshape the Mobile Interface

Responsive Web Design

One Branding / UI SolutionDevice 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

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!@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

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

ResourcesOverview of mobile devices and SharePoint Server 2013

http://technet.microsoft.com/en-us/library/fp161351.aspx

Responsive Frameworks for SharePointhttp://responsivesharepoint.codeplex.com

Mobile Alertshttp://technet.microsoft.com/en-us/library/ee428323.aspx

Push Notificationshttp://msdn.microsoft.com/en-us/library/jj163784%28v=office.15%29

Configure Browser definition filehttp://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 YouEric Overfield

@EricOverfieldericoverfield.com

eoverfield@pixelmill.com

For Mobile

Shape SharePoint 2013 for Mobile

Technology