SlideShare a Scribd company logo

Responsive design SharePoint

•
•
S
spdlabs

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 of 30
Download to read offline
For SharePoint Sites
• Co-Founder of SPD Labs • SharePoint UI Developer • Based in Asheville, NC @spdlabs facebook.com/spdlabs • Services – UX & Design – Content Strategy – Branding / Identity / Design
• 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
Responsive design SharePoint
• 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 Type @media screen and (min-width: 1024px) { body { font-size: 100%; } 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!
Responsive design SharePoint
• 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
Thanks to Our Sponsors! Platinum 29 | SharePoint Saturday St. Louis 2012
Thanks to Our Sponsors! 30 | SharePoint Saturday St. Louis 2012

More Related Content

Responsive design SharePoint

  • 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