Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive design SharePoint

3,174 views

Published on

Published in: Technology, Design

Responsive design SharePoint

  1. 1. For SharePoint Sites
  2. 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. 3. • Increasingly Variable Interaction – More Device Types – Mobile Devices – Scaling Up & Down – Unpredictable Bandwidth – Shift in Desired User Experience
  4. 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
  5. 5. • 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
  6. 6. • Media Queries – Used to scope your styles• Flexible Grid-Based Layout• Flexible Images & Media – Preventing overflow
  7. 7. Media Type@media screen and (min-width: 1024px) { body { font-size: 100%; } Query}
  8. 8. • Flexible Dimensions & Type – Target ÷ Context = Result• Fluid Layout – Grid-based system• Flexible Images – img{ max-width:100%; }
  9. 9. • 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.
  10. 10. • 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”
  11. 11. • 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!
  12. 12. Applying Responsive Design Techniques in SharePoint
  13. 13. • 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!
  14. 14. • Consists Of… – HTML – CSS – ASP.NET Master Pages – Page Layouts – jQuery/Javascript• Extending Functionality – Custom Web Parts – Custom User Controls – Branding Features
  15. 15. • Blueprint for Design & Layout• Includes – Static Text – HTML – Server Controls – ContentPlaceHolder Controls • Define regions of replaceable content within the Master Page
  16. 16. • 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.
  17. 17. • 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.
  18. 18. • 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.
  19. 19. • 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
  20. 20. • 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
  21. 21. • Responsive Prototype – Fluid Grid Layout – HTML5 & CSS3• Built in SharePoint 2010 – Designed for Public- Facing – Using Publishing Features
  22. 22. Lorem Ipsum Responsive SharePoint Site
  23. 23. • Our Work – Innovative-e – Sharing The Point• Others – Brightstarr
  24. 24. • Responsive Web Design - Ethan Marcotte• MSDN - Responsive Web Design• SharePoint Responsive Design - Dan Haywood• Responsive Prototyping With Foundation• Kyle Schaeffer’s V5 Master
  25. 25. • CSS3 Media Queries• A List Apart• Wireframing For Responsive Design• MediaQueri.es
  26. 26.  28 | SharePoint Saturday St. Louis 2012
  27. 27. Thanks to Our Sponsors! Platinum 29 | SharePoint Saturday St. Louis 2012
  28. 28. Thanks to Our Sponsors! 30 | SharePoint Saturday St. Louis 2012

×