Responsive Web Design and Sitecore

Uploaded on

Any Sitecore project being started today is likely planning for mobile, but what does that really mean? …

Any Sitecore project being started today is likely planning for mobile, but what does that really mean?

The April New England Sitecore User Group will feature a panel presentation and discussion from ISITE Design’s battle-tested User Experience and Sitecore Development teams that explore the many considerations that go into planning, designing and developing responsive and mobile-friendly Sitecore experiences.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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://  “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://­‐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 fordifferent devices
  • 12. #sitecoreneug  #rwd  Sitecore Devices & Layouts•  Create Devices•  Assign DifferentLayouts to Devices•  Item Level•  Standard Valueson the Template
  • 13. #sitecoreneug  #rwd  Device Detection•  Custom device detection•  Brian Pedersens Sitecore and .NET BlogIdentifying mobile devices in Sitecore•  John WestUsing the Sitecore Rules Engine in a Custom Context: Settingthe Context DevicehWp://­‐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 DoroshenkohWp://• database•  Sitecore’s Rules engine
  • 14. #sitecoreneug  #rwd  City of CambridgeMobile 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://  UI  Sketcher:  hWp://  FoundaKon:  hWp://  
  • 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://  
  • 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://  •  Responsive  Web  Design  Done  BeWer  with  Sitecore  Device  DetecKon:  hWp://­‐web-­‐design-­‐in-­‐sitecore/  •  Does  AdapKve  Beat  Responsive:  hWp://­‐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://­‐Blogs/Maximizing-­‐Usability/Posts/2012/11/The-­‐PresentaKon-­‐Strategy-­‐of-­‐Launch-­‐Sitecore.aspx  •  Sitecore  ASP.NET  CMS  6.6  Features:  Device  Simulators  hWp://­‐Blogs/John-­‐West-­‐Sitecore-­‐Blog/Posts/2012/11/Sitecore-­‐ASPNET-­‐CMS-­‐6-­‐6-­‐Features-­‐Device-­‐SimulaKon.aspx    •  hWps://  
  • 37. #sitecoreneug  #rwd  Appendix  
  • 38. #sitecoreneug  #rwd
  • 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