This document discusses applying responsive design techniques to SharePoint sites. It covers challenges with the out-of-the-box SharePoint experience on mobile, and strategies for taking a responsive approach, including building a fluid grid layout, using media queries, and prioritizing mobile-first content. The goal is to translate designs across viewports for a better user experience on any device.

1. For SharePoint Sites

2. • Co-Founder of SPD Labs
• SharePoint UI Developer
• Based in Asheville, NC @spdlabs
facebook.com/spdlabs
• Services
– UX & Design
– Content Strategy
– Branding / Identity / Design

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

4. The Shift
• Mobile access as the
default access point is on
the rise
• Mobile devices are taking
over the landscape
• The Social & Mobile Link

6. • 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

7. • Media Queries
– Used to scope your styles
• Flexible Grid-Based Layout
• Flexible Images & Media
– Preventing overflow

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

9. • Flexible Dimensions & Type
– Target ÷ Context = Result
• Fluid Layout
– Grid-based system
• Flexible Images
– img{
max-width:100%;
}

10. • 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.

11. • 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”

12. • 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!

13. Applying Responsive Design Techniques in SharePoint

14. • 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!

16. • Consists Of…
– HTML
– CSS
– ASP.NET Master Pages
– Page Layouts
– jQuery/Javascript
• Extending Functionality
– Custom Web Parts
– Custom User Controls
– Branding Features

17. • Blueprint for Design & Layout
• Includes
– Static Text
– HTML
– Server Controls
– ContentPlaceHolder Controls
• Define regions of replaceable content within the
Master Page

18. • 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.

19. • 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.

20. • 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.

21. • 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

22. • 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

23. • Responsive Prototype
– Fluid Grid Layout
– HTML5 & CSS3
• Built in SharePoint
2010
– Designed for Public-
Facing
– Using Publishing
Features

24. Lorem Ipsum Responsive SharePoint Site

25. • Our Work
– Innovative-e
– Sharing The Point
• Others
– Brightstarr

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

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

28. 



28 | SharePoint Saturday St. Louis 2012

29. Thanks to Our Sponsors!
Platinum
29 | SharePoint Saturday St. Louis 2012

30. Thanks to Our Sponsors!
30 | SharePoint Saturday St. Louis 2012