• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Shape SharePoint 2013 for Mobile
 

Shape SharePoint 2013 for Mobile

on

  • 234 views

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 ...

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.

Statistics

Views

Total Views
234
Views on SlideShare
234
Embed Views
0

Actions

Likes
0
Downloads
11
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

    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 Features  Non-OOTB Solutions  A Look at Responsive Web Design @EricOverfield - pixelmill.com
    • 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/ @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
    • 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 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 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 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
    • 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 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
    • 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 Service Provider  Configured in Central Admin  You Must Create a Mobile Account @EricOverfield - pixelmill.com Push NotificationsLet’s See a ComparisonMobile Alerts
    • 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 NotificationsLet’s See a ComparisonNewsfeed Mobile App @EricOverfield - pixelmill.comhttp://www.tech-wales.co.uk/en-gb/office-365
    •  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
    •  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
    •  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
    •  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/
    •  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
    • 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?
    • @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
    • Push NotificationsLet’s See a ComparisonFlexible Media @EricOverfield - pixelmill.com  Flexible Images  Flexible Video  Proportional Text
    • 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; } }
    • Responsive In Action @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
    • 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
    • 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)
    • Shape SharePoint 2013 Thank You Eric Overfield @EricOverfield ericoverfield.com eoverfield@pixelmill.com For Mobile