Shape SharePoint 2013

For Mobile

Eric Overfield
SharePoint Branding and UI Lead
PixelMill

SharePoint Saturday Utah #SPSUtah – January 19th, 2013

 Introduction – Eric Overfield

Founder and SharePoint Branding Lead, PixelMill

Working with SharePoint since 2004
Web Designer since 1998
Located in Davis, CA

blog.pixelmill.com/ericoverfield

@EricOverfield
linkedin.com/in/ericoverfield
@EricOverfield blog.pixelmill.com/ericoverfield
 PixelMill

Developing SharePoint solutions since 2004

SharePoint Branding and UI Specialists
Developer of Cost effective SharePoint Templates
Your SharePoint Branding Experts

@EricOverfield blog.pixelmill.com/ericoverfield
 Our Session Agenda

Why We Need a Mobile Strategy

SharePoint 2013 Mobile Views

SharePoint 2013 Devices

Channels

Other Solutions?
@EricOverfield blog.pixelmill.com/ericoverfield
 The Web has Changed?

@EricOverfield blog.pixelmill.com/ericoverfield
 Not The Web

@EricOverfield blog.pixelmill.com/ericoverfield
 Today’s Web

@EricOverfield blog.pixelmill.com/ericoverfield
 And Tomorrow?

? ?
Televisions?

Cameras? Who Knows?

Watches? Printers?
Game Devices? Toasters?

@EricOverfield blog.pixelmill.com/ericoverfield
 "There’s a plethora of devices
out there with widely differing
abilities – it’s never been more
confusing or challenging to
create brilliant interfaces that
work across them all.” ~ Jeffery
Zeldman

@EricOverfield blog.pixelmill.com/ericoverfield
 Don’t Believe Me?

http://www.webpronews.com/mobile-technology-had-a-very-merry-christmas-2013-01
@EricOverfield blog.pixelmill.com/ericoverfield
 Any Better?

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

@EricOverfield blog.pixelmill.com/ericoverfield
 How Will SharePoint 2013
Help Us?

@EricOverfield blog.pixelmill.com/ericoverfield
 Out of the Box

Mobile Views

Device Channels

@EricOverfield blog.pixelmill.com/ericoverfield
 Mobile Views

Classic View

Same as SharePoint 2010

Contemporary View

New to SharePoint 2013

Full Screen UI

Standard Site View

@EricOverfield blog.pixelmill.com/ericoverfield
 Classic

Contemporary
Full Screen UI
@EricOverfield blog.pixelmill.com/ericoverfield
 Classic View

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

@EricOverfield blog.pixelmill.com/ericoverfield
 Contemporary View

New to SharePoint 2013

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

@EricOverfield blog.pixelmill.com/ericoverfield
 Full Screen UI

Your Default Site

Works with all Site Templates

Not Optimized for Touch

@EricOverfield blog.pixelmill.com/ericoverfield
 Out of the Box

Mobile Views

Device Channels

@EricOverfield blog.pixelmill.com/ericoverfield
 New to SharePoint 2013
Interfaces tailored and mapped
to specific device(s)

Custom Master Pages

per Channel
Custom DeviceChannelPanels
@EricOverfield blog.pixelmill.com/ericoverfield
 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

@EricOverfield blog.pixelmill.com/ericoverfield
 Let’s See a Comparison

Mobile View Collab Publish Touc Nav Customizable

h

Classic View Yes N/A No Links No

Nav
Contemporary View Yes N/A Yes No
Window

Same as
Full Screen UI Yes Yes No* No*
Desktop

Device Channels N/A Yes Yes Up to You Yes

@EricOverfield blog.pixelmill.com/ericoverfield
What Else is New?

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

@EricOverfield blog.pixelmill.com/ericoverfield
What Else is New?

Push Notifications

Mobile Alerts
 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 Mobile Account

@EricOverfield blog.pixelmill.com/ericoverfield
 Reshape the Mobile Interface

One Branding / UI Solution

Device Independent

Responsive Web Design

@EricOverfield blog.pixelmill.com/ericoverfield
 Responsive Web Design

#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

@EricOverfield blog.pixelmill.com/ericoverfield
 Fluid Grid – Flexible Media – CSS3 Media Queries
@EricOverfield blog.pixelmill.com/ericoverfield
 Responsive In Action

@EricOverfield blog.pixelmill.com/ericoverfield
 www.its.ms.gov

@EricOverfield blog.pixelmill.com/ericoverfield
@EricOverfield blog.pixelmill.com/ericoverfield
 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 blog.pixelmill.com/ericoverfield
 SharePoint and Responsive Design

Additional overhead

Does require CSS3

Bandwidth Concerns

Are mobile users and desktop users the same?

User site requirements

@EricOverfield blog.pixelmill.com/ericoverfield
 Coding Responsive Design

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
@EricOverfield blog.pixelmill.com/ericoverfield
 The Best of Both Worlds

Responsive Design and Device Channels

Build a Responsive site for all devices

Use DeviceChannelPanels
Create a Device Channel for special cases
@EricOverfield blog.pixelmill.com/ericoverfield
 Summary

New Improvement in SharePoint 2013 for Mobile

Contemporary View and Device Channels

Mobile Alerts and Push Notifications

Responsive Design and SharePoint 2013 is Possible!

@EricOverfield blog.pixelmill.com/ericoverfield
 Resources
Overview of mobile devices and SharePoint Server 2013
http://technet.microsoft.com/en-us/library/fp161351.aspx

Configure Browser definition file

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

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

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

Responsive Frameworks for SharePoint

http://responsivesharepoint.codeplex.com

@EricOverfield blog.pixelmill.com/ericoverfield
Shape SharePoint 2013

For Mobile

Thank You
Eric Overfield
@EricOverfield
blog.pixelmill.com/ericoverfield
eoverfield@pixelmill.com
 Thank you to our sponsors!
Platinum

Gold

Silver

Web
 SharePoint 2013 Launch Party!
Directly following SharePoint Saturday
on the 19th, come celebrate the
release of SharePoint 2013 with food,
live music, and karaoke!

The band 66 & Main will be

performing at Lumpy’s South
from 6-10pm
8925 S. Harrison St., Sandy

Made possible through sponsorship by

Microsoft Cloud Services www.mscloudservices.com