Enhance SharePoint 2013 With Responsive Web Design Enhance SharePoint 2013 With Responsive Web Design Eric Overfield

With Responsive Web Design Eric Overfield SharePoint Advocate and Enthusiast PixelMill Enhance SharePoint

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 – June 12 th, 2013) Co-author: “Black Magic Solutions for White Hat SharePoint” (August, 2013)

What You Will Learn  What is Responsive Web Design (RWD)  Why Should We Use It  Planning for Responsive Design  Join Response Web Design and SharePoint  SharePoint 2013 RWD - 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

A Grid – In Action

Push NotificationsLet’s See a Comparison Fluid (Flexible) - pixelmill.com i.e. 860 / 940 ~= %

Push NotificationsLet’s See a Comparison Flexible - pixelmill.com

Push NotificationsLet’s See a Comparison Media - pixelmill.com Load a stylesheet in HTML: <link rel=“stylesheet” type=“text/css” href=“css/styles.css” media=“screen and (min-width: 768px)” /> Media Queries in a screen and (min-width: 768px) { #banner { display: block; } Added in CSS 2.1, Enhanced with CSS3

Responsive Design In - pixelmill.com

Who - pixelmill.com The Mobile Revolution

Not The - pixelmill.com

Today’s - pixelmill.com

And Tomorrow? Watches? Game Devices? Printers? Who Knows? Toasters? Televisions? Cameras? ? - pixelmill.com

Business Insider conference presentation shows (Blodget & Cocotas, 2012)

@EricOverfield - pixelmill.com

- pixelmill.com Mobile vs Desktop Traffic

"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

What About Mobile - pixelmill.com

SharePoint Mobile Apps Freely Available: SharePoint Newsfeed App Skydrive Pro - pixelmill.com Third Party: SharePlus by Infragistics's Briefcase by Colligo Mobile Entrée by H3 Solutions Filamente Mobile SharePoint App And more…

Apps and RWD serve different - pixelmill.com Apps -> particular function Mobile Collaboration Mobile Document Sharing / Offline Viewing RWD -> general site / portal Mobile Friendly Website

Planning For Responsive - pixelmill.com

Our Responsive Goals  Single site  Serve a variety of Viewports  And tailored to each - pixelmill.com  Future Friendly (i.e. no separate mobile)

Responsive Drawbacks  Desktop vs. Mobile content  Content - pixelmill.com  Maybe SharePoint can help?  Device Channels  A lot more work

Start with - pixelmill.com

Mobile First Information Architecture Content Rollups Search Driven Content Content is - pixelmill.com

Design - pixelmill.com to the

@EricOverfield - pixelmill.com

Navigation  Responsive Navigation the most difficult decision  SharePoint Navigation is not Responsive - pixelmill.com  SharePoint relies on hover event / unfriendly HTML  Static Navigation vs. SharePoint Navigation  note: Custom Responsive Navigation will require JS/jQuery

Floating Drop down Collapse Off Canvas Others? Responsive - pixelmill.com

Floating Navigation

Floating Drop down Collapse Off Canvas Others? Responsive - pixelmill.com

Dropdown Navigation

Floating Drop down Collapsing Off Canvas Others? Responsive - pixelmill.com

Collapsing Navigation

Floating Drop down Collapsing Off Canvas Others? Responsive - pixelmill.com

Off Canvas Navigation

Floating Drop down Collapsing Off Canvas Others? Responsive - pixelmill.com

No two projects are the same Hide and Cry Overlay Footer Navigation Global Navigation jQuery or no - pixelmill.com

Time to Code it - pixelmill.com

Frameworks  Pre-Built Responsive and Fluid Grids  Saves time and - pixelmill.com  Many include extras  i.e. Collapsing navigation

Framework Drawbacks  May take time to learn framework  Not always SharePoint - pixelmill.com  Might not be the way “you” would do it  But - can save a bunch of time

Twitter Bootstrap Zurb Foundation Skeleton Less Framework and so many - pixelmill.com

Coding Responsive Design  Responsive SharePoint at CodePlex  Free, Open Source Responsive SharePoint Frameworks  SharePoint 2013 Ready   SP Blueprint  SharePoint and Responsive DesignPush NotificationsLet’s See a Comparison Responsive Frameworks and - pixelmill.com

Mobile First  Build Mobile interface first  Forces us to concentrate on content  Helps control some - pixelmill.com  Mobile Interface not great for entering content  May not be preferable with some development processes  Not IE7/IE8 friendly

Mobile First In - pixelmill.com

Mobile First and IE8 / IE7  Will only load mobile - pixelmill.com  Fix with CSS Media Queries  JS Library:  So we need to use JS?  Or an IE8- stylesheet

Build to the Design not the - pixelmill.com

Become Device Independent  Base breakpoints based on design  Allows for any device  Use a background image to - pixelmill.com  Temporary background image with columns  Start with 300 pixel block  Then 50 to 100 pixel columns through 1200 pixels total

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

Device Channels – An - pixelmill.com

- pixelmill.com

Eric’s Practical Tips to #SPRWD  Start with a - pixelmill.com  Mobile first (most likely)  Set your project expectations accordingly  Test your design on primary devices/browsers  Be sure you are very comfortable with CSS/HTML  Don’t stop learning (Responsive SharePoint?)

Build towards progress Perfection does not yet exist There is no silver - pixelmill.com

Resources "Responsive Web Design" by Ethan Marcotte 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 Marcotte’s 20 Favorite Responsive Designs Configure SharePoint Server 2010 for Mobile Device Access html5shiv Modernizr css3-mediaqueries-js - pixelmill.com

Resources Twitter Bootstrap Implementing Off Canvas Navigation Less Framework Skeleton Framework Zurb Foundation - pixelmill.com Order Your Copy “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 12 th, 2013)

With Responsive Web Design Enhance SharePoint 2013 Thank You Eric ericoverfield.com

Special Thanks to our Platinum Sponsor …and our Gold Sponsor