Your SlideShare is downloading. ×
Responsive vs Adaptive Web Design - What about Device Channels?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive vs Adaptive Web Design - What about Device Channels?

7,090
views

Published on

In this presentation I give a brief introduction into Responsive Web Design, Adaptive Web Design and SharePoint Device Channels. …

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.

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,090
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Responsive  Web  Design  vs  Adap1ve  Web  Design   What  about  Device  Channels?   Stefan  Bauer  @S>Bauer  
  • 2. 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    
  • 3. Responsive   SharePoint?  
  • 4. Responsive  Web  Design  vs  Adap1ve  Web  Design   3.300.000  vs  425.000  
  • 5. Media  Query   @media  print  {  …  }     @media  handheld  and  (min-­‐width:  20em),                  screen  and  (min-­‐width:  20em)  {  …  }    
  • 6. Birth  of  Responsive  Web  Design   Date  of  Birth:      25.5.2010   LocaMon:   Responsive  Web  Design  @  A  list  apart  
  • 7. 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  
  • 8. Original  Web  Design   RWD  opMmized  Web  Design   Responsive  Web  Design  @  A  list  apart  –  25.5.2010  
  • 9. hTp://easy-­‐readers.net/contests/i-­‐love-­‐adap1ve-­‐web-­‐design/  
  • 10. ?  
  • 11. 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  
  • 12. 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  
  • 13. Why  Device  Channels  ?     Desktop  !=  Phone  !=  Tablet  
  • 14. 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  
  • 15. 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    
  • 16. 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  
  • 17. 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  
  • 18. 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
  • 19. 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>    
  • 20. Device  Channel  Panel  Snippet   •  Allows  hiding  specific  element  for  defined   device  channels   •  Can  be  added  to  ar1cle  page  layout   •  Reduce  amount  of  master  pages  
  • 21. 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  
  • 22. Think  about  the     USER  and  the  CONTEXT   the  DEVICE  will  be  used  
  • 23. 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  
  • 24.     Why  device  channels  ?  
  • 25. 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