For Mobile
Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill
Shape SharePoint 2013
Introduction – Eric Overfield
 Founder and SharePoint Branding/UI Lead, PixelMill
 Speaker, Teacher, Advocate
 Author, ...
What You Will Learn
 Why We Need a Mobile Strategy
 SharePoint 2013 Mobile Features
 Non-OOTB Solutions
 A Look at Res...
The Evolving Web
@EricOverfield - pixelmill.com
The Evolution Continues
@EricOverfield - pixelmill.com
Today’s Web
@EricOverfield - pixelmill.com
A Look at the Numbers
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Business Insider conference presentation shows (Blodget & Cocotas, 2012)
@EricOverfield - pixelmill.com
http://thenextweb.com/insider/2012/12/27/christmas-day-mixpanel-study-more-online-activity-on-mobile-devices/
@EricOverfie...
http://www.webpronews.com/mobile-technology-had-a-very-merry-christmas-2013-01
A Good Reason Why
@EricOverfield - pixelmil...
@EricOverfield - pixelmill.com
By Search Volume
@EricOverfield - pixelmill.com
http://www.slideshare.net/G3Com/2012-b2b-buyer-behavior-survey-report
SharePoint 2013
Mobile Features
@EricOverfield - pixelmill.com
Out of the Box
Mobile Views
Device Channels
@EricOverfield - pixelmill.com
Push Notifications
Mobile Alerts
Mobile Apps
 Classic View
 Same as SharePoint 2010
 Contemporary View
 New to SharePoint 2013
 Full Screen UI
 Standard Site Vie...
Classic
Contemporary
Full Screen UI
@EricOverfield - pixelmill.com
Classic
 Similar to SharePoint 2010
 Designed for Collaboration Site Templates
 Mobile Browser View Enabled By Default
...
Contemporary
Contemporary View
 New to SharePoint 2013
 Also Designed for Collaboration Site Templates
 Mobile Browser ...
Full Screen UI
 Your Default Site
 Works with all Site Templates
 Not Optimized for Touch
Contemporary ViewFull Screen ...
Out of the Box
Mobile Views
Device Channels
@EricOverfield - pixelmill.com
Device Channels
 New to SharePoint 2013
 Interfaces tailored and maps to specific device(s)
 Custom Master Pages per Ch...
Device Channels – An Example
@EricOverfield - pixelmill.com
Device Channels – The Good
Tailored interfaces!
Good for Public Facing Sites
But…
Only works with Publishing Sites
Maintai...
Let’s See a Comparison
Mobile View Collab Publish Touch Nav Customizable
Classic View Yes N/A No Links No
Contemporary Vie...
Out of the Box
Mobile Views
Device Channels
@EricOverfield - pixelmill.com
Push Notifications
Push Notifications
 Push Events to a Mobile Device
 Think Updating a Tile on a Windows Phone
 Must activate the Push No...
Push NotificationsLet’s See a ComparisonPush Notifications – Example Please
@EricOverfield - pixelmill.com
http://msdn.mic...
Out of the Box
Mobile Views
Device Channels
@EricOverfield - pixelmill.com
Push Notifications
Mobile Alerts
 Similar to Email Alerts
 i.e. Notify of a List Modification Event
 Uses SMS (Short Message Service)
 Requires a Servi...
Out of the Box
Mobile Views
Device Channels
@EricOverfield - pixelmill.com
Push Notifications
Mobile Alerts
Mobile Apps
 Windows Phone / iOS
 Create status posts
 Add comments
 Read / “like” posts
 Use followed documents
Push Notificatio...
 Windows Phone, iPad, iPhone
 Access in Inbox
 Interact with Groups / Conversations
Push NotificationsLet’s See a Compa...
 Surface, Windows Phone, iPad
 Business Intelligence Center (viewing sites)
 Excel services
 PerformancePoint
 * No O...
 Windows and Safari
 Word, Excel and PowerPoint
 Browser based
 On prem or cloud
Push NotificationsLet’s See a Compari...
 Windows Phone 7.5 and 8, iPad, iPhone and Android
 Add and access files, photos and videos
 Share files and folders
Pu...
 Tailor a solution to a particular device
 For Windows, have option of App store
 Use REST API / CSOM for any device
 ...
But With Mobile Apps…
@EricOverfield - pixelmill.com
Which devices will you target?
How will you handle new device updates...
@EricOverfield - pixelmill.com
Reshape the Mobile Interface
Responsive Web Design
One Branding / UI Solution
Device Indepe...
 #2 trend for 2012 - .net Magazine
 Coined by Ethan Marcotte in May 2010
 Use fluid grids and flexible media to adapt
...
Fluid Grid – Flexible Media – CSS3 Media Queries
@EricOverfield - pixelmill.com
Push NotificationsLet’s See a ComparisonFluid (Flexible) Grid
@EricOverfield - pixelmill.com
Push NotificationsLet’s See a ComparisonFlexible Media
@EricOverfield - pixelmill.com
 Flexible Images
 Flexible Video
...
Push NotificationsLet’s See a ComparisonCSS3 Media Queries
@EricOverfield - pixelmill.com
Load a stylesheet in HTML:
<link...
Responsive In Action
@EricOverfield - pixelmill.com
SharePoint and Responsive Design
 Uses CSS3 (media queries) and maybe HTML5.
 Generally only one Master Page for all dev...
 Additional overhead
 Does require CSS3
 Bandwidth Concerns
 Are mobile users and desktop users the same
 User site r...
Coding Responsive Design
 Can be Difficult to Integrate a Fluid Grid
 Many Existing Frameworks Exist
 Not always easy t...
Summary
 New Improvement in SharePoint 2013 for Mobile
 Contemporary View and Device Channels
 Mobile Alerts, Push Noti...
Resources
Overview of mobile devices and SharePoint Server 2013
http://technet.microsoft.com/en-us/library/fp161351.aspx
R...
Shape SharePoint 2013
Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixelmill.com
For Mobile
Upcoming SlideShare
Loading in...5
×

Shape SharePoint 2013 for Mobile

382

Published on

How many of your users will access your SharePoint site on a mobile device? Hint: more than you think. Will your SharePoint site handle it well? Configuring SharePoint 2010 for mobile devices had its issues, but now with SharePoint 2013, new options are available to us. In this session we will review how to enhance SharePoint 2013 and create a unified experience across modern internet devices. We will discuss in-depth the current trends and how to utilize them in your SharePoint 2013 projects. We will start with OOTB and progress to custom and hybrid options including creating a Responsive Design, amplified by Device Channels.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
382
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Shape SharePoint 2013 for Mobile

  1. 1. For Mobile Eric Overfield SharePoint Advocate and Enthusiast PixelMill Shape SharePoint 2013
  2. 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. 3. 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
  4. 4. The Evolving Web @EricOverfield - pixelmill.com
  5. 5. The Evolution Continues @EricOverfield - pixelmill.com
  6. 6. Today’s Web @EricOverfield - pixelmill.com
  7. 7. A Look at the Numbers @EricOverfield - pixelmill.com
  8. 8. @EricOverfield - pixelmill.com Business Insider conference presentation shows (Blodget & Cocotas, 2012)
  9. 9. @EricOverfield - pixelmill.com
  10. 10. http://thenextweb.com/insider/2012/12/27/christmas-day-mixpanel-study-more-online-activity-on-mobile-devices/ @EricOverfield - pixelmill.com Mobile vs Desktop Traffic
  11. 11. http://www.webpronews.com/mobile-technology-had-a-very-merry-christmas-2013-01 A Good Reason Why @EricOverfield - pixelmill.com
  12. 12. @EricOverfield - pixelmill.com By Search Volume
  13. 13. @EricOverfield - pixelmill.com http://www.slideshare.net/G3Com/2012-b2b-buyer-behavior-survey-report
  14. 14. SharePoint 2013 Mobile Features @EricOverfield - pixelmill.com
  15. 15. Out of the Box Mobile Views Device Channels @EricOverfield - pixelmill.com Push Notifications Mobile Alerts Mobile Apps
  16. 16.  Classic View  Same as SharePoint 2010  Contemporary View  New to SharePoint 2013  Full Screen UI  Standard Site View Mobile Views @EricOverfield - pixelmill.com
  17. 17. Classic Contemporary Full Screen UI @EricOverfield - pixelmill.com
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. Out of the Box Mobile Views Device Channels @EricOverfield - pixelmill.com
  22. 22. 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
  23. 23. Device Channels – An Example @EricOverfield - pixelmill.com
  24. 24. 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
  25. 25. 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
  26. 26. Out of the Box Mobile Views Device Channels @EricOverfield - pixelmill.com Push Notifications
  27. 27. 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
  28. 28. Push NotificationsLet’s See a ComparisonPush Notifications – Example Please @EricOverfield - pixelmill.com http://msdn.microsoft.com/en-us/library/jj923094.aspx
  29. 29. Out of the Box Mobile Views Device Channels @EricOverfield - pixelmill.com Push Notifications Mobile Alerts
  30. 30.  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
  31. 31. Out of the Box Mobile Views Device Channels @EricOverfield - pixelmill.com Push Notifications Mobile Alerts Mobile Apps
  32. 32.  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
  33. 33.  Windows Phone, iPad, iPhone  Access in Inbox  Interact with Groups / Conversations Push NotificationsLet’s See a ComparisonYammer Mobile App @EricOverfield - pixelmill.comhttp://www.tech-wales.co.uk/en-gb/office-365
  34. 34.  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 @EricOverfield - pixelmill.com
  35. 35.  Windows and Safari  Word, Excel and PowerPoint  Browser based  On prem or cloud Push NotificationsLet’s See a ComparisonMicrosoft Office Web Apps @EricOverfield - pixelmill.comhttp://www.tech-wales.co.uk/en-gb/office-365
  36. 36.  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/
  37. 37.  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 @EricOverfield - pixelmill.com
  38. 38. But With Mobile Apps… @EricOverfield - pixelmill.com Which devices will you target? How will you handle new device updates? Who will develop your app for you?
  39. 39. @EricOverfield - pixelmill.com Reshape the Mobile Interface Responsive Web Design One Branding / UI Solution Device Independent
  40. 40.  #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
  41. 41. Fluid Grid – Flexible Media – CSS3 Media Queries @EricOverfield - pixelmill.com
  42. 42. Push NotificationsLet’s See a ComparisonFluid (Flexible) Grid @EricOverfield - pixelmill.com
  43. 43. Push NotificationsLet’s See a ComparisonFlexible Media @EricOverfield - pixelmill.com  Flexible Images  Flexible Video  Proportional Text
  44. 44. Push NotificationsLet’s See a ComparisonCSS3 Media 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; } }
  45. 45. Responsive In Action @EricOverfield - pixelmill.com
  46. 46. 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
  47. 47.  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
  48. 48. 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
  49. 49. 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 @EricOverfield - pixelmill.com
  50. 50. 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)
  51. 51. Shape SharePoint 2013 Thank You Eric Overfield @EricOverfield ericoverfield.com eoverfield@pixelmill.com For Mobile
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×