How to Troubleshoot Apps for the Modern Connected Worker
The Design Dilemma of Mobile and SharePoint
1. The Design Dilemma of
Mobile and SharePoint
PWR 103
Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill
SharePoint Fest Denver – March 18th - 20th 2013
2. Introduction – Eric Overfield
Founder and SharePoint Branding/UI Lead, PixelMill
Speaker, Teacher, Advocate
Author, SharePoint Community Organizer
Located in Davis, CA
Co-author: “Pro SharePoint 2013 Branding and Responsive
Web Development” (Apress – May 2013)
ericoverfield.com
Order Your Copy
@EricOverfield
http://pxml.ly/226mwkj
3. What You Will Learn
How Accessing the Web has Changed
Differences Between Devices
Possible Solutions with SharePoint
What about SharePoint 2013?
@EricOverfield - pixelmill.com
4. The Web has Changed?
@EricOverfield - pixelmill.com
7. And Tomorrow?
Televisions?
Cameras? Who Knows?
Watches? Printers?
Game Devices? Toasters?
@EricOverfield - pixelmill.com
8. "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
9. How All Devices Differ
Screen Size
Functionality
Usability
@EricOverfield - pixelmill.com
10. How All Devices Differ
Screen Size
Functionality
Usability
@EricOverfield - pixelmill.com
18. 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
19. The Mobile Interface
SharePoint 2010 has a mobile interface
Allows access to documents, lists, calendars, search, SMS alerts
Controlled by USERAGENT
App_Browserscompat.browser
Custom Web Parts, _layouts likely won’t work
Difficult to customize
@EricOverfield - pixelmill.com
20. Code Once, Use Everywhere
Progressive Enhancement
Responsive Web Design
@EricOverfield - pixelmill.com
21. 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
22. 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
24. 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
25. Fluid Grid – Flexible Media – CSS3 Media Queries
@EricOverfield - pixelmill.com
33. 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
34. 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
36. PE (AWD?) vs RWD vs Separate Mobile
One site is difficult enough to maintain
SharePoint limits our options
Responsive Web Design is worth considering
Define Project
Limit HTML/CSS/JS/Media overhead
Find a CSS guru will be key
Use a Framework
@EricOverfield - pixelmill.com
38. 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
39. 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
40. The Best of Both Worlds
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?
@EricOverfield - pixelmill.com
41. 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
42. Resources
"Responsive Web Design" by Ethan Marcottes
http://pxml.ly/23fkmjd
Ethan Marcottes’ 20 Favorite Responsive Designs
http://pxml.ly/yqiyor
v5, the Responsive HTML5 Master Page for SharePoint 2010 by Kyle Schaeffer
http://pxml.ly/i3dbxre
SharePoint 2010 Responsive Web design Template by Luis Kerr
http://pxml.ly/xvr2ny
Responsive Frameworks for SharePoint 2010 and 2013
http://responsivesharepoint.codeplex.com
Configure SharePoint Server 2010 for Mobile Device Access
http://pxml.ly/vh3hhca
html5shiv
http://pxml.ly/uzcz32
Modernizr
http://modernizr.com
css3-mediaqueries-js
http://pxml.ly/zcw2jb2 @EricOverfield - pixelmill.com
43. The Design Dilemma of
Mobile and SharePoint
PWR 103
Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixelmill.com
Notas do Editor
Slides will be available from blog and twitterOverview talk of SharePoint and new devices Light on tech and howto Don’t worry tech folks, many resources at end.
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
MrZeldman founded A List Apart, best practices and innovations in web design.sure, you can zoom in on many smart phones or tablets, but what if you can make tailored experience for each device?Modern devices share basic ability with css, js though which his a plus
Let’s look at what we have OOTB as well as with just minor modifications.Stay away from total code re-write
Build particular interfaces for specific devices SP 2010 has mobile detection, but it's not good, and difficult to brand What about 2013? We will get to thatDesign and code an interface that can scale itself to different devices
Based only on specific user agentsMobile pages do not use master pages, you can modify redirection create mobile control template based on site definition create a mobile adapter for web partLeaving a lot out because too basic
Html is very clean and simpleUsing javascript to determine functionality and add on features as allowed.Yahoo, amazon, etc
A true PE site should work without JS, SP will not do that.Tables and inline styles breaks the idea of separating content and presentation.
fluid proportion-based grids (which use percentages pixels) to adapt the layout to the viewing environmentAll clients effectively load the entire page but using css, hides or replaces elements to tailor the experience to the screen.DOES NOT USE USERAGENT, browser detection, rather works of screen width.Early adopter AIDS.gov
Mississippi Department of IT
Midwest Tool Manufacture
European Alternative Energy Company
Uses css3 media queries and js, which is ok with SP.Turn mobile view off in compat.browser found in web applications directory. Look it up.Issues are on next slide.
Also a lot of overhead, but SP already has a lot of that as well.Not IE7 and IE8 friendlyRequire CSS3? There is a js ability with jQuery’s help.Does a mobile user need the same information as a desktop user?Adding information vs consuming information. Less real estate and is the navigation necessarily the same?http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/
Coding techniques to get around some overhead combine files, minimize scripts use wrapper divs that keep large images off mobile browsers
Responsive Design is not for the faint of heartSPD (some limits), Visual Studio, Firebug, Browser issues
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?
In 2010 I suggest RWD as it is the most compatible with SP allows for the targeting of most devices, Needs one Master pageIn 2013 still use RWD, but you can think about DC for particular devices if the need arises One primary interface that will work with most devices have the ability to allow a target for a few particular devices easier to manage 2-3 branding efforts rather than many if you attempted to tailor your site to all devices.
Thank You!Don’t forget to check out my blog where you can download this presentation or the recording.Easiest way to get to the material I referenced