Post on 29-Nov-2014
description
Mobile and SharePoint
Eric OverfieldSharePoint Advocate and Enthusiast
PixelMill
SharePoint Fest Denver – March 18th - 20th 2013
The Design Dilemma of
PWR 103
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/226mwkj
Co-author: “Pro SharePoint 2013 Branding and
Responsive Web Development” (Apress – May
2013)
What You Will Learn
How Accessing the Web has
Changed
Differences Between Devices
Possible Solutions with SharePoint
What about SharePoint 2013?
@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
"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
Screen Size
Functionality
Usability
How All Devices Differ
@EricOverfield - pixelmill.com
Screen Size
Functionality
Usability
How All Devices Differ
@EricOverfield - pixelmill.com
Screen Size
Height – Width – Resolution – Layout@EricOverfield - pixelmill.com
Screen Size
Functionality
Usability
How All Devices Differ
@EricOverfield - pixelmill.com
Not all devices are created equal.
Clicks
Mouse-overs
Touch
Swipe
Plugin Support
@EricOverfield - pixelmill.com
Screen Size
Functionality
Usability
How All Devices Differ
@EricOverfield - pixelmill.com
Load Time
Content Placement
Screen Utilization
Navigation
Searchability@EricOverfield - pixelmill.com
Embrace the
UnforeseeableBuild Towards the Future, not the
Past
@EricOverfield - pixelmill.com
What We Can Do
@EricOverfield - pixelmill.com
Available Options
Device Specific Interfaces
SharePoint 2010 - Mobile Detection
SharePoint 2013 – Device Channels
One design to rule them all, one design to bind
them
Responsive Web Design Anyone?
@EricOverfield - pixelmill.com
The Mobile Interface
SharePoint 2010 has a mobile interface
Allows access to documents, lists, calendars, search, SMS
alerts
Controlled by USERAGENT
App_Browsers\compat.browser
Custom Web Parts, _layouts likely won’t work
Difficult to customize
@EricOverfield - pixelmill.com
Code Once, Use Everywhere
Progressive Enhancement
Responsive Web Design
@EricOverfield - pixelmill.com
Progressive Enhancement
#1 trend for 2012 - .net Magazine
Mobile First Strategy
Coined by Steven Champeon in 2003
Content first, then add styling
Separate Content from Presentation
@EricOverfield - pixelmill.com
SharePoint and Progressive Enhancement
SharePoint was not built with PE in mind
JavaScript and SharePoint
Too much presentation baked into html
i.e. Tables, Inline styles
But Mobile first is useful!
@EricOverfield - pixelmill.com
Responsive Web Design
@EricOverfield - pixelmill.com
Responsive Web Design
#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
@EricOverfield - pixelmill.com
Fluid Grid – Flexible Media – CSS3 Media Queries @EricOverfield - pixelmill.com
Responsive In Action
@EricOverfield - pixelmill.com
www.its.ms.gov
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
www.ariensco.com
@EricOverfield - pixelmill.com
www.ariensco.com
@EricOverfield - pixelmill.com
www.gse.it
@EricOverfield - pixelmill.com
www.gse.it
@EricOverfield - pixelmill.com
SharePoint and Responsive Design
Uses CSS3 (media queries) and maybe HTML5.
SharePoint already has a mobile view
Configure with compat.browser
Generally only one Master Page for all devices.
Wide lists, OOTB Layouts, Site Settings not mobile
friendly
Flexible Media (Images) May Break Ribbon
Issues with RWD itself!
@EricOverfield - pixelmill.com
SharePoint and Responsive Design
Additional overhead
Does require CSS3 (SharePoint 2010 not CSS3
Ready)
Bandwidth Concerns
Are mobile users and desktop users the same?
User site requirements
@EricOverfield - pixelmill.com
What to Do
@EricOverfield - pixelmill.com
PE (AWD?) vs RWD vs Separate Mobile
Define Project
Limit HTML/CSS/JS/Media overhead
Find a CSS guru will be key
Use a Framework
Responsive Web Design is worth considering
SharePoint limits our options
One site is difficult enough to maintain
@EricOverfield - pixelmill.com
And SharePoint 2013?
@EricOverfield - pixelmill.com
Device Channels Anyone?
New to SharePoint 2013
Interfaces tailored and maps to specific device(s)
Custom Master Pages per Channel
Custom DeviceChannelPanels
@EricOverfield - pixelmill.com
Device Channels – The Good
Tailored interfaces!
Device Channels – The Bad
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
Responsive Design and Device Channels
Build a Responsive site for all devices
Use DeviceChannelPanels
Create a Device Channel for special cases
But when will you upgrade?
The Best of Both Worlds
@EricOverfield - pixelmill.com
Summary
Build towards the future, not the past
Mobile devices will penetrate the corporate
firewall SharePoint 2010 – Responsive Design
SharePoint 2013 – Responsive Design w/ Device
Channels
@EricOverfield - pixelmill.com
Resources
"Responsive Web Design" by Ethan Marcottes
http://pxml.ly/23fkmjd
Responsive Frameworks for SharePoint 2010 and 2013
http://responsivesharepoint.codeplex.com
SharePoint 2010 Responsive Web design Template by Luis Kerr
http://pxml.ly/xvr2ny
v5, the Responsive HTML5 Master Page for SharePoint 2010 by Kyle Schaeffer
http://pxml.ly/i3dbxre
Ethan Marcottes’ 20 Favorite Responsive Designs
http://pxml.ly/yqiyor
Configure SharePoint Server 2010 for Mobile Device Access
http://pxml.ly/vh3hhca
html5shiv
http://pxml.ly/uzcz32
Modernizr
http://modernizr.comcss3-mediaqueries-js
http://pxml.ly/zcw2jb2 @EricOverfield - pixelmill.com
Mobile and SharePoint
The Design Dilemma of
PWR 103
Eric Overfield@EricOverfield
ericoverfield.comeoverfield@pixelmill.com
Thank You