The Design Dilemma of Mobile and SharePoint

1,379 views

Published on

Are tablets and smartphone going to access your SharePoint 2010 site? Hint: They will. How will the presentation of your SharePoint site be affected by the growing trend of mobile workstyles? Traditional branding for SharePoint 2010 has its shortcomings with modern mobile devices. In this session we will review the available options to enhance the look and feel of your SharePoint site, and create a unified experience across modern internet devices. We will discuss current design trends and how to utilize them in your SharePoint project. We will finish by considering how this will be impacted by SharePoint 2013.

Published in: Education, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,379
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Slides will be available from blog and twitterOverview talk of SharePoint and new devices Light on tech and howto Don’t worry tech folks, many resources at end.
  • 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
  • MrZeldman founded A List Apart, best practices and innovations in web design.sure, you can zoom in on many smart phones or tablets, but what if you can make tailored experience for each device?Modern devices share basic ability with css, js though which his a plus
  • 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'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?
  • Mississippi Department of IT
  • Thank You!Don’t forget to check out my blog where you can download this presentation or the recording.Easiest way to get to the material I referenced
  • The Design Dilemma of Mobile and SharePoint

    1. 1. Mobile and SharePoint Eric Overfield SharePoint Advocate and Enthusiast PixelMill The Design Dilemma of
    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 Mobile Views  SharePoint Device Channels (2013)  Mobile Apps  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. "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 - pixelmill.com
    9. 9. A Look at the Numbers @EricOverfield - pixelmill.com
    10. 10. @EricOverfield - pixelmill.com Business Insider conference presentation shows (Blodget & Cocotas, 2012)
    11. 11. @EricOverfield - pixelmill.com
    12. 12. http://thenextweb.com/insider/2012/12/27/christmas-day-mixpanel-study-more-online-activity-on-mobile-devices/ @EricOverfield - pixelmill.com Mobile vs Desktop Traffic
    13. 13. http://www.webpronews.com/mobile-technology-had-a-very-merry-christmas-2013-01 A Good Reason Why @EricOverfield - pixelmill.com
    14. 14. @EricOverfield - pixelmill.com By Search Volume
    15. 15. @EricOverfield - pixelmill.com http://www.slideshare.net/G3Com/2012-b2b-buyer-behavior-survey-report
    16. 16. Internationally Is Even Bigger @EricOverfield - pixelmill.com
    17. 17. @EricOverfield - pixelmill.com Mobile Browsing
    18. 18. @EricOverfield - pixelmill.com Mary Meeker, Kleiner Perkins Caulfield and Byers, '2012 Internet Trends Year-End Update'
    19. 19. Screen Size Functionality Usability How All Devices Differ @EricOverfield - pixelmill.com
    20. 20. Screen Size Functionality Usability How All Devices Differ @EricOverfield - pixelmill.com
    21. 21. Screen Size Height – Width – Resolution – Layout @EricOverfield - pixelmill.com
    22. 22. Screen Size Functionality Usability How All Devices Differ @EricOverfield - pixelmill.com
    23. 23. Not all devices are created equal. Clicks Mouse-overs Touch Swipe Plugin Support @EricOverfield - pixelmill.com
    24. 24. Screen Size Functionality Usability How All Devices Differ @EricOverfield - pixelmill.com
    25. 25. Load Time Content Placement Screen Utilization Navigation Searchability @EricOverfield - pixelmill.com
    26. 26. Embrace the Unforeseeable Build Towards the Future, not the Past @EricOverfield - pixelmill.com
    27. 27. How Will SharePoint Help Us? @EricOverfield - pixelmill.com
    28. 28. Out of the Box Device Channels (2013) Mobile Views Device Channels (2013) @EricOverfield - pixelmill.com
    29. 29.  Classic View  SharePoint 2010 / SharePoint 2013  Contemporary View  New to SharePoint 2013  Full Screen UI (SharePoint 2010*/2013)  Standard Site View Mobile Views @EricOverfield - pixelmill.com
    30. 30. Classic 2010/2013 Contemporary 2013 only Full Screen UI* @EricOverfield - pixelmill.com
    31. 31. 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 @EricOverfield - pixelmill.com
    32. 32. 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
    33. 33. 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 @EricOverfield - pixelmill.com Full Screen UI
    34. 34. Out of the Box Device Channels (2013) Mobile Views @EricOverfield - pixelmill.com
    35. 35. 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
    36. 36. Device Channels – An Example @EricOverfield - pixelmill.com
    37. 37. 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
    38. 38. 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 @EricOverfield - pixelmill.com
    39. 39. What About Mobile Apps? @EricOverfield - pixelmill.com
    40. 40. SharePoint Mobile Apps Freely Available (2013): SharePoint Newsfeed App Skydrive Pro App @EricOverfield - pixelmill.com Third Party: SharePlus by Infragistics's Briefcase by Colligo Mobile Entrée by H3 Solutions Filamente Mobile SharePoint App And more…
    41. 41. Apps are not a cure-all @EricOverfield - pixelmill.com Good for -> particular function Mobile Collaboration Mobile Document Sharing Bad for -> general site / portal Mobile Friendly Website
    42. 42. @EricOverfield - pixelmill.com Reshape the Mobile Interface Responsive Web Design One Branding / UI Solution Device Independent
    43. 43.  #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
    44. 44. Fluid Grid – Flexible Media – CSS3 Media Queries @EricOverfield - pixelmill.com
    45. 45. Push NotificationsLet’s See a ComparisonFluid (Flexible) Grid @EricOverfield - pixelmill.com i.e. 860 / 940 ~= 91.489361%
    46. 46. @EricOverfield - pixelmill.com The Grid – In Action
    47. 47. Push NotificationsLet’s See a ComparisonFlexible Media @EricOverfield - pixelmill.com
    48. 48. 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; } }
    49. 49. Responsive In Action @EricOverfield - pixelmill.com
    50. 50. www.its.ms.gov @EricOverfield - pixelmill.com
    51. 51. @EricOverfield - pixelmill.com
    52. 52. 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
    53. 53.  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
    54. 54. 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 @EricOverfield - pixelmill.com
    55. 55. @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
    56. 56. 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 @EricOverfield - pixelmill.com  Build towards the future, not the past  Mobile devices will penetrate the corporate firewall
    57. 57. 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)
    58. 58. Mobile and SharePoint The Design Dilemma of Eric Overfield @EricOverfield ericoverfield.com eoverfield@pixelmill.com Thank You

    ×