#sitecoreneug	  #rwd	  Responsive	  Web	  	  Design	  &	  Sitecore	  Sitecore	  New	  England	  User	  Group	  	  April	  ...
#sitecoreneug	  #rwd	  Agenda	  •  Context	  	  •  Panel	  Discussion	  – Device	  sensing	  &	  layout	  switching	  	  –...
#sitecoreneug	  #rwd	  Panel	  	  Wendy	  DersKne	  Sitecore	  SoluKons	  Architect	  Deanna	  Glaze	  Sr.	  User	  Experi...
#sitecoreneug	  #rwd	  hWp://alistapart.com/arKcle/dao	  “Now	  is	  the	  Kme	  for	  the	  medium	  of	  the	  web	  to	...
#sitecoreneug	  #rwd	  hWp://www.alistapart.com/arKcles/responsive-­‐web-­‐design/	  #sitecore-­‐neug	  #rwd	  
#sitecoreneug	  #rwd	  
#sitecoreneug	  #rwd	  
#sitecoreneug	  #rwd	  Terminology	  Adap%ve	  •  Predefined	  set	  of	  layout	  sizes	  •  Progressive	  Enhancement	  v...
#sitecoreneug	  #rwd	  Sitecore	  Device	  Layouts	  •  Define	  different	  layouts	  for	  device	  types,	  rely	  on	  s...
#sitecoreneug	  #rwd	  Mobile	  Approaches	  NaKve	  	  App	  Mobile	  Web	  	  w/	  Wrapper	  Separate	  	  mobile	  	  s...
#sitecoreneug	  #rwd	  Sometimes Responsive Design is not an Option…•  Time & Budget Constraints•  Legacy Installations•  ...
#sitecoreneug	  #rwd	  Sitecore Devices & Layouts•  Create Devices•  Assign DifferentLayouts to Devices•  Item Level•  Sta...
#sitecoreneug	  #rwd	  Device Detection•  Custom device detection•  Brian Pedersens Sitecore and .NET BlogIdentifying mobi...
#sitecoreneug	  #rwd	  City of CambridgeMobile Project
#sitecoreneug	  #rwd	  Not	  “Either-­‐Or”	  but	  “Both-­‐And”	  •  Mixture	  of	  server-­‐side	  device	  detecKon	  AN...
#sitecoreneug	  #rwd	  RWD	  UX	  Methodology	  1.  The	  What	  and	  Why	  2.  Content	  First	  3.  Think	  through	  I...
#sitecoreneug	  #rwd	  RWD	  UX	  Methodology	  1.  The	  What	  and	  Why	  –  Define	  business	  and	  user	  goals	  – ...
#sitecoreneug	  #rwd	  RWD	  UX	  Methodology	  1.  The	  What	  and	  Why	  2.  Content	  First	  –  Banish	  lorem	  ips...
#sitecoreneug	  #rwd	  RWD	  UX	  Methodology	  1.  The	  What	  and	  Why	  2.  Content	  First	  3.  Think	  through	  I...
#sitecoreneug	  #rwd	  RWD	  UX	  Methodology:	  Tools	  Style	  Tiles:	  hWp://styleKl.es/	  UI	  Sketcher:	  hWp://uiske...
#sitecoreneug	  #rwd	  Mobile	  First	  =	  OpKmizaKon	  First	  •  Avg.	  weight	  of	  web	  pages	  is	  1.3MB	  (IMG	 ...
#sitecoreneug	  #rwd	  Primary	  Performance	  Issues	  OVER	  DOWNLOADING	   POOR	  NETWORKS	  	  Download	  &	  hide	  D...
#sitecoreneug	  #rwd	  OpKmizaKon	  Reduce	  requests	  –  Browser	  cache	  –  Concatenate	  JS	  &	  CSS	  –  Lazy	  loa...
#sitecoreneug	  #rwd	  OpKmizaKon	  Speed-­‐up	  page	  render	  – Avoid	  DOM	  reflows	  &	  repaints	  – Defer	  js	  lo...
#sitecoreneug	  #rwd	  Polyfills	  	  •  Modernizr	  (HTML5	  Shim)	  •  Respond.js	  •  AppendAround.js	  •  Picturefill.js...
#sitecoreneug	  #rwd	  Bringing	  it	  into	  Sitecore	  •  IA,	  UX,	  CreaKve,	  Front	  End	  Development	  decisions	 ...
#sitecoreneug	  #rwd	  Bringing	  it	  into	  Sitecore	  
#sitecoreneug	  #rwd	  Bringing	  it	  into	  Sitecore	  
#sitecoreneug	  #rwd	  Bringing	  it	  into	  Sitecore	  Control	  is	  wrapped	  with	  an	  aWribute	  which	  allows	  ...
#sitecoreneug	  #rwd	  Bringing	  it	  into	  Sitecore	  The	  resulKng	  html	  output	  on	  a	  desktop:	  
#sitecoreneug	  #rwd	  Bringing	  it	  into	  Sitecore	  The	  resulKng	  HTML	  output	  on	  a	  mobile	  device	  
#sitecoreneug	  #rwd	  Bringing	  it	  into	  Sitecore	  •  If	  possible	  keep	  transiKonal	  blocks	  in	  the	  layou...
#sitecoreneug	  #rwd	  Q	  &	  A	  Wendy	  DersKne	  Sitecore	  SoluKons	  Architect	  Deanna	  Glaze	  Sr.	  User	  Exper...
#sitecoreneug	  #rwd	  Lessons	  Learned	  •  RWD	  affects	  strategy,	  ux	  design,	  visual	  design,	  front-­‐end	  d...
#sitecoreneug	  #rwd	  Lessons	  Learned	  •  Content	  editors	  can	  sKll	  cause	  problems	  •  QA	  will	  take	  lo...
#sitecoreneug	  #rwd	  Resources	  •  Sitecore	  AdapKve	  Images:	  hWp://marketplace.sitecore.net/en/Modules/Sitecore_Ad...
#sitecoreneug	  #rwd	  Appendix	  
#sitecoreneug	  #rwd	  Delight.us
#sitecoreneug	  #rwd	  Planar
#sitecoreneug	  #rwd	  Media	  Queries	  /* basic css for all sizes first */ !!/* 480px / 16px = 30em ________________ */!...
#sitecoreneug	  #rwd	  
#sitecoreneug	  #rwd	  
Upcoming SlideShare
Loading in …5
×

Responsive Web Design and Sitecore

8,017 views

Published on

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.

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,017
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
49
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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 fordifferent devices
  12. 12. #sitecoreneug  #rwd  Sitecore Devices & Layouts•  Create Devices•  Assign DifferentLayouts to Devices•  Item Level•  Standard Valueson the Template
  13. 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. 14. #sitecoreneug  #rwd  City of CambridgeMobile 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  

×