Date post: | 31-Oct-2014 |
Category: |
Technology |
Upload: | eric-overfield |
View: | 314 times |
Download: | 3 times |
For Mobile
Eric OverfieldSharePoint 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.comBusiness 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.comhttp://www.slideshare.net/G3Com/2012-b2b-buyer-behavior-survey-report
Internationally IsEven Bigger
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Mobile Browsing
@EricOverfield - pixelmill.comMary Meeker, Kleiner Perkins Caulfield and Byers, '2012 Internet Trends Year-End Update'
SharePoint 2013Mobile Features
@EricOverfield - pixelmill.com
Out of the Box
Mobile ViewsDevice Channels
@EricOverfield - pixelmill.com
Push NotificationsMobile AlertsMobile Apps
Classic View
Same as SharePoint 2010
Contemporary View
New to SharePoint 2013
Full Screen UI
Standard Site View
Mobile Views
@EricOverfield - pixelmill.com
ClassicContemporary
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 ViewsDevice 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 GoodTailored interfaces! Good for Public Facing Sites
But…Only works with Publishing Sites Maintain multiple Master Pages and/or
sitesNew 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 ViewsDevice 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.comhttp://msdn.microsoft.com/en-us/library/jj923094.aspx
Out of the Box
Mobile ViewsDevice Channels
@EricOverfield - pixelmill.com
Push NotificationsMobile 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 ViewsDevice Channels
@EricOverfield - pixelmill.com
Push NotificationsMobile AlertsMobile 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 SolutionDevice 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
ResourcesOverview of mobile devices and SharePoint Server 2013
http://technet.microsoft.com/en-us/library/fp161351.aspx
Responsive Frameworks for SharePointhttp://responsivesharepoint.codeplex.com
Mobile Alertshttp://technet.microsoft.com/en-us/library/ee428323.aspx
Push Notificationshttp://msdn.microsoft.com/en-us/library/jj163784%28v=office.15%29
Configure Browser definition filehttp://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 YouEric Overfield
@EricOverfieldericoverfield.com
For Mobile