Successfully reported this slideshow.

Responsive Web Design and Sitecore

5

Share

Upcoming SlideShare
Mobile native-hacks
Mobile native-hacks
Loading in …3
×
1 of 42
1 of 42

Responsive Web Design and Sitecore

5

Share

Download to read offline

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.

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 Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Responsive Web Design and Sitecore

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

×