responsive web design and sitecore

#sitecoreneug  #rwd  

Responsive  Web    Design  &  Sitecore  

Sitecore  New  England  User  Group    

April  24,  2013  

#sitecoreneug  #rwd  

Agenda  

•  Context    •  Panel  Discussion  

– Device  sensing  &  layout  switching    – UX  Methodology  &  RWD  – Mobile  opKmizaKon  &  polyfills  – Bringing  it  in  to  Sitecore  

•  Q  &  A  

#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  

#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.”  

#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  via  JavaScript  and  CSS  to  adapt  to  capabiliKes  of  calling  device  

Responsive  •  Fluid,  proporKon-­‐based  grids  

•  Flexible  images/media  

•  Media  Queries    

#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  

#sitecoreneug  #rwd  

Mobile  Approaches  

NaKve    App  

Mobile  Web    w/  Wrapper  

Separate    mobile    site  

Server-­‐side  device    sensing   AdapKve  

Responsive  

#sitecoreneug  #rwd  

Sometimes Responsive Design is not an Option…

•  Time & Budget Constraints

•  Legacy Installations

•  Different functional requirements for different devices

#sitecoreneug  #rwd  

Sitecore Devices & Layouts

•  Create Devices •  Assign Different

Layouts to Devices •  Item Level •  Standard Values

on the Template

#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

#sitecoreneug  #rwd  

City of Cambridge Mobile Project

#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  

#sitecoreneug  #rwd  

RWD  UX  Methodology  

1.  The  What  and  Why  2.  Content  First  3.  Think  through  InteracKon  

#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  

#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  

#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  

#sitecoreneug  #rwd  

RWD  UX  Methodology:  Tools  

Style  Tiles:  hWp://styleKl.es/  UI  Sketcher:  hWp://uisketcher.com/  FoundaKon:  hWp://foundaKon.zurb.com/  

#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  

#sitecoreneug  #rwd  

Primary  Performance  Issues  

OVER  DOWNLOADING   POOR  NETWORKS    

Download  &  hide  Download  &  shrink  Download  &  ignore  

 High  Latency  Variable  

Bandwidth  Packet  loss  

#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  

#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  

#sitecoreneug  #rwd  

Polyfills    

•  Modernizr  (HTML5  Shim)  •  Respond.js  •  AppendAround.js  •  Picturefill.js  •  Ajax  Include  PaWern  or  Lazy  Block  

#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.  

#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  JavaScript  to  manipulate  the  DOM  as  needed  

#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  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  

#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  

#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  

#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  

#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  

#sitecoreneug  #rwd  

Appendix  

#sitecoreneug  #rwd  

Delight.us

#sitecoreneug  #rwd  

Planar

#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 */ !!

#sitecoreneug  #rwd  

#sitecoreneug  #rwd