With Responsive Web Design Eric Overfield SharePoint Advocate and Enthusiast PixelMill Enhance SharePoint SPFest Denver 2014 – SPT Wednesday, September 24th – 3:20 PM – 4:30 PM #SPFestDen

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  The What and Why of Responsive Web Design (RWD)  Planning for Responsive Design  Join Response Web Design and SharePoint  SharePoint pixelmill.com

Responsive Web Design  A “new-ish” web design methodology  Addresses growing number of Internet devices  Tailored experience for any device  Limit resizing, panning and - pixelmill.com  The Key: All devices load the same page

@EricOverfield - pixelmill.com Progressive Enhancement Graceful Degradation Adaptive Web Design Responsive Web Design Desktop FirstMobile First Related Terms

Why We Need - pixelmill.com

So Many Different Devices  Screen size (viewport, proportions, resolution)  Functionality (clicks, hover, touch, swipe…)  Usability (can your site be used on any - 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

Responsive Design In - pixelmill.com

Fundamentals of - pixelmill.com

The 3 Pillars of Responsive Web Design Fluid Grid – Flexible Media – CSS3 Media Queries

@EricOverfield - pixelmill.com Fluid Grid

Push NotificationsLet’s See a Comparison Flexible - pixelmill.com  Flexible Images  Flexible Video  Proportional Text

Push NotificationsLet’s See a Comparison Media - pixelmill.com In-Line Media Query: Media Query in a screen and (min-width: 768px) { #banner { display: block; } Added in CSS 2.1, Enhanced with CSS3

Beyond the - pixelmill.com

Navigation  How will your navigation adapt to different viewports  Responsive navigation may require thought  Only basic SharePoint OOTB navigation is RWD friendly  Multi-level SP OOTB navigation relies on - pixelmill.com

Example RWD Navigation - - pixelmill.com

Mobile First  Build and code mobile interface first  Mobile friendly – progressively enhance  Forces us to concentrate on content  *Caveats for - pixelmill.com

Mobile First In - pixelmill.com

Planning For Responsive - pixelmill.com

Begin With Site Planning  This should be familiar...  Start with content / site purpose  Sitemap  Information Architecture  What’s different…  Wireframing – including for mobile devices  High fidelity mockups – including for mobile devices Design to the extremes, then fill in the - pixelmill.com

Always Remember SharePoint  What will be a part of the Master Page  How will Page Layout content be defined  How will you handle navigation  Will you include the quick launch on all - pixelmill.com

Responsive Friendly Wireframes and - pixelmill.com

Time to Code it Up A HTML - pixelmill.com

Your Own Grid Vs Existing Framework  Pre-built responsive and fluid grids  Saves time and resources  Many includes extras  i.e. collapsing - pixelmill.com

Frameworks Pluses and Minuses  May take time to learn framework  Not always SharePoint ready OOTB  Can save you a bunch of - pixelmill.com

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

A Responsive HTML - pixelmill.com

Joining RWD And - pixelmill.com

Convert Key Components to SharePoint  Distill page into Master Page and Page Layout(s)  Fix framework to work with SharePoint  Or use pre-converted RWD framework for SharePoint  Add SharePoint controls, snippets (2013) and - pixelmill.com

Convert a Responsive Prototype to - pixelmill.com

A Quick Review  The What and Why of Responsive Web Design (RWD)  Planning for Responsive Design  Join Response Web Design and - pixelmill.com

Coding Responsive Design  Responsive SharePoint at CodePlex  Free, Open Source Responsive SharePoint Frameworks  SharePoint 2010/2013 Ready   SP Blueprint (SharePoint 2013)  SharePoint 2013 responsive framework  A lean, custom grid  SharePoint and Responsive DesignPush NotificationsLet’s See a Comparison Responsive Frameworks and - pixelmill.com

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

And 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

Eric’s Practical Tips to #SPRWD  Use a prebuilt framework (SharePoint ready)  Set project budget, deliverables and expectations accordingly  Develop for the real world (will mobile users need to edit pages?)  Don’t break SharePoint!*  Mobile first (with caveats)  Be sure you are very comfortable with CSS/HTML  Test, and test, and test some more  Train content authors! RWD relies on groomed - 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 Thank You Eric ericoverfield.com SPFest Denver 2014 – SPT 205