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

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   hWp://www.alistapart.com/arKcles/responsive-­‐web-­‐design/   #sitecore-­‐neug  #rwd  
6. #sitecoreneug  #rwd  
7. #sitecoreneug  #rwd  
8. #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    
9. #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  
10. #sitecoreneug  #rwd   Mobile  Approaches   NaKve    App   Mobile  Web     w/  Wrapper   Separate    mobile    site   Server-­‐side   device     sensing   AdapKve   Responsive  
11. #sitecoreneug  #rwd   Sometimes Responsive Design is not an Option… •  Time & Budget Constraints •  Legacy Installations •  Different functional requirements for different devices
12. #sitecoreneug  #rwd   Sitecore Devices & Layouts •  Create Devices •  Assign Different Layouts to Devices •  Item Level •  Standard Values on the Template
13. #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
14. #sitecoreneug  #rwd   City of Cambridge Mobile Project
15. #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  
16. #sitecoreneug  #rwd   RWD  UX  Methodology   1.  The  What  and  Why   2.  Content  First   3.  Think  through  InteracKon  
17. #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  
18. #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  
19. #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    
20. #sitecoreneug  #rwd   RWD  UX  Methodology:  Tools   Style  Tiles:  hWp://styleKl.es/   UI  Sketcher:  hWp://uisketcher.com/   FoundaKon:  hWp://foundaKon.zurb.com/  
21. #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    
22. #sitecoreneug  #rwd   Primary  Performance  Issues   OVER  DOWNLOADING   POOR  NETWORKS     Download  &  hide   Download  &  shrink   Download  &  ignore       High  Latency  Variable   Bandwidth   Packet  loss    
23. #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    
24. #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  
25. #sitecoreneug  #rwd   Polyfills     •  Modernizr  (HTML5  Shim)   •  Respond.js   •  AppendAround.js   •  Picturefill.js   •  Ajax  Include  PaWern  or  Lazy  Block  
26. #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.  
27. #sitecoreneug  #rwd   Bringing  it  into  Sitecore  
28. #sitecoreneug  #rwd   Bringing  it  into  Sitecore  
29. #sitecoreneug  #rwd   Bringing  it  into  Sitecore   Control  is  wrapped  with  an  aWribute  which   allows  JavaScript  to  manipulate  the  DOM  as   needed  
30. #sitecoreneug  #rwd   Bringing  it  into  Sitecore   The  resulKng  html  output  on  a  desktop:  
31. #sitecoreneug  #rwd   Bringing  it  into  Sitecore   The  resulKng  HTML  output  on  a  mobile  device  
32. #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  
33. #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  
34. #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  
35. #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  
36. #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  
37. #sitecoreneug  #rwd   Appendix  
38. #sitecoreneug  #rwd   Delight.us
39. #sitecoreneug  #rwd   Planar
40. #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 */ ! !
41. #sitecoreneug  #rwd  
42. #sitecoreneug  #rwd