The Design Dilemma of Mobile and SharePoint

43
Mobile and SharePoint Eric Overfield SharePoint Advocate and Enthusiast PixelMill SharePoint Fest Denver – March 18 th - 20 th 2013 The Design Dilemma of PWR 103

description

Session PWR 103 from SharePoint Fest Denver 2013.

Transcript of The Design Dilemma of Mobile and SharePoint

Page 1: The Design Dilemma of Mobile and SharePoint

Mobile and SharePoint

Eric OverfieldSharePoint Advocate and Enthusiast

PixelMill

SharePoint Fest Denver – March 18th - 20th 2013

The Design Dilemma of

PWR 103

Page 2: The Design Dilemma of Mobile and SharePoint

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)

Page 3: The Design Dilemma of Mobile and SharePoint

What You Will Learn

How Accessing the Web has

Changed

Differences Between Devices

Possible Solutions with SharePoint

What about SharePoint 2013?

@EricOverfield - pixelmill.com

Page 4: The Design Dilemma of Mobile and SharePoint

The Web has Changed?

@EricOverfield - pixelmill.com

Page 5: The Design Dilemma of Mobile and SharePoint

Not The Web

@EricOverfield - pixelmill.com

Page 6: The Design Dilemma of Mobile and SharePoint

Today’s Web

@EricOverfield - pixelmill.com

Page 7: The Design Dilemma of Mobile and SharePoint

And Tomorrow?

Watches?

Game Devices?

Printers?

Who Knows?

Toasters?

Televisions?

Cameras? ??@EricOverfield - pixelmill.com

Page 8: The Design Dilemma of Mobile and SharePoint

"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

Page 9: The Design Dilemma of Mobile and SharePoint

Screen Size

Functionality

Usability

How All Devices Differ

@EricOverfield - pixelmill.com

Page 10: The Design Dilemma of Mobile and SharePoint

Screen Size

Functionality

Usability

How All Devices Differ

@EricOverfield - pixelmill.com

Page 11: The Design Dilemma of Mobile and SharePoint

Screen Size

Height – Width – Resolution – Layout@EricOverfield - pixelmill.com

Page 12: The Design Dilemma of Mobile and SharePoint

Screen Size

Functionality

Usability

How All Devices Differ

@EricOverfield - pixelmill.com

Page 13: The Design Dilemma of Mobile and SharePoint

Not all devices are created equal.

Clicks

Mouse-overs

Touch

Swipe

Plugin Support

@EricOverfield - pixelmill.com

Page 14: The Design Dilemma of Mobile and SharePoint

Screen Size

Functionality

Usability

How All Devices Differ

@EricOverfield - pixelmill.com

Page 15: The Design Dilemma of Mobile and SharePoint

Load Time

Content Placement

Screen Utilization

Navigation

Searchability@EricOverfield - pixelmill.com

Page 16: The Design Dilemma of Mobile and SharePoint

Embrace the

UnforeseeableBuild Towards the Future, not the

Past

@EricOverfield - pixelmill.com

Page 17: The Design Dilemma of Mobile and SharePoint

What We Can Do

@EricOverfield - pixelmill.com

Page 18: The Design Dilemma of Mobile and SharePoint

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

Page 19: The Design Dilemma of Mobile and SharePoint

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

Page 20: The Design Dilemma of Mobile and SharePoint

Code Once, Use Everywhere

Progressive Enhancement

Responsive Web Design

@EricOverfield - pixelmill.com

Page 21: The Design Dilemma of Mobile and SharePoint

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

Page 22: The Design Dilemma of Mobile and SharePoint

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

Page 23: The Design Dilemma of Mobile and SharePoint

Responsive Web Design

@EricOverfield - pixelmill.com

Page 24: The Design Dilemma of Mobile and SharePoint

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

Page 25: The Design Dilemma of Mobile and SharePoint

Fluid Grid – Flexible Media – CSS3 Media Queries @EricOverfield - pixelmill.com

Page 26: The Design Dilemma of Mobile and SharePoint

Responsive In Action

@EricOverfield - pixelmill.com

Page 27: The Design Dilemma of Mobile and SharePoint

www.its.ms.gov

@EricOverfield - pixelmill.com

Page 28: The Design Dilemma of Mobile and SharePoint

@EricOverfield - pixelmill.com

Page 29: The Design Dilemma of Mobile and SharePoint

www.ariensco.com

@EricOverfield - pixelmill.com

Page 30: The Design Dilemma of Mobile and SharePoint

www.ariensco.com

@EricOverfield - pixelmill.com

Page 31: The Design Dilemma of Mobile and SharePoint

www.gse.it

@EricOverfield - pixelmill.com

Page 32: The Design Dilemma of Mobile and SharePoint

www.gse.it

@EricOverfield - pixelmill.com

Page 33: The Design Dilemma of Mobile and SharePoint

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

Page 34: The Design Dilemma of Mobile and SharePoint

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

Page 35: The Design Dilemma of Mobile and SharePoint

What to Do

@EricOverfield - pixelmill.com

Page 36: The Design Dilemma of Mobile and SharePoint

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

Page 37: The Design Dilemma of Mobile and SharePoint

And SharePoint 2013?

@EricOverfield - pixelmill.com

Page 38: The Design Dilemma of Mobile and SharePoint

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

Page 39: The Design Dilemma of Mobile and SharePoint

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

Page 40: The Design Dilemma of Mobile and SharePoint

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

Page 41: The Design Dilemma of Mobile and SharePoint

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

Page 42: The Design Dilemma of Mobile and SharePoint

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

Page 43: The Design Dilemma of Mobile and SharePoint

Mobile and SharePoint

The Design Dilemma of

PWR 103

Eric Overfield@EricOverfield

[email protected]

Thank You