Recommended
More Related Content
Similar to Responsive SharePoint
Similar to Responsive SharePoint (20)
Recently uploaded
Recently uploaded (20)
Responsive SharePoint
- 1. PROUDLY BROUGHTTOYOU BY: P R O V O K E S O L U T I O N s Responsive SharePoint Rebecca Gordon @BEXKELLEHER Technical Specialist Emma Woods @cODINGcOCKATOO Front End Developer
- 2. P R O V O K E S O L U T I O N S
- 3. P R O V O K E S O L U T I O N S What is responsive design?
- 4. P R O V O K E S O L U T I O N S What is adaptive design?
- 5. P R O V O K E S O L U T I O N S Why build responsively?
- 6. P R O V O K E S O L U T I O N S 0 10 20 30 40 50 60 70 80 90 Desktop Laptop Mobile Phone Tablet Game Console Smart TV Device Internet Access – NZ 2013 World Internet Project 2013 – AUT University
- 7. P R O V O K E S O L U T I O N S Designing it
- 16. P R O V O K E S O L U T I O N S Building It: FED
- 18. P R O V O K E S O L U T I O N S Desktop 1024px wide Desktop 800px wide Tablet 768px wide Phone 320px wide Desktop 1920px wide Desktop 1366px wide Tablet 768px wide Phone 480px wide Resolution
- 19. P R O V O K E S O L U T I O N S Grid Based Layout
- 20. Grid classes <div class="col-sm-1 col-md-7 col-lg-8"></div> <div class="hidden-sm col-md-5 col-lg-4"></div>
- 21. Classes to hide content Small devices Medium devices Large devices .hidden-sm Hidden Visible Visible .hidden-md Visible Hidden Visible .hidden-lg Visible Visible Hidden
- 22. Grid classes nested <div class="col-lg-8"> <div class="col-lg-12"></div> </div> <div class="col-lg-4"></div>
- 23. P R O V O K E S O L U T I O N S Building It: DEV Warning, code samples may be incoming
- 24. P R O V O K E S O L U T I O N S Device Channels
- 25. P R O V O K E S O L U T I O N S Image Renditions http://jsfiddle.net/CodingCockatoo/080zp3g9/
- 26. P R O V O K E S O L U T I O N S Main Demo
- 27. P R O V O K E S O L U T I O N S CHALLENGES
- 28. What are the challenges?
- 30. P R O V O K E S O L U T I O N S Q&ATIME FOR YOUR QUESTIONS
- 31. P R O V O K E S O L U T I O N S RESOURCES
- 32. Design resources SharePoint 2013 wireframe template from Flucidity: http://flucidity.azurewebsites.net/2013/02/sharepoint-2013-balsamiq-mock-up- template/ How to make responsive wireframes in Axure: http://www.axure.com/learn/adaptive/tutorial SharePoint online introduces the touch mobile experience: http://blogs.office.com/2013/11/19/sharepoint-online-introduces-the-touch- design-mobile-experience/ Design Manager image renditions: http://msdn.microsoft.com/en- us/library/office/jj720398(v=office.15).aspx#Create
- 33. Development resources Use JavaScript to show renditions on different devices (code by Provoke): http://jsfiddle.net/CodingCockatoo/080zp3g9/ Use a mobile device to work with SharePoint online sites: http://office.microsoft.com/en-us/office365-sharepoint-online-small-business-help/use-a- mobile-device-to-work-with-sharepoint-online-sites-HA102891452.aspx JavaScript injection code for master pages: https://github.com/OfficeDev/PnP/tree/master/Samples/Core.JavaScriptInjection Bootstrap: http://getbootstrap.com/ Mobile devices and SharePoint Server 2013: http://technet.microsoft.com/en-US/library/fp161351(v=office.15).aspx
- 34. Testing resources Windows phone emulator: http://msdn.microsoft.com/en-us/library/windows/apps/ff402563(v=vs.105).aspx Mozilla: https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View MattKersley.com: http://mattkersley.com/responsive/ Screenqueri (Works in all browsers): Screenqueri.es/ Quirktools (Works on Firefox and Chrome only): Quirktools.com/screenfly/