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 for SharePoint

8,849 views

Published on

Creating designs that will respond and work with multiple browser and device types has become more and more important. In this session we will examine the concepts behind Responsive Design and how you can and should apply them to SharePoint.

Published in: Technology, Design
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ▲▲▲ https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Responsive Design for SharePoint

  1. 1. Planning for SharePoint Branding SPS ATL - 2013 Cathy Dew
  2. 2. Speaker Bio Cathy Dew  Senior Engineer at Planet Technologies  Graphic Designer, Consultant and SharePoint MVP  Over 6 years of SharePoint branding experience  Author: SharePoint 2010: Six in One  catpaint1 on Twitter
  3. 3. Agenda  Intro to responsive design  When, where and if you should create a responsive design.  Responsive design discussions  Responsive and SharePoint 2013  Two ways to create responsive designs
  4. 4. What is it?  Design and Development should respond to the user’s behavior and environment based on screen size, platform and orientation  Consists of a    Mix of Flexible Grids and Layouts Flexible Images and Media CSS and Media Queries
  5. 5. Device Shapes/Sizes
  6. 6. Grid Based Layout
  7. 7. Common Grid Systems  960 Grid System  Twitter Bootstrap  Grid System Generator  Flexible CSS Grid  Many more… “The grid system is an aid, not a guarantee. It permits a number of possible uses…” -Josef MullerBrockman
  8. 8. Grid systems explained…  Do    I really have to use a grid system? These are meant to be a starting point something to help you in creating a flexible site. It’s helpful – but not necessary Make your own, it all depends on your project and what your client needs are.
  9. 9. Making it Flexible  Taking your design beyond Flexible Grids allows you to make a responsive site with images that resize and layouts based on media
  10. 10. Flexible Images and Media  img { max-width: 100%; }  Can apply to video and other rich media  Has limitations
  11. 11. Max-width Limitations  IE 6 and below isn’t supported  Broader issues with Windows   IE 7 and lower Firefox 2 and lower  Windows 7 and Higher Fixed 
  12. 12. Flexible Images & Backgrounds  Create larger than needed image and use a scale % to size it  Overflow:Hidden  Create Multiple Image Sizes and use them accordingly *
  13. 13. Media Queries  Despite our work with flexible grid layout and flexible images our site might have issues when displayed small or widescreen  Media Types defined by W3C
  14. 14. all Media Types Suitable for all devices. braille Intended for braille tactile feedback devices. embossed Intended for paged braille printers. handheld print Intended for handheld devices (typically small screen, limited bandwidth). Intended for paged material and for documents viewed on screen in print preview mode. Plea projection Intended for projected presentations, for example projectors. Please consult the section on pag screen Intended primarily for color computer screens. speech tty tv Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purp Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable Intended for television-type devices (low resolution, color, limited-scrollability screens, sound ava
  15. 15. Media Query  @media  Asks   screen and (min-width: 1024px) 2 questions of the browser Media type (screen) Query – in parenthesis feature and value
  16. 16. How to Apply  Put these directly in a stylesheet with a declaration - <link rel=“stylesheet” href=“sample.css” media=“screen and minwidth: 1024px” />  Or attach to an import - @import url(sample.css) screen and (min-width: 1024px);
  17. 17. Why Responsive Design?  We have to break away from how we traditionally think about web design/development and start thinking with the new medium in mind.
  18. 18. Responsive SharePoint Sites
  19. 19. Maryland.gov
  20. 20. LGOntario.ca
  21. 21. MarshfieldClinic.org
  22. 22. CFAInstitute.org
  23. 23. When to Create Responsive?  What are the device/browser needs?  What type of Site is it?
  24. 24. Questions you may be asking…  Where do I start to make a Responsive Design?  What is this really going to give the Client/me?  How much do I need to know to create a Responsive SharePoint site?
  25. 25. SharePoint Challenges  What      are the challenges we face? Design Manager creates an HTML master – separation of HTML and .master files Typically Lots of Devices Type of Sites Extra User Experience and Branding effort and costs Not good for intranets
  26. 26. Tools for Responsive SharePoint  Image Renditions  Device Channels
  27. 27. Image Renditions  Optimize   Images for different resolutions Define multiple sizes of image files to be used in your SharePoint sites Must have Blob Cache enabled in web.config  Add Screenshots and Steps - Sample
  28. 28. Create Image Renditions
  29. 29. Modify Image Rendtions
  30. 30. Device Channels  Device   Channels Pros and Cons A DC can use a particular MP Specified for Different Browsers
  31. 31. Device Channels  Device    Channels Pros and Cons More Development for creation and Management of Multiple Master Pages Confusing Performance??
  32. 32. Responsive Design and SharePoint Working with Responsive Design and SharePoint 2013, create, work with and utilize.
  33. 33. Browsers that Support RWD  https://developer.m ozilla.org/enUS/docs/Tools/Resp onsive_Design_View
  34. 34. Browsers that Support RWD  http://blog.divshot.com/post/29829585371/chro me-developer-tools-responsive-design
  35. 35. Great tools for checking your designs!  MattKersley.com/responsive/  Quirktools.com/screenfly/  Screenqueri.es/  Responsinator.com/
  36. 36. RWD Breakpoints http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
  37. 37. Thank you for attending!
  38. 38. Helpful Links  http://msdn.microsoft. com/enus/library/jj733517.aspx  http://blogs.technet.c om/b/tothesharepoint /archive/2013/02/07/sh arepoint-andmobile.aspx     http://blog.mastykarz.nl/responsiv e-image-renditions-sharepoint2013/ http://msdn.microsoft.com/enus/library/jj733518.aspx http://msdn.microsoft.com/enus/library/jj163242.aspx http://msdn.microsoft.com/enus/library/jj862343.aspx
  39. 39. Other links for reading  http://blog.cloudfour.com/css-media-query-for- mobile-is-fools-gold/  http://alistapart.com/article/responsive-web-design  http://timkadlec.com/2012/10/blame-theimplementation-not-the-technique/  http://www.html5rocks.com/en/mobile/responsived esign/  http://coding.smashingmagazine.com/2013/03/11/r esponsible-web-design/
  40. 40. Questions @catpaint1 www.sharepointcat.com - blog
  41. 41. Session Prizes 1 2  4 $25 gift cards 5  4 $25 gift cards 4 @SPS_ATL 4 $25 gift cards 3  4 $25 gift cards 4 $25 gift cards #SPSATL speaker sponsor
  42. 42. Talk About Yourself! Fill out surveys for big prizes SCAN QR CODES
  43. 43. Join us for SharePint    47 |SharePoint Saturday Atlanta
  44. 44. SharePint Directions 48 |SharePoint Saturday Atlanta
  45. 45. 49 |SharePoint Saturday Atlanta
  46. 46. 50 |SharePoint Saturday Atlanta
  47. 47. 51 |SharePoint Saturday Atlanta
  48. 48. 52 |SharePoint Saturday Atlanta

×