The Design Dilemma of Mobile and SharePoint

Mobile and SharePoint
Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill
The Design Dilemma of

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 Mobile Views
 SharePoint Device Channels (2013)
 Mobile Apps
 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?

"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

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'

Screen Size
Functionality
Usability
How All Devices Differ

Screen Size
Height – Width – Resolution – Layout

Not all devices are created equal.
Clicks
Mouse-overs
Touch
Swipe
Plugin Support

Load Time
Content Placement
Screen Utilization
Navigation
Searchability

Embrace the Unforeseeable
Build Towards the Future, not the Past

How Will SharePoint Help Us?

Out of the Box
Device Channels (2013)
Mobile Views

 Classic View
 SharePoint 2010 / SharePoint 2013
 Contemporary View
 New to SharePoint 2013
 Full Screen UI (SharePoint 2010*/2013)
 Standard Site View
Mobile Views

Classic
2010/2013
Contemporary
2013 only
Full Screen UI*

Classic
 Same in SharePoint 2010 and SharePoint 2013
 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
 Available OOTB in SharePoint 2013
 *Requires customization for SharePoint 2010
Contemporary ViewFull Screen UI View
Full Screen UI

Out of the Box
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
2010/2013
Yes N/A No Links No
Contemporary View
2013
Yes N/A Yes
Nav
Window
No
Full Screen UI
2010*/2013
Yes Yes No*
Same as
Desktop
No*
Device Channels
2013
N/A Yes Yes Up to You Yes
Let’s See a Comparison

What About
Mobile Apps?

SharePoint Mobile Apps
Freely Available (2013):
SharePoint Newsfeed App
Skydrive Pro App
Third Party:
SharePlus by Infragistics's
Briefcase by Colligo
Mobile Entrée by H3 Solutions
Filamente Mobile SharePoint App
And more…

Apps are not a cure-all
Good for -> particular function
Mobile Collaboration
Mobile Document Sharing
Bad for -> general site / portal
Mobile Friendly Website

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 2010/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
 Responsive Design and SharePoint
Coding Responsive DesignSharePoint and Responsive DesignPush NotificationsLet’s See a ComparisonSummary
 Build towards the future, not the past
 Mobile devices will penetrate the corporate firewall

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)

Mobile and SharePoint
The Design Dilemma of
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixelmill.com
Thank You

The Design Dilemma of Mobile and SharePoint

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a The Design Dilemma of Mobile and SharePoint

Similar a The Design Dilemma of Mobile and SharePoint (20)

Más de Eric Overfield

Más de Eric Overfield (11)

Último

Último (20)

The Design Dilemma of Mobile and SharePoint

Notas del editor