Shape SharePoint 2013 for Mobile
Upcoming SlideShare
Loading in...5
×
 

Shape SharePoint 2013 for Mobile

on

  • 2,906 views

 

Statistics

Views

Total Views
2,906
Views on SlideShare
2,906
Embed Views
0

Actions

Likes
2
Downloads
82
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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'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

Shape SharePoint 2013 for Mobile Shape SharePoint 2013 for Mobile Presentation Transcript

  • 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, 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)
  • 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
  • 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/ @EricOverfield - pixelmill.com Mobile vs Desktop Traffic
  • http://www.webpronews.com/mobile-technology-had-a-very-merry-christmas-2013-01 A Good Reason Why @EricOverfield - pixelmill.com
  • @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 View Mobile Views @EricOverfield - pixelmill.com
  • Classic Contemporary Full Screen UI @EricOverfield - pixelmill.com
  • 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
  • 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
  • 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
  • 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 Channel  Custom DeviceChannelPanels  Change the order of content! @EricOverfield - pixelmill.com
  • Device Channels – An Example @EricOverfield - pixelmill.com
  • 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
  • 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
  • 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 Notification Feature  Site Based  2000 Maximum Device Registrations  Required Visual Studio and Custom Code Let’s See a ComparisonPush Notifications @EricOverfield - pixelmill.com
  • Push NotificationsLet’s See a ComparisonPush Notifications – Example Please @EricOverfield - pixelmill.com http://msdn.microsoft.com/en-us/library/jj923094.aspx
  • 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 Service Provider  Configured in Central Admin  You Must Create a Mobile Account @EricOverfield - pixelmill.com Push NotificationsLet’s See a ComparisonMobile Alerts
  • 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  May be very feature rich, you decide Push NotificationsLet’s See a ComparisonMobile Apps and SharePoint @EricOverfield - pixelmill.com
  • 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?
  • @EricOverfield - pixelmill.com Reshape the Mobile Interface Responsive Web Design One Branding / UI Solution Device Independent
  •  #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
  • 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=“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; } }
  • 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 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
  •  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
  • 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
  • @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
  • 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
  • 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)
  • For Mobile Shape SharePoint 2013 Thank You Eric Overfield @EricOverfield ericoverfield.com eoverfield@pixelmill.com