Responsive Web Design and Sitecore

  • 3,881 views
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

Views

Total Views
3,881
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
35
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. #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 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 Sitecorehttp://briancaos.wordpress.com/2012/04/12/identifying-mobile-devices-in-sitecore/•  John WestUsing the Sitecore Rules Engine in a Custom Context: Settingthe Context DevicehWp://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 DoroshenkohWp://marketplace.sitecore.net/Modules/Mobile_Device_Detector.aspx•  51Degrees.mobi 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://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