More Related Content
Similar to Responsive SharePoint
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Responsive SharePoint
- 1. Get your SharePointwebsite on that mobile device using HTML5 and CSS3 #spsbe @kevinderudder
- 2.
- 3. @kevinderudder working for eGuidelinesand a lecturer at the Technical University of West Flanders. Contact me on kevin@e-guidelines.be
- 10. didn’t notice theSharePoint part
- 12. SharePoint site isa site
- 13. GOAL Why How, what arethe options Conclusion
- 14.
- 15. WHY THIS TOPIC ORWHY SHOULD YOU CARE
- 16.
- 18.
- 24. HOW? Give meaningto your content Style that content <HTML /> .css{}
- 25. HTML< /> IS FORTHE STRUCTURE ONLY
- 26. IMPORTANT that you showthe right content IS on each device
- 27. What is theright content?
- 28.
- 29. Now we’ve thought aboutthe content How do you identify it?
- 30.
- 31. Which one isthe side content? Some use nav, some use navigation
- 32. <div id=“header”> <divid=“top”> <div id=“navigation”> <div id=“menu”> <div id=“footer”> <div id=“leftcontent” > <div id=“main” >
- 33.
- 34. <div id=“header”> <divid=“top”> <div id=“navigation”> <div id=“menu”> <div id=“footer”> <div id=“leftcontent” > <div id=“main” >
- 35.
- 36.
- 37. Styling the contentfor mobile Change the style of the buttons in the <nav> Hide the irrelevant content Make the logo in the header smaller …
- 40.
- 41. Make it mobile 1.Show different page per device 2. Responsive design via Media Queries
- 43. Make it mobile 1.Show different page per device
- 44. How 1. Set devicechannels 2. Create masterpages in HTML 3. Use the Design Manager in SharePoint 2013 to link a masterpage to a specific device
- 45. Step 1: DeviceChannels Only for SharePoint 2013 publising sites Enables rendering different content and style for different devices
- 47. if (/MSIE (d+.d+);/.test(navigator.userAgent)){ var ieversion = new Number(RegExp.$1) if (ieversion >= 9) document.write("You're using IE9 or above") else if (ieversion >= 8) document.write("You're using IE8 or above") else if (ieversion >= 7) document.write("You're using IE7.x") else if (ieversion >= 6) document.write("You're using IE6.x") else if (ieversion >= 5) // <------------- Just because I can document.write("You're using IE5.x") } else document.write("hmmm, dunno")
- 48. var isMobile ={ Android: function () { return navigator.userAgent.match(/Android/i); }, BlackBerry: function () { return navigator.userAgent.match(/BlackBerry/i); }, iOS: function () { return navigator.userAgent.match(/iPhone|iPad|iPod/i); }, Opera: function () { return navigator.userAgent.match(/Opera Mini/i); }, Windows: function () { return navigator.userAgent.match(/IEMobile/i); } };
- 49. Step 1: DeviceChannels limitations 10 device channels per site collection 150 inclusion rules per device channel
- 50. Step 2: Createmasterpages Creating masterpages from scratch is a hell start with a minimal masterpage But what if you need help from a non-sharepoint guy/girl?? convert an existing HTML to a SharePoint masterpage
- 51. Step 3: DesignManager Design manager is the way to brand you SharePoint sites Use your favorite design tool and upload the files to the design manager
- 53.
- 54. My thoughts onthis Good This is good if you want to deliver different content to different devices
- 55. My thoughts onthis Bad Do you really create different pages for different devices?? What if I want to share something by sending a link from my mobile to your desktop? What about SharePoint 2010, 2007???? Why do this when the rest of the world is doing it differently
- 56. Make it mobile 1.Show different page per device 2. Responsive design via Media Queries
- 57. What does itmean: RESPONSIVE??
- 58. Pictures of M.vatia
- 59. Pictures of M.vatia
- 61.
- 65. Media Queries allowyou write design code based on the characteristics of a device
- 67. @media all and(max-width: 640px) { } MEDIA QUERY Type Query or Expression Media Queries exists out of 2 parts
- 68. All Suitable forall devices Braille Intended for braille tactile feedback devices Embossed Intended for paged braille printers Handheld Intended for handheld devices Print Intended for paged material Projection Intended for projected presentations Screen Intended primarily for color computer screens Speech Inteded for speech synthesizers Tty Media using a fixed character grid Tv Intended for television-type devices Taken from the W3C site Media Type
- 69. AHA, there issomething like handheld
- 70. @media screen { body { background-color: Red; } } @mediahandheld { body { background-color: Yellow; } } This is not yellow
- 71. Old devices didn’thave capable browsers
- 72. Modern mobile devicesuse screen as media type
- 73. @media all and(max-width: 640px) { } MEDIA QUERY Feature Value Type Query or Expression
- 74. • Width • Height •Device-width • Device-height • Resolution • Aspect-ratio • Device-aspect-ratio • Color • Color-index • Monochrome Features with min- and max- prefixes The Features Features without min- and max- prefixes • Orientation • Scan • Grid
- 75.
- 76.
- 77. THANK YOU <name>Kevin DeRudder</name> <inputtype=“email”>kevin@e-guidelines.be</email> <blog>kevinderudder.wordpress.com</blog> <twitter>@kevinderudder</twitter>
- 78.