![Page 1: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/1.jpg)
Responsive Web Design vs Adap1ve Web Design What about Device Channels?
Stefan Bauer @S>Bauer
![Page 2: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/2.jpg)
Stefan Bauer
Box consul1ng GmbH -‐ Informa1on Architect 1995 – Websurfer 1997 – Webdeveloper / Designer (php / MySql) 2005 – SharePoint 2003 – Branding / Design /
Development
Twi.er: hTp://twiTer.com/s>bauer Blog: hTp://www.n8d.at/blog
![Page 3: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/3.jpg)
![Page 4: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/4.jpg)
![Page 5: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/5.jpg)
![Page 6: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/6.jpg)
Responsive SharePoint?
![Page 7: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/7.jpg)
![Page 8: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/8.jpg)
![Page 9: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/9.jpg)
![Page 10: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/10.jpg)
![Page 11: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/11.jpg)
Responsive Web Design vs Adap1ve Web Design 3.300.000 vs 425.000
![Page 12: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/12.jpg)
![Page 13: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/13.jpg)
![Page 14: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/14.jpg)
![Page 15: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/15.jpg)
Media Query
@media print { … } @media handheld and (min-‐width: 20em), screen and (min-‐width: 20em) { … }
![Page 16: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/16.jpg)
Birth of Responsive Web Design
Date of Birth: 25.5.2010
LocaMon: Responsive Web Design @ A list apart
![Page 17: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/17.jpg)
Mobile browsing is expected to outpace
desktop-‐based access within three to five years.
Two of the three dominant video game consoles
have web browsers. Responsive Web Design @ A list apart – 25.5.2010
![Page 18: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/18.jpg)
Original Web Design
RWD opMmized Web Design
Responsive Web Design @ A list apart – 25.5.2010
![Page 19: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/19.jpg)
![Page 20: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/20.jpg)
![Page 21: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/21.jpg)
![Page 22: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/22.jpg)
![Page 23: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/23.jpg)
![Page 24: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/24.jpg)
![Page 25: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/25.jpg)
![Page 26: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/26.jpg)
![Page 27: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/27.jpg)
![Page 28: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/28.jpg)
![Page 29: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/29.jpg)
hTp://easy-‐readers.net/contests/i-‐love-‐adap1ve-‐web-‐design/
![Page 30: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/30.jpg)
![Page 31: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/31.jpg)
?
![Page 32: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/32.jpg)
Device Channels in SharePoint 2013
• Unterschiedliche Darstellungen für unterschiedliche Device
• Ausblenden und Einblenden von unterschiedlichen Assets (Bilder, Videos)
• Performance Op1mierung • Compa1bility(IE 7.0, IE 8.0) • Accessibility
• Maßgeschneiderte User Experience
![Page 33: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/33.jpg)
Device Channels in SharePoint 2013
• Different layout for different devices • Show hide different assets (Images, Video) • Performance Op1miza1on • Compa1bility (IE 7.0, IE 8.0) • Accessibility
• Tailor-‐made User Experience
![Page 34: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/34.jpg)
![Page 35: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/35.jpg)
Why Device Channels ?
Desktop != Phone != Tablet
![Page 36: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/36.jpg)
Device Channels in SharePoint 2013
Device Channel • Output for different device
classes • Op1miza1on by features
– Touch – Bandwidth – ...
• Fallback for older browser • Accessibility
Responsive Web Design • Output for different screen
resolu1ons only • Limited op1miza1on
through JS – Modernizer – ..
• Limited fallback for older browser
![Page 37: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/37.jpg)
![Page 38: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/38.jpg)
![Page 39: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/39.jpg)
Common User Agent Mozilla/5.0 (compaMble; MSIE 9.0; Windows NT 6.1; Trident/5.0) Mozilla/4.0 (compaMble; MSIE 8.0; Windows NT 6.0; Trident/4.0) Mozilla/4.0 (compaMble; MSIE 7.0; Windows NT 6.0) Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.46 Safari/536.5 Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:11.0) Gecko/20100101 Firefox/11.0 Mozilla/5.0 (Windows; Windows NT 6.1) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.46 Safari/536.5 Mozilla/5.0 (Windows NT 6.1; rv:11.0) Gecko/20100101 Firefox/11.0 Mozilla/5.0 (Windows; Windows NT 6.1) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.46 Safari/536.5 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/536.30.1 (KHTML, like Gecko) Version/6.0.5 Safari/536.30.1 Mozilla/5.0 (Windows; Windows NT 6.1) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2 Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B179 Safari/7534.48.3 Mozilla/5.0 (iPod; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B176 Safari/7534.48.3 Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B176 Safari/7534.48.3
![Page 40: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/40.jpg)
Mozilla/5.0 (compa1ble; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920) Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B179 Safari/7534.48.3
Device Channel Configura1on -‐ Phones
![Page 41: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/41.jpg)
Mozilla/5.0 (compa1ble; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920) Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B179 Safari/7534.48.3
Device Channel Configura1on -‐ Phones
WRONG
![Page 42: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/42.jpg)
Mozilla/5.0 (compa1ble; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920) Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B179 Safari/7534.48.3
Device Channel Configura1on -‐ Phones
List of User Agents -‐ http://user-agent-string.info/list-of-ua
![Page 43: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/43.jpg)
Device Channel Panel Snippet <div data-‐name="DeviceChannelPanel"> <!-‐-‐CS: Start Device Channel Panel Snippet-‐-‐> <!-‐-‐SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-‐-‐> <!-‐-‐MS:<Publishing:DeviceChannelPanel runat="server" IncludedChannels="MyPhoneChannel, MyTabletChannel">-‐-‐> <!-‐-‐PS: Start of READ-‐ONLY PREVIEW (do not modify)-‐-‐><!-‐-‐PE: End of READ-‐ONLY PREVIEW-‐-‐> <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;"> You should replace this div with content that renders based on your Device Channel Panel Properties. </div> <!-‐-‐PS: Start of READ-‐ONLY PREVIEW (do not modify)-‐-‐><!-‐-‐PE: End of READ-‐ONLY PREVIEW-‐-‐> <!-‐-‐ME:</Publishing:DeviceChannelPanel>-‐-‐> <!-‐-‐CE: End Device Channel Panel Snippet-‐-‐> </div>
![Page 44: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/44.jpg)
Device Channel Panel Snippet
• Allows hiding specific element for defined device channels
• Can be added to ar1cle page layout • Reduce amount of master pages
![Page 45: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/45.jpg)
Limita1ons of Device Channels
• Works with Publishing Site only • 10 device channels per site collec1on • 150 inclusion rules per device channel • Works with Office 365 public facing web site
![Page 46: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/46.jpg)
Think about the USER and the CONTEXT the DEVICE will be used
![Page 47: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/47.jpg)
![Page 48: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/48.jpg)
![Page 49: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/49.jpg)
Device Channels -‐ Summary
• Begin planning soon • User Experience and NOT Device Experience – RWD + Device Channels
• Performance op1miza1on – Image Rendi1on, Condi1onal loading, …
• Reach op1miza1on • Future-‐Friendly Design – Progressive Enhancements
![Page 50: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/50.jpg)
Why device channels ?
![Page 51: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/51.jpg)
![Page 52: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/52.jpg)
![Page 53: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/53.jpg)
![Page 54: Responsive vs Adaptive Web Design - What about Device Channels?](https://reader033.vdocument.in/reader033/viewer/2022052823/554f6d34b4c905c8088b530f/html5/thumbnails/54.jpg)
This presenta1on was held at the ShareCamp Vienna, September, 7th 2013 Thanks to @magrom, @ThorstenHans, @cglessner, @atwork for making this event possible Special thanks to @Brad_Frost for some awesome slides and some I was allowed to borrow. You rock !!!
Thank you @S>Bauer