Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Design & Sitecore

Responsive Web Design & Sitecore

Responsive, Adaptive, or Server-Side Device Sensing and Layout Switching - or all of the above?

Sitecore New England User Group panel discussion on the impact of mobile on Sitecore driven sites

John Eckman

April 24, 2013
Tweet

More Decks by John Eckman

Other Decks in Technology

Transcript

  1. #sitecoreneug  #rwd   Responsive  Web     Design  &  Sitecore

      Sitecore  New  England  User  Group     April  24,  2013  
  2. #sitecoreneug  #rwd   Agenda   •  Context     • 

    Panel  Discussion   – Device  sensing  &  layout  switching     – UX  Methodology  &  RWD   – Mobile  opKmizaKon  &  polyfills   – Bringing  it  in  to  Sitecore   •  Q  &  A  
  3. #sitecoreneug  #rwd   Panel     Wendy  DersKne   Sitecore

     SoluKons  Architect   Deanna  Glaze   Sr.  User  Experience  Designer   Petra  Gregorová   Sr.  Front  End  Developer   Ozell  McBride   Sr.  Sitecore  Developer   John  Eckman   Managing  Director  
  4. #sitecoreneug  #rwd   hWp://alistapart.com/arKcle/dao   “Now  is  the  Kme  for

     the  medium  of  the  web  to   outgrow  its  origins  in  the  printed  page.  .  .  .  It  is  the   nature  of  the  web  to  be  flexible,  and  it  should  be   our  role  as  designers  and  developers  to  embrace   this  flexibility  .  .  .  The  journey  begins  by  le`ng  go   of  control,  and  becoming  flexible.”  
  5. #sitecoreneug  #rwd   Terminology   Adap%ve   •  Predefined  set

     of   layout  sizes   •  Progressive   Enhancement  via   JavaScript  and  CSS  to   adapt  to  capabiliKes   of  calling  device   Responsive   •  Fluid,  proporKon-­‐ based  grids   •  Flexible  images/ media   •  Media  Queries    
  6. #sitecoreneug  #rwd   Sitecore  Device  Layouts   •  Define  different

     layouts  for  device  types,  rely   on  server-­‐side  user-­‐agent  detecKon  and   layout  switching   •  Different  markup  (CSS,  JavaScript,  HTML)  will   be  served  to  different  devices   •  Is  this  “AdapKve”  design?     #sitecoreneug  #rwd  
  7. #sitecoreneug  #rwd   Mobile  Approaches   NaKve    App  

    Mobile  Web     w/  Wrapper   Separate    mobile    site   Server-­‐side   device     sensing   AdapKve   Responsive  
  8. #sitecoreneug  #rwd   Sometimes Responsive Design is not an Option…

    •  Time & Budget Constraints •  Legacy Installations •  Different functional requirements for different devices
  9. #sitecoreneug  #rwd   Sitecore Devices & Layouts •  Create Devices

    •  Assign Different Layouts to Devices •  Item Level •  Standard Values on the Template
  10. #sitecoreneug  #rwd   Device Detection •  Custom device detection • 

    Brian Pedersen's Sitecore and .NET Blog Identifying mobile devices in Sitecore http://briancaos.wordpress.com/2012/04/12/identifying-mobile- devices-in-sitecore/ •  John West Using the Sitecore Rules Engine in a Custom Context: Setting the Context Device hWp://www.sitecore.net/Community/Technical-­‐Blogs/John-­‐West-­‐ Sitecore-­‐Blog/Posts/2010/11/Using-­‐the-­‐Sitecore-­‐Rules-­‐Engine-­‐in-­‐a-­‐ Custom-­‐Context-­‐Se`ng-­‐the-­‐Context-­‐Device.aspx •  Sitecore Mobile Device Detector Module •  Alex Doroshenko hWp://marketplace.sitecore.net/Modules/Mobile_Device_Detector.aspx •  51Degrees.mobi database •  Sitecore’s Rules engine
  11. #sitecoreneug  #rwd   Not  “Either-­‐Or”  but  “Both-­‐And”   •  Mixture

     of  server-­‐side  device  detecKon  AND   responsive  approaches  (fluid  grids,  flexible   media,  even  media  queries)   •  RESS  –  responsive  design  +  server-­‐side   components   •  Mobile-­‐friendly  site  +  naKve  app  for  specific   transacKons  
  12. #sitecoreneug  #rwd   RWD  UX  Methodology   1.  The  What

     and  Why   2.  Content  First   3.  Think  through  InteracKon  
  13. #sitecoreneug  #rwd   RWD  UX  Methodology   1.  The  What

     and  Why   –  Define  business  and  user  goals   –  Make  those  goals  the  North  Star  for  everyone  on   the  team  (including  the  client).     –  Map  these  goals  to  an  experience  rather  than  a   device   2.  Content  First   3.  Think  through  InteracKon  
  14. #sitecoreneug  #rwd   RWD  UX  Methodology   1.  The  What

     and  Why   2.  Content  First   –  Banish  lorem  ipsum   –  Define  content  strategy  sooner  rather  than  later   –  Content  hierarchy  mockups  over  flat  wireframes   3.  Think  through  InteracKon  
  15. #sitecoreneug  #rwd   RWD  UX  Methodology   1.  The  What

     and  Why   2.  Content  First   3.  Think  through  InteracKon   –  Consider  all  use  cases,  even  edge  cases   •  Interface  vs.  page,  fluid  vs.  staKc   •  Map  out  task  flows   –  Sketch  first:  Paper  (or  whiteboard)  is  your  friend   –  Show  chrome:  context  in  RWD  is  important   –  Live  Prototype:  iterate  early  and  omen    
  16. #sitecoreneug  #rwd   RWD  UX  Methodology:  Tools   Style  Tiles:

     hWp://styleKl.es/   UI  Sketcher:  hWp://uisketcher.com/   FoundaKon:  hWp://foundaKon.zurb.com/  
  17. #sitecoreneug  #rwd   Mobile  First  =  OpKmizaKon  First   • 

    Avg.  weight  of  web  pages  is  1.3MB  (IMG  +  JS  =  77%)   •  72%  RWD  sites  weight  the  same  as  desktop   •  71%  users  expect  your  mobile  site  to  load  as  quickly   as  your  desktop  site    
  18. #sitecoreneug  #rwd   Primary  Performance  Issues   OVER  DOWNLOADING  

    POOR  NETWORKS     Download  &  hide   Download  &  shrink   Download  &  ignore       High  Latency  Variable   Bandwidth   Packet  loss    
  19. #sitecoreneug  #rwd   OpKmizaKon   Reduce  requests   –  Browser

     cache   –  Concatenate  JS  &  CSS   –  Lazy  load  content  (Ajax   include  PaWern,  Lazy   Block)   –  data:URI   –  CondiKonal  loading  –   Modernizr.load   Reduce  asset  size   –  HTML,  CSS,  &  Image   compression   –  Replace  Images  with   CSS/Canvas  or  use  SVG   –  MinificaKon   –  Avoid  bulky  frameworks    
  20. #sitecoreneug  #rwd   OpKmizaKon   Speed-­‐up  page  render   – Avoid

     DOM  reflows  &  repaints   – Defer  js  loading   – Lazy  load  JS  –  comment  out  JS  that  isn’t  required   at  load,  uncomment  &  eval()  when  needed   – Touch  beats  onclick   – Avoid  social  media  widgets:  just  link  
  21. #sitecoreneug  #rwd   Polyfills     •  Modernizr  (HTML5  Shim)

      •  Respond.js   •  AppendAround.js   •  Picturefill.js   •  Ajax  Include  PaWern  or  Lazy  Block  
  22. #sitecoreneug  #rwd   Bringing  it  into  Sitecore   •  IA,

     UX,  CreaKve,  Front  End  Development   decisions  have  already  been  made   •  Get  inserted  into  the  RWD  conversaKon  as   soon  as  possible   •  Understand  the  effect  of  priority  placement  of   renderings.  
  23. #sitecoreneug  #rwd   Bringing  it  into  Sitecore   Control  is

     wrapped  with  an  aWribute  which   allows  JavaScript  to  manipulate  the  DOM  as   needed  
  24. #sitecoreneug  #rwd   Bringing  it  into  Sitecore   •  If

     possible  keep  transiKonal  blocks  in  the   layout   •  Render  images  and  videos  without  height  and   width  aWributes.     •  Implement  Responsive  image  control   – Use  a  library  like  Picturefill*  and  store  images  in   sitecore   *hWps://github.com/scoWjehl/picturefill  
  25. #sitecoreneug  #rwd   Q  &  A   Wendy  DersKne  

    Sitecore  SoluKons  Architect   Deanna  Glaze   Sr.  User  Experience  Designer   Petra  Gregorová   Sr.  Front  End  Developer   Ozell  McBride   Sr.  Sitecore  Developer   John  Eckman   Managing  Director  
  26. #sitecoreneug  #rwd   Lessons  Learned   •  RWD  affects  strategy,

     ux  design,  visual  design,   front-­‐end  development,  and  Sitecore   development   •  RWD  doesn’t  eliminate  the  need  to  opKmize   for  mobile  performance   •  Responsive  Images  &  Media  –  how  to  avoid   “send  &  shrink”  approach  
  27. #sitecoreneug  #rwd   Lessons  Learned   •  Content  editors  can

     sKll  cause  problems   •  QA  will  take  longer  than  you  think   •  You  will  find  edge  cases  that  are  subopKmal   •  Beware  third-­‐parKes  (ad  networks,  embedded   media,  iframes,  forms)   •  Retrofi`ng  is  impossible  really  hard   •  There  is  no  single  mobile  context   •  There  are  no  silver  bullets  
  28. #sitecoreneug  #rwd   Resources   •  Sitecore  AdapKve  Images:  

    hWp://marketplace.sitecore.net/en/Modules/Sitecore_AdapKve_Images.aspx   •  Responsive  Web  Design  Done  BeWer  with  Sitecore  Device  DetecKon:   hWp://larre.fixstar.net/2013/02/responsive-­‐web-­‐design-­‐in-­‐sitecore/   •  Does  AdapKve  Beat  Responsive:   hWp://www.sitecore.net/Community/Best-­‐PracKce-­‐Blogs/Phil-­‐Broadbery/Posts/ 2013/03/Does-­‐adapKve-­‐design-­‐beat-­‐responsive-­‐design.aspx   •  The  PresentaKon  Strategy  of  Launch  Sitecore  (RWD  principles  along  with  Sitecore   Device  Layouts):   hWp://www.sitecore.net/Community/Technical-­‐Blogs/Maximizing-­‐Usability/Posts/ 2012/11/The-­‐PresentaKon-­‐Strategy-­‐of-­‐Launch-­‐Sitecore.aspx   •  Sitecore  ASP.NET  CMS  6.6  Features:  Device  Simulators   hWp://www.sitecore.net/Community/Technical-­‐Blogs/John-­‐West-­‐Sitecore-­‐Blog/ Posts/2012/11/Sitecore-­‐ASPNET-­‐CMS-­‐6-­‐6-­‐Features-­‐Device-­‐SimulaKon.aspx     •  hWps://github.com/scoWjehl/picturefill  
  29. #sitecoreneug  #rwd   Media  Queries   /* basic css for

    all sizes first */ ! ! /* 480px / 16px = 30em ________________ */! @media only screen and (min-width: 30em) {!          /* stuff here only applies above 480px wide */! }! ! /* 600px / 16px = 37.5em _______________ */! @media only screen and (min-width: 37.5em) {! /* stuff here only applies above 600px */! }! ! /* etc */ ! !