For SharePoint Sites

• Co-Founder of SPD Labs • SharePoint UI Developer • Based in Asheville, NC • Services

– UX & Design – Content Strategy – Branding / Identity / Design

@spdlabs

facebook.com/spdlabs

• Increasingly Variable Interaction – More Device Types – Mobile Devices – Scaling Up & Down – Unpredictable Bandwidth – Shift in Desired User Experience

The Shift • Mobile access as the

default access point is on the rise

• Mobile devices are taking over the landscape

• The Social & Mobile Link

• Motivated by Change in Context – People experience the web differently – People have different expectations for…

• What they want delivered on the web • When they want to access that content • How the content is delivered

– Demanding users with more demands and lower tolerance than ever before

• Media Queries – Used to scope your styles

• Flexible Grid-Based Layout • Flexible Images & Media

– Preventing overflow

@media screen and (min-width: 1024px) { body { font-size: 100%; } }

Media Type

Query

• Flexible Dimensions & Type – Target ÷ Context = Result

• Fluid Layout – Grid-based system

• Flexible Images – img{

max-width:100%; }

• Build Up, Not Down • Design for Mobile Devices First • Forces Prioritization of Content • Drives Better Content Strategy

– More Sustainable – Well Thought Out

• Harness Mobile Platform Capabilities – Touch, GPS, etc.

• Translate your designs from one viewport to the next

• Allows you to target the right content in the right context

• Better user experience • Preferred over “mobile

versions”

• Responsive Design is an approach and a work in progress.

• Strategies & Principles Are Evolving • Statistics Show the Need for Mobile Strategy • Focus on Gathering User-Driven Results

– If you build it, they will come and they will let you know what sucks!

Applying Responsive Design Techniques in SharePoint

• Not Responsive • Best Suited for “Portals” • Easy to Manage Content • Easy to Make Content Look Really Ugly! • Not Adaptive for Smaller Screens • OOTB has a Mobile Version Which is Only

Good For Browsing List Items!

• Consists Of… – HTML – CSS – ASP.NET Master Pages – Page Layouts – jQuery/Javascript

• Extending Functionality – Custom Web Parts – Custom User Controls – Branding Features

• Blueprint for Design & Layout • Includes

– Static Text – HTML – Server Controls – ContentPlaceHolder Controls

• Define regions of replaceable content within the Master Page

• Provides a fluid framework for all pages/page layouts in the site

• References CSS3 stylesheet that uses media queries and relative sizing to make your content follow a fluid layout

• References javascript, jQuery, HTML5 Shiv to support older IE Versions, etc.

• Context – What needs to be responsive and what doesn’t? – Who is this site for – Intranet/Extranet/Internet – Timeline & Budget

• Depth – What site types do you need to support? – How much control over the UX do you have?

• Revamping the way users interact with SharePoint should tie into your responsive design planning.

• Don’t expect to have the same SharePoint with responsiveness added.

• Not everything should be responsive. – Users won’t be editing datasheet views on their mobile

phones. • Not everything can be responsive right now.

– SharePoint is not designed for content owners to manage the site from a mobile device. If you’re using SharePoint for DMS and Collaboration, it’s primarily a desktop application.

– The UI functionality is not designed for touch screen interaction.

– We will inevitably meet roadblocks that require creative workarounds and imperfect solutions.

– Remember you are building a responsive site on SharePoint, not the responsive SharePoint platform.

• Narrow your focus. – Publishing Sites, Team Sites, Blogs

• Let it be. – Leave as much of the inner workings alone as

possible. • Settings pages, document management, datasheets.

– For public-facing sites make the _layouts area of your site stick to v4.master • Nobody needs to access that outside desktop

environment. Think of it as your Admin Panel

• Content Strategy • UI Design • Choose a Fluid Grid or Build One

– http://foundation.zurb.com/ – http://cssgrid.net/ – http://twitter.github.com/bootstrap/

• Prototype • Merge

• Responsive Prototype – Fluid Grid Layout – HTML5 & CSS3

• Built in SharePoint 2010 – Designed for Public-

Facing – Using Publishing

Features

Lorem Ipsum Responsive SharePoint Site

• Our Work – Innovative-e – Sharing The Point

• Others – Brightstarr

• Responsive Web Design - Ethan Marcotte • MSDN - Responsive Web Design • SharePoint Responsive Design - Dan Haywood • Responsive Prototyping With Foundation • Kyle Schaeffer’s V5 Master

• CSS3 Media Queries • A List Apart • Wireframing For Responsive Design • MediaQueri.es

28 | SharePoint Saturday St. Louis 2012

29 | SharePoint Saturday St. Louis 2012

Thanks to Our Sponsors!

Platinum

30 | SharePoint Saturday St. Louis 2012

Thanks to Our Sponsors!