SlideShare une entreprise Scribd logo
1  sur  54
Télécharger pour lire hors ligne
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

Contenu connexe

Tendances

Cross Platform Mobile Application Architecture
Cross Platform Mobile Application ArchitectureCross Platform Mobile Application Architecture
Cross Platform Mobile Application ArchitectureDerrick Bowen
 
Native vs Hybrid - Demystifying the Technology Dilemma
Native vs Hybrid - Demystifying the Technology Dilemma Native vs Hybrid - Demystifying the Technology Dilemma
Native vs Hybrid - Demystifying the Technology Dilemma RST-IT
 
Developing a Modern Mobile App Strategy
Developing a Modern Mobile App StrategyDeveloping a Modern Mobile App Strategy
Developing a Modern Mobile App StrategyTodd Anglin
 
Native vs hybrid approach Mobile App Development
Native vs hybrid approach Mobile App DevelopmentNative vs hybrid approach Mobile App Development
Native vs hybrid approach Mobile App DevelopmentSenthil Kumar Kaliathan
 
An introduction to mobile app development and investing
An introduction to mobile app development and investingAn introduction to mobile app development and investing
An introduction to mobile app development and investingBrandon Na
 
Responsive Email Design
Responsive Email DesignResponsive Email Design
Responsive Email DesignAnna Yeaman
 
Mobile Application Framework - OFM Canberra September 2014
Mobile Application Framework - OFM Canberra September 2014Mobile Application Framework - OFM Canberra September 2014
Mobile Application Framework - OFM Canberra September 2014Joelith
 
Native v s hybrid
Native v s hybridNative v s hybrid
Native v s hybridKelly Ston
 
Hybrid mobile app development
Hybrid mobile app developmentHybrid mobile app development
Hybrid mobile app developmentChamil Madusanka
 
Developing Enterprise-Grade Mobile Applications
Developing Enterprise-Grade Mobile ApplicationsDeveloping Enterprise-Grade Mobile Applications
Developing Enterprise-Grade Mobile ApplicationsSimon Guest
 
iPhone - Human Interface Guidelines
iPhone - Human Interface GuidelinesiPhone - Human Interface Guidelines
iPhone - Human Interface GuidelinesMartin Ebner
 
I like i phone and android but know .net
I like i phone and android but know .netI like i phone and android but know .net
I like i phone and android but know .netChris Love
 
Hybrid vs Native Mobile App. Decide in 5 minutes!
Hybrid vs Native Mobile App. Decide in 5 minutes!Hybrid vs Native Mobile App. Decide in 5 minutes!
Hybrid vs Native Mobile App. Decide in 5 minutes!July Systems
 
Secured Mobile Application Development in Android, Blackberry & iOS
Secured Mobile Application Development in Android, Blackberry & iOSSecured Mobile Application Development in Android, Blackberry & iOS
Secured Mobile Application Development in Android, Blackberry & iOSAppin Delhi
 
Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?Effective
 
Native vs Web vs Hybrid Mobile Application Development
Native vs Web vs Hybrid Mobile Application DevelopmentNative vs Web vs Hybrid Mobile Application Development
Native vs Web vs Hybrid Mobile Application DevelopmentKosala Nuwan Perera
 
Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5Theresa Neil
 
Web App VS. Hybrid App VS. Native App?
Web App VS. Hybrid App VS. Native App?Web App VS. Hybrid App VS. Native App?
Web App VS. Hybrid App VS. Native App?Justin O'Neill
 

Tendances (20)

Cross Platform Mobile Application Architecture
Cross Platform Mobile Application ArchitectureCross Platform Mobile Application Architecture
Cross Platform Mobile Application Architecture
 
Native vs Hybrid - Demystifying the Technology Dilemma
Native vs Hybrid - Demystifying the Technology Dilemma Native vs Hybrid - Demystifying the Technology Dilemma
Native vs Hybrid - Demystifying the Technology Dilemma
 
Developing a Modern Mobile App Strategy
Developing a Modern Mobile App StrategyDeveloping a Modern Mobile App Strategy
Developing a Modern Mobile App Strategy
 
Native vs hybrid approach Mobile App Development
Native vs hybrid approach Mobile App DevelopmentNative vs hybrid approach Mobile App Development
Native vs hybrid approach Mobile App Development
 
Hybrid mobile apps
Hybrid mobile appsHybrid mobile apps
Hybrid mobile apps
 
An introduction to mobile app development and investing
An introduction to mobile app development and investingAn introduction to mobile app development and investing
An introduction to mobile app development and investing
 
Responsive Email Design
Responsive Email DesignResponsive Email Design
Responsive Email Design
 
Mobile Application Framework - OFM Canberra September 2014
Mobile Application Framework - OFM Canberra September 2014Mobile Application Framework - OFM Canberra September 2014
Mobile Application Framework - OFM Canberra September 2014
 
Native v s hybrid
Native v s hybridNative v s hybrid
Native v s hybrid
 
Hybrid mobile app development
Hybrid mobile app developmentHybrid mobile app development
Hybrid mobile app development
 
Developing Enterprise-Grade Mobile Applications
Developing Enterprise-Grade Mobile ApplicationsDeveloping Enterprise-Grade Mobile Applications
Developing Enterprise-Grade Mobile Applications
 
iPhone - Human Interface Guidelines
iPhone - Human Interface GuidelinesiPhone - Human Interface Guidelines
iPhone - Human Interface Guidelines
 
I like i phone and android but know .net
I like i phone and android but know .netI like i phone and android but know .net
I like i phone and android but know .net
 
Hybrid Mobile App
Hybrid Mobile AppHybrid Mobile App
Hybrid Mobile App
 
Hybrid vs Native Mobile App. Decide in 5 minutes!
Hybrid vs Native Mobile App. Decide in 5 minutes!Hybrid vs Native Mobile App. Decide in 5 minutes!
Hybrid vs Native Mobile App. Decide in 5 minutes!
 
Secured Mobile Application Development in Android, Blackberry & iOS
Secured Mobile Application Development in Android, Blackberry & iOSSecured Mobile Application Development in Android, Blackberry & iOS
Secured Mobile Application Development in Android, Blackberry & iOS
 
Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?
 
Native vs Web vs Hybrid Mobile Application Development
Native vs Web vs Hybrid Mobile Application DevelopmentNative vs Web vs Hybrid Mobile Application Development
Native vs Web vs Hybrid Mobile Application Development
 
Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5
 
Web App VS. Hybrid App VS. Native App?
Web App VS. Hybrid App VS. Native App?Web App VS. Hybrid App VS. Native App?
Web App VS. Hybrid App VS. Native App?
 

Similaire à Shape SharePoint 2013 for Mobile

The Design Dilemma of Mobile and SharePoint
The Design Dilemma of Mobile and SharePointThe Design Dilemma of Mobile and SharePoint
The Design Dilemma of Mobile and SharePointEric Overfield
 
Shape SharePoint 2013 for Mobile
Shape SharePoint 2013 for MobileShape SharePoint 2013 for Mobile
Shape SharePoint 2013 for MobileEric Overfield
 
Enhance SharePoint 2013 with Responsive Web Design
Enhance SharePoint 2013 with Responsive Web DesignEnhance SharePoint 2013 with Responsive Web Design
Enhance SharePoint 2013 with Responsive Web DesignEric Overfield
 
The Design Dilemma of Mobile and SharePoint
The Design Dilemma of Mobile and SharePointThe Design Dilemma of Mobile and SharePoint
The Design Dilemma of Mobile and SharePointEric Overfield
 
Enhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web DesignEnhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web DesignEric Overfield
 
Enhance SharePoint 2013 with Responsive Web Design
Enhance SharePoint 2013 with Responsive Web DesignEnhance SharePoint 2013 with Responsive Web Design
Enhance SharePoint 2013 with Responsive Web DesignEric Overfield
 
Enhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web DesignEnhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web DesignEric Overfield
 
Enhance SharePoint with Responsive Web Design
Enhance SharePoint with Responsive Web DesignEnhance SharePoint with Responsive Web Design
Enhance SharePoint with Responsive Web DesignEric Overfield
 
tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365 tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365 Fabio Franzini
 
5 Reasons to go Responsive
5 Reasons to go Responsive5 Reasons to go Responsive
5 Reasons to go ResponsiveTier10
 
Your SharePoint 2013 Branding Initiation
Your SharePoint 2013 Branding InitiationYour SharePoint 2013 Branding Initiation
Your SharePoint 2013 Branding InitiationEric Overfield
 
The 2013 Design Manager - From HTML to SharePoint
The 2013 Design Manager - From HTML to SharePointThe 2013 Design Manager - From HTML to SharePoint
The 2013 Design Manager - From HTML to SharePointEric Overfield
 
From mobile browser to mobile app
From mobile browser to mobile appFrom mobile browser to mobile app
From mobile browser to mobile appRyan Stewart
 
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5Christian Heindel
 
10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile AppsDoug Robinson
 
10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps 10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps Fresh Digital Group
 
Enhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web DesignEnhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web DesignEric Overfield
 
Mobile Design. Strategic Solutions.
Mobile Design. Strategic Solutions.Mobile Design. Strategic Solutions.
Mobile Design. Strategic Solutions.Theresa Neil
 
SharePoint 2013 Design manager – from HTML to SharePoint
SharePoint 2013 Design manager – from HTML to SharePointSharePoint 2013 Design manager – from HTML to SharePoint
SharePoint 2013 Design manager – from HTML to SharePointEric Overfield
 
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | OxiemGet Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | OxiemLessing-Flynn
 

Similaire à Shape SharePoint 2013 for Mobile (20)

The Design Dilemma of Mobile and SharePoint
The Design Dilemma of Mobile and SharePointThe Design Dilemma of Mobile and SharePoint
The Design Dilemma of Mobile and SharePoint
 
Shape SharePoint 2013 for Mobile
Shape SharePoint 2013 for MobileShape SharePoint 2013 for Mobile
Shape SharePoint 2013 for Mobile
 
Enhance SharePoint 2013 with Responsive Web Design
Enhance SharePoint 2013 with Responsive Web DesignEnhance SharePoint 2013 with Responsive Web Design
Enhance SharePoint 2013 with Responsive Web Design
 
The Design Dilemma of Mobile and SharePoint
The Design Dilemma of Mobile and SharePointThe Design Dilemma of Mobile and SharePoint
The Design Dilemma of Mobile and SharePoint
 
Enhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web DesignEnhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web Design
 
Enhance SharePoint 2013 with Responsive Web Design
Enhance SharePoint 2013 with Responsive Web DesignEnhance SharePoint 2013 with Responsive Web Design
Enhance SharePoint 2013 with Responsive Web Design
 
Enhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web DesignEnhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web Design
 
Enhance SharePoint with Responsive Web Design
Enhance SharePoint with Responsive Web DesignEnhance SharePoint with Responsive Web Design
Enhance SharePoint with Responsive Web Design
 
tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365 tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365
 
5 Reasons to go Responsive
5 Reasons to go Responsive5 Reasons to go Responsive
5 Reasons to go Responsive
 
Your SharePoint 2013 Branding Initiation
Your SharePoint 2013 Branding InitiationYour SharePoint 2013 Branding Initiation
Your SharePoint 2013 Branding Initiation
 
The 2013 Design Manager - From HTML to SharePoint
The 2013 Design Manager - From HTML to SharePointThe 2013 Design Manager - From HTML to SharePoint
The 2013 Design Manager - From HTML to SharePoint
 
From mobile browser to mobile app
From mobile browser to mobile appFrom mobile browser to mobile app
From mobile browser to mobile app
 
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5European SharePoint Conference: Mobile Applications for SharePoint using HTML5
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
 
10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps
 
10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps 10 Reasons to Adopt HTML5 for Mobile Apps
10 Reasons to Adopt HTML5 for Mobile Apps
 
Enhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web DesignEnhancing SharePoint with Responsive Web Design
Enhancing SharePoint with Responsive Web Design
 
Mobile Design. Strategic Solutions.
Mobile Design. Strategic Solutions.Mobile Design. Strategic Solutions.
Mobile Design. Strategic Solutions.
 
SharePoint 2013 Design manager – from HTML to SharePoint
SharePoint 2013 Design manager – from HTML to SharePointSharePoint 2013 Design manager – from HTML to SharePoint
SharePoint 2013 Design manager – from HTML to SharePoint
 
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | OxiemGet Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
 

Dernier

IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 

Dernier (20)

IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 

Shape SharePoint 2013 for Mobile

  • 1. For Mobile Eric Overfield SharePoint Advocate and Enthusiast PixelMill Shape SharePoint 2013
  • 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 2013 Mobile Views  SharePoint 2013 Device Channels  Other Solutions?  A Look at Responsive Web Design @EricOverfield - pixelmill.com
  • 4. The Web has Changed? @EricOverfield - pixelmill.com
  • 5. Not The Web @EricOverfield - pixelmill.com
  • 7. And Tomorrow? Watches? Game Devices? Printers? Who Knows? Toasters? Televisions? Cameras? @EricOverfield - pixelmill.com
  • 8. A Look at the Numbers @EricOverfield - pixelmill.com
  • 9. @EricOverfield - pixelmill.com Business Insider conference presentation shows (Blodget & Cocotas, 2012)
  • 17. @EricOverfield - pixelmill.com Mary Meeker, Kleiner Perkins Caulfield and Byers, '2012 Internet Trends Year-End Update'
  • 18. How Will SharePoint 2013 Help Us? @EricOverfield - pixelmill.com
  • 19. Out of the Box Device Channels Mobile Views Device Channels @EricOverfield - pixelmill.com
  • 20.  Classic View  Same as SharePoint 2010  Contemporary View  New to SharePoint 2013  Full Screen UI  Standard Site View Mobile Views @EricOverfield - pixelmill.com
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. Out of the Box Device Channels Mobile Views @EricOverfield - pixelmill.com
  • 26. 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
  • 27. Device Channels – An Example @EricOverfield - pixelmill.com
  • 28. 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
  • 29. 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
  • 30. What Else is New? Mobile Alerts Push Notifications Mobile Alerts @EricOverfield - pixelmill.com
  • 31. 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
  • 32. Push NotificationsLet’s See a ComparisonPush Notifications – Example Please @EricOverfield - pixelmill.com http://msdn.microsoft.com/en-us/library/jj923094.aspx
  • 33. What Else is New? Mobile Alerts Push Notifications @EricOverfield - pixelmill.com
  • 34.  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
  • 35. What Else is New? Mobile Alerts Push Notifications @EricOverfield - pixelmill.com Mobile Apps
  • 36.  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
  • 37. 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?
  • 38. @EricOverfield - pixelmill.com Reshape the Mobile Interface Responsive Web Design One Branding / UI Solution Device Independent
  • 39.  #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
  • 40. Fluid Grid – Flexible Media – CSS3 Media Queries @EricOverfield - pixelmill.com
  • 41. Push NotificationsLet’s See a ComparisonFluid (Flexible) Grid @EricOverfield - pixelmill.com i.e. 860 / 940 ~= 91.489361%
  • 43. Push NotificationsLet’s See a ComparisonFlexible Media @EricOverfield - pixelmill.com
  • 44. 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; } }
  • 48. 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
  • 49.  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
  • 50. 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
  • 51. @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
  • 52. 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
  • 53. 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)
  • 54. For Mobile Shape SharePoint 2013 Thank You Eric Overfield @EricOverfield ericoverfield.com eoverfield@pixelmill.com

Notes de l'éditeur

  1. Will make available on blog and twitter (slideshare.net), so if you remember one of those then you can always review everything we discuss
  2. 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.
  3. 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
  4. http://www.wcu.edu/ceap/houghton/edelcompeduc/ch1/ch1palmframes.html
  5. http://www.mequoda.com/articles/digital-magazine-publishing/web-usage-prediction-when-mobile-and-desktop-collide/
  6. http://www.seodailyupdates.com/2011/06/mobile-vs-desktop-internet-usage-stats.html
  7. http://www.bondgrp.com/blog/mobile-blog/(http://www.slideshare.net/G3Com/2012-b2b-buyer-behavior-survey-report)
  8. http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
  9. http://ibnlive.in.com/news/mobile-internet-usage-in-india-outstrips-traffic-from-desktops-report/308772-11.html
  10. Device Channels work only with Publishing Sites Allow for one interface for all desktops and another for most tablets let&apos;s say.Only 10 device channels per site collection, but do you really want to maintain 10 MP’s?
  11. Device Channels work only with Publishing Sites Allow for one interface for all desktops and another for most tablets let&apos;s say.Only 10 device channels per site collection, but do you really want to maintain 10 MP’s?
  12. Mississippi Department of IT