44. How
1. Set device channels
2. Create masterpages in HTML
3. Use the Design Manager in SharePoint 2013 to link a
masterpage to a specific device
45. Step 1: Device Channels
Only for SharePoint 2013 publising sites
Enables rendering different content and style for different
devices
46.
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: Device Channels limitations
10 device channels per site collection
150 inclusion rules per device channel
50. Step 2: Create masterpages
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: Design Manager
Design manager is the way to brand you SharePoint sites
Use your favorite design tool and upload the files to the design
manager
54. My thoughts on this
Good
This is good if you want to deliver different content to different
devices
55. My thoughts on this
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
65. Media Queries allow you write design code
based on the characteristics of a device
66.
67. @media all and (max-width: 640px) {
}
MEDIA QUERY
Type Query or Expression
Media Queries exists out of 2 parts
68. All Suitable for all 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
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
