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 Views
 SharePoint 2013 Device Channels
 Oth...
The Web has Changed?
@EricOverfield - pixelmill.com
Not The Web
@EricOverfield - pixelmill.com
Today’s Web
@EricOverfield - pixelmill.com
And Tomorrow?
Watches?
Game Devices?
Printers?
Who Knows?
Toasters?
Televisions?
Cameras?
@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
Internationally Is
Even Bigger
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Mobile Browsing
@EricOverfield - pixelmill.com
Mary Meeker, Kleiner Perkins Caulfield and Byers, '2012 Internet Trends Year-End Update'
How Will SharePoint 2013
Help Us?
@EricOverfield - pixelmill.com
Out of the Box
Device Channels
Mobile Views
Device Channels
@EricOverfield - pixelmill.com
 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
Device Channels
Mobile Views
@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...
What Else is New?
Mobile Alerts
Push Notifications
Mobile Alerts
@EricOverfield - pixelmill.com
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...
What Else is New?
Mobile Alerts
Push Notifications
@EricOverfield - pixelmill.com
 Similar to Email Alerts
 i.e. Notify of a List Modification Event
 Uses SMS (Short Message Service)
 Requires a Servi...
What Else is New?
Mobile Alerts
Push Notifications
@EricOverfield - pixelmill.com
Mobile Apps
 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
i.e. 860 / 940 ~= 91.489361%
@EricOverfield - pixelmill.com
The Grid – In Action
Push NotificationsLet’s See a ComparisonFlexible Media
@EricOverfield - pixelmill.com
Push NotificationsLet’s See a ComparisonMedia Queries
@EricOverfield - pixelmill.com
Load a stylesheet in HTML:
<link rel=...
Responsive In Action
@EricOverfield - pixelmill.com
www.its.ms.gov
@EricOverfield - pixelmill.com
@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...
@EricOverfield - pixelmill.com
The Best of Both Worlds
Use DeviceChannelPanels
Create a Device Channel for special cases
R...
Summary
 New Improvement in SharePoint 2013 for Mobile
 Contemporary View and Device Channels
 Mobile Alerts and Push N...
Resources
Overview of mobile devices and SharePoint Server 2013
http://technet.microsoft.com/en-us/library/fp161351.aspx
R...
For Mobile
Shape SharePoint 2013
Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixelmill.com
Upcoming SlideShare
Loading in...5
×

Shape SharePoint 2013 for Mobile

2,721

Published on

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

No Downloads
Views
Total Views
2,721
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
90
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • 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
  • http://www.wcu.edu/ceap/houghton/edelcompeduc/ch1/ch1palmframes.html
  • http://www.mequoda.com/articles/digital-magazine-publishing/web-usage-prediction-when-mobile-and-desktop-collide/
  • http://www.seodailyupdates.com/2011/06/mobile-vs-desktop-internet-usage-stats.html
  • http://www.bondgrp.com/blog/mobile-blog/(http://www.slideshare.net/G3Com/2012-b2b-buyer-behavior-survey-report)
  • http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
  • http://ibnlive.in.com/news/mobile-internet-usage-in-india-outstrips-traffic-from-desktops-report/308772-11.html
  • Device Channels work only with Publishing Sites Allow for one interface for all desktops and another for most tablets let&apos;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&apos;s say.Only 10 device channels per site collection, but do you really want to maintain 10 MP’s?
  • Mississippi Department of IT
  • Transcript of "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 Views  SharePoint 2013 Device Channels  Other Solutions?  A Look at Responsive Web Design @EricOverfield - pixelmill.com
    4. 4. The Web has Changed? @EricOverfield - pixelmill.com
    5. 5. Not The Web @EricOverfield - pixelmill.com
    6. 6. Today’s Web @EricOverfield - pixelmill.com
    7. 7. And Tomorrow? Watches? Game Devices? Printers? Who Knows? Toasters? Televisions? Cameras? @EricOverfield - pixelmill.com
    8. 8. A Look at the Numbers @EricOverfield - pixelmill.com
    9. 9. @EricOverfield - pixelmill.com Business Insider conference presentation shows (Blodget & Cocotas, 2012)
    10. 10. @EricOverfield - pixelmill.com
    11. 11. http://thenextweb.com/insider/2012/12/27/christmas-day-mixpanel-study-more-online-activity-on-mobile-devices/ @EricOverfield - pixelmill.com Mobile vs Desktop Traffic
    12. 12. http://www.webpronews.com/mobile-technology-had-a-very-merry-christmas-2013-01 A Good Reason Why @EricOverfield - pixelmill.com
    13. 13. @EricOverfield - pixelmill.com By Search Volume
    14. 14. @EricOverfield - pixelmill.com http://www.slideshare.net/G3Com/2012-b2b-buyer-behavior-survey-report
    15. 15. Internationally Is Even Bigger @EricOverfield - pixelmill.com
    16. 16. @EricOverfield - pixelmill.com Mobile Browsing
    17. 17. @EricOverfield - pixelmill.com Mary Meeker, Kleiner Perkins Caulfield and Byers, '2012 Internet Trends Year-End Update'
    18. 18. How Will SharePoint 2013 Help Us? @EricOverfield - pixelmill.com
    19. 19. Out of the Box Device Channels Mobile Views Device Channels @EricOverfield - pixelmill.com
    20. 20.  Classic View  Same as SharePoint 2010  Contemporary View  New to SharePoint 2013  Full Screen UI  Standard Site View Mobile Views @EricOverfield - pixelmill.com
    21. 21. Classic Contemporary Full Screen UI @EricOverfield - pixelmill.com
    22. 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. 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. 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. 25. Out of the Box Device Channels Mobile Views @EricOverfield - pixelmill.com
    26. 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
    27. 27. Device Channels – An Example @EricOverfield - pixelmill.com
    28. 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. 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. 30. What Else is New? Mobile Alerts Push Notifications Mobile Alerts @EricOverfield - pixelmill.com
    31. 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. 32. Push NotificationsLet’s See a ComparisonPush Notifications – Example Please @EricOverfield - pixelmill.com http://msdn.microsoft.com/en-us/library/jj923094.aspx
    33. 33. What Else is New? Mobile Alerts Push Notifications @EricOverfield - pixelmill.com
    34. 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. 35. What Else is New? Mobile Alerts Push Notifications @EricOverfield - pixelmill.com Mobile Apps
    36. 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. 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?
    38. 38. @EricOverfield - pixelmill.com Reshape the Mobile Interface Responsive Web Design One Branding / UI Solution Device Independent
    39. 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. 40. Fluid Grid – Flexible Media – CSS3 Media Queries @EricOverfield - pixelmill.com
    41. 41. Push NotificationsLet’s See a ComparisonFluid (Flexible) Grid @EricOverfield - pixelmill.com i.e. 860 / 940 ~= 91.489361%
    42. 42. @EricOverfield - pixelmill.com The Grid – In Action
    43. 43. Push NotificationsLet’s See a ComparisonFlexible Media @EricOverfield - pixelmill.com
    44. 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; } }
    45. 45. Responsive In Action @EricOverfield - pixelmill.com
    46. 46. www.its.ms.gov @EricOverfield - pixelmill.com
    47. 47. @EricOverfield - pixelmill.com
    48. 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. 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. 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. 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. 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. 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. 54. For Mobile Shape SharePoint 2013 Thank You Eric Overfield @EricOverfield ericoverfield.com eoverfield@pixelmill.com
    1. A particular slide catching your eye?

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

    ×