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

Introduction – Eric Overfield  Founder and SharePoint Branding/UI Lead, PixelMill  Speaker, Teacher, Advocate  Author, SharePoint Community Organizer  Located in Davis, CA Order Your Copy 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 - pixelmill.com

The Web has - pixelmill.com

Not The - pixelmill.com

Today’s - pixelmill.com

And Tomorrow? Watches? Game Devices? Printers? Who Knows? Toasters? Televisions? Cameras? ? - 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 - pixelmill.com

Screen Size Functionality Usability How All Devices - pixelmill.com

Screen Size Functionality Usability How All Devices - pixelmill.com

Screen Size Height – Width – Resolution – - pixelmill.com

Screen Size Functionality Usability How All Devices - pixelmill.com

Not all devices are created equal. Clicks Mouse-overs Touch Swipe Plugin - pixelmill.com

Screen Size Functionality Usability How All Devices - pixelmill.com

Load Time Content Placement Screen Utilization Navigation - pixelmill.com

Embrace the Unforeseeable Build Towards the Future, not the - pixelmill.com

What We Can - pixelmill.com

Available Options  Device Specific Interfaces  SharePoint Mobile Detection  SharePoint 2013 – Device Channels  One design to rule them all, one design to bind them  Responsive Web Design - 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 - pixelmill.com

Code Once, Use Everywhere Progressive Enhancement Responsive Web - pixelmill.com

Progressive Enhancement  #1 trend for net Magazine  Mobile First Strategy  Coined by Steven Champeon in 2003  Content first, then add styling  Separate Content from - 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 - pixelmill.com

Responsive Web - pixelmill.com

Responsive Web Design  #2 trend for 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 - pixelmill.com

Fluid Grid – Flexible Media – CSS3 Media - pixelmill.com

Responsive In - pixelmill.com

- pixelmill.com

- pixelmill.com

- pixelmill.com

- pixelmill.com

- 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 - 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 - pixelmill.com

What to - 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 - pixelmill.com

And SharePoint - pixelmill.com

Device Channels Anyone?  New to SharePoint 2013  Interfaces tailored and maps to specific device(s)  Custom Master Pages per Channel  Custom - 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 - 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 - 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 - pixelmill.com

Resources "Responsive Web Design" by Ethan Marcottes Responsive Frameworks for SharePoint 2010 and SharePoint 2010 Responsive Web design Template by Luis Kerr v5, the Responsive HTML5 Master Page for SharePoint 2010 by Kyle Schaeffer Ethan Marcottes’ 20 Favorite Responsive Designs Configure SharePoint Server 2010 for Mobile Device Access html5shiv Modernizr css3-mediaqueries-js - pixelmill.com

Mobile and SharePoint The Design Dilemma of PWR 103 Eric ericoverfield.com Thank You