Responsive Design for SharePoint

1. Planning for SharePoint Branding SPS ATL - 2013 Cathy Dew

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. 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. 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. Device Shapes/Sizes

6. Grid Based Layout

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. 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. 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. Flexible Images and Media  img { max-width: 100%; }  Can apply to video and other rich media  Has limitations

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. 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. 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. 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. Media Query  @media  Asks   screen and (min-width: 1024px) 2 questions of the browser Media type (screen) Query – in parenthesis feature and value

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. 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. Responsive SharePoint Sites

19. Maryland.gov

20. LGOntario.ca

21. MarshfieldClinic.org

22. CFAInstitute.org

23. When to Create Responsive?  What are the device/browser needs?  What type of Site is it?

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. 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. Tools for Responsive SharePoint  Image Renditions  Device Channels

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. Create Image Renditions

29. Modify Image Rendtions

30. Device Channels  Device   Channels Pros and Cons A DC can use a particular MP Specified for Different Browsers

31. Device Channels  Device    Channels Pros and Cons More Development for creation and Management of Multiple Master Pages Confusing Performance??

32. Responsive Design and SharePoint Working with Responsive Design and SharePoint 2013, create, work with and utilize.

33. Browsers that Support RWD  https://developer.m ozilla.org/enUS/docs/Tools/Resp onsive_Design_View

34. Browsers that Support RWD  http://blog.divshot.com/post/29829585371/chro me-developer-tools-responsive-design

35. Great tools for checking your designs!  MattKersley.com/responsive/  Quirktools.com/screenfly/  Screenqueri.es/  Responsinator.com/

36. RWD Breakpoints http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning

37. Thank you for attending!

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. 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. Questions @catpaint1 www.sharepointcat.com - blog

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. Talk About Yourself! Fill out surveys for big prizes SCAN QR CODES

43. Join us for SharePint    47 |SharePoint Saturday Atlanta

44. SharePint Directions 48 |SharePoint Saturday Atlanta

45. 49 |SharePoint Saturday Atlanta