responsive vs adaptive web design - what about device channels?
DESCRIPTION
In this presentation I give a brief introduction into Responsive Web Design, Adaptive Web Design and SharePoint Device Channels. What are the key facts and what needs to be considered to build a great user experience no matter what or where you like to view the content.TRANSCRIPT
Responsive Web Design vs Adap1ve Web Design What about Device Channels?
Stefan Bauer @S>Bauer
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
Responsive SharePoint?
Responsive Web Design vs Adap1ve Web Design 3.300.000 vs 425.000
Media Query
@media print { … } @media handheld and (min-‐width: 20em), screen and (min-‐width: 20em) { … }
Birth of Responsive Web Design
Date of Birth: 25.5.2010
LocaMon: Responsive Web Design @ A list apart
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
Original Web Design
RWD opMmized Web Design
Responsive Web Design @ A list apart – 25.5.2010
hTp://easy-‐readers.net/contests/i-‐love-‐adap1ve-‐web-‐design/
?
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
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
Why Device Channels ?
Desktop != Phone != Tablet
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
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
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
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
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
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>
Device Channel Panel Snippet
• Allows hiding specific element for defined device channels
• Can be added to ar1cle page layout • Reduce amount of master pages
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
Think about the USER and the CONTEXT the DEVICE will be used
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
Why device channels ?
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