Your SlideShare is downloading. ×
  • Like
The Design Dilemma of Mobile and SharePoint
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

The Design Dilemma of Mobile and SharePoint

  • 906 views
Published

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? …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
906
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
23
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 1. Mobile and SharePoint Eric Overfield SharePoint Advocate and Enthusiast PixelMill The Design Dilemma of
  • 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 Mobile Views  SharePoint Device Channels (2013)  Mobile Apps  A Look at Responsive Web Design @EricOverfield - pixelmill.com
  • 4. The Web has Changed? @EricOverfield - pixelmill.com
  • 5. Not The Web @EricOverfield - pixelmill.com
  • 6. Today’s Web @EricOverfield - pixelmill.com
  • 7. And Tomorrow? Watches? Game Devices? Printers? Who Knows? Toasters? Televisions? Cameras? @EricOverfield - pixelmill.com
  • 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. A Look at the Numbers @EricOverfield - pixelmill.com
  • 10. @EricOverfield - pixelmill.com Business Insider conference presentation shows (Blodget & Cocotas, 2012)
  • 11. @EricOverfield - pixelmill.com
  • 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. http://www.webpronews.com/mobile-technology-had-a-very-merry-christmas-2013-01 A Good Reason Why @EricOverfield - pixelmill.com
  • 14. @EricOverfield - pixelmill.com By Search Volume
  • 15. @EricOverfield - pixelmill.com http://www.slideshare.net/G3Com/2012-b2b-buyer-behavior-survey-report
  • 16. Internationally Is Even Bigger @EricOverfield - pixelmill.com
  • 17. @EricOverfield - pixelmill.com Mobile Browsing
  • 18. @EricOverfield - pixelmill.com Mary Meeker, Kleiner Perkins Caulfield and Byers, '2012 Internet Trends Year-End Update'
  • 19. Screen Size Functionality Usability How All Devices Differ @EricOverfield - pixelmill.com
  • 20. Screen Size Functionality Usability How All Devices Differ @EricOverfield - pixelmill.com
  • 21. Screen Size Height – Width – Resolution – Layout @EricOverfield - pixelmill.com
  • 22. Screen Size Functionality Usability How All Devices Differ @EricOverfield - pixelmill.com
  • 23. Not all devices are created equal. Clicks Mouse-overs Touch Swipe Plugin Support @EricOverfield - pixelmill.com
  • 24. Screen Size Functionality Usability How All Devices Differ @EricOverfield - pixelmill.com
  • 25. Load Time Content Placement Screen Utilization Navigation Searchability @EricOverfield - pixelmill.com
  • 26. Embrace the Unforeseeable Build Towards the Future, not the Past @EricOverfield - pixelmill.com
  • 27. How Will SharePoint Help Us? @EricOverfield - pixelmill.com
  • 28. Out of the Box Device Channels (2013) Mobile Views Device Channels (2013) @EricOverfield - pixelmill.com
  • 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. Classic 2010/2013 Contemporary 2013 only Full Screen UI* @EricOverfield - pixelmill.com
  • 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. 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. 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. Out of the Box Device Channels (2013) Mobile Views @EricOverfield - pixelmill.com
  • 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. Device Channels – An Example @EricOverfield - pixelmill.com
  • 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. 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. What About Mobile Apps? @EricOverfield - pixelmill.com
  • 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. 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. @EricOverfield - pixelmill.com Reshape the Mobile Interface Responsive Web Design One Branding / UI Solution Device Independent
  • 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. Fluid Grid – Flexible Media – CSS3 Media Queries @EricOverfield - pixelmill.com
  • 45. Push NotificationsLet’s See a ComparisonFluid (Flexible) Grid @EricOverfield - pixelmill.com i.e. 860 / 940 ~= 91.489361%
  • 46. @EricOverfield - pixelmill.com The Grid – In Action
  • 47. Push NotificationsLet’s See a ComparisonFlexible Media @EricOverfield - pixelmill.com
  • 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. Responsive In Action @EricOverfield - pixelmill.com
  • 50. www.its.ms.gov @EricOverfield - pixelmill.com
  • 51. @EricOverfield - pixelmill.com
  • 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.  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. 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. @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. 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. 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. Mobile and SharePoint The Design Dilemma of Eric Overfield @EricOverfield ericoverfield.com eoverfield@pixelmill.com Thank You