2. 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)
3. 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
4. The Web has Changed?
@EricOverfield - pixelmill.com
19. Out of the Box
Device Channels
Mobile Views
Device Channels
@EricOverfield - pixelmill.com
20. Classic View
Same as SharePoint 2010
Contemporary View
New to SharePoint 2013
Full Screen UI
Standard Site View
Mobile Views
@EricOverfield - pixelmill.com
22. 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
@EricOverfield - pixelmill.com
23. Contemporary
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
Contemporary View
@EricOverfield - pixelmill.com
24. Full Screen UI
Your Default Site
Works with all Site Templates
Not Optimized for Touch
Contemporary ViewFull Screen UI View
@EricOverfield - pixelmill.com
Full Screen UI
25. Out of the Box
Device Channels
Mobile Views
@EricOverfield - pixelmill.com
26. Device Channels
New to SharePoint 2013
Interfaces tailored and maps to specific device(s)
Custom Master Pages per Channel
Custom DeviceChannelPanels
Change the order of content!
@EricOverfield - pixelmill.com
28. 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 - pixelmill.com
29. 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
@EricOverfield - pixelmill.com
30. What Else is New?
Mobile Alerts
Push Notifications
Mobile Alerts
@EricOverfield - pixelmill.com
31. 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
@EricOverfield - pixelmill.com
32. Push NotificationsLet’s See a ComparisonPush Notifications – Example Please
@EricOverfield - pixelmill.com
http://msdn.microsoft.com/en-us/library/jj923094.aspx
33. What Else is New?
Mobile Alerts
Push Notifications
@EricOverfield - pixelmill.com
34. 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
@EricOverfield - pixelmill.com
Push NotificationsLet’s See a ComparisonMobile Alerts
35. What Else is New?
Mobile Alerts
Push Notifications
@EricOverfield - pixelmill.com
Mobile Apps
36. 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
@EricOverfield - pixelmill.com
37. But With Mobile Apps…
@EricOverfield - pixelmill.com
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?
39. #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
@EricOverfield - pixelmill.com
40. Fluid Grid – Flexible Media – CSS3 Media Queries
@EricOverfield - pixelmill.com
41. Push NotificationsLet’s See a ComparisonFluid (Flexible) Grid
@EricOverfield - pixelmill.com
i.e. 860 / 940 ~= 91.489361%
44. Push NotificationsLet’s See a ComparisonMedia Queries
@EricOverfield - pixelmill.com
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;
}
}
48. 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
49. 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
@EricOverfield - pixelmill.com
50. 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
@EricOverfield - pixelmill.com
51. @EricOverfield - pixelmill.com
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
52. 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
@EricOverfield - pixelmill.com
53. 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
@EricOverfield - pixelmill.com
Order Your Copy
http://pxml.ly/zsqykd
“Pro SharePoint 2013 Branding and Responsive Web Development” (Apress
– June 12th, 2013)
54. For Mobile
Shape SharePoint 2013
Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixelmill.com
Notes de l'éditeur
Will make available on blog and twitter (slideshare.net), so if you remember one of those then you can always review everything we discuss
mobile is invading, for the good, all organizations. if not now then in the next few years. Iphone is estimated to provide 1/3% of gdp.
What, you think your next web initiative is only going to last a few years? How long did you last intranet or public facing site last?Built towards to future, not the past, you MUST consider tablets and smart phones at the least
Device Channels work only with Publishing Sites Allow for one interface for all desktops and another for most tablets let's say.Only 10 device channels per site collection, but do you really want to maintain 10 MP’s?
Device Channels work only with Publishing Sites Allow for one interface for all desktops and another for most tablets let's say.Only 10 device channels per site collection, but do you really want to maintain 10 MP’s?