The responsive mindset

While responsive design is all the rage in recent months and has drawn lots of attention to it, the responsive mindset - or from the users perspective, the responsive experience - covers much more then viewports and fluid grids. It covers everything from information architecture to device capabilities, from representation to execution. In this talk I am trying to frame the responsive mindset in a whole, as it has developed inside our company and the way we are trying to solve it.

Transcript

1. THIS IS ME Hello
2. skroutz.gr The leading price comparison engine in Greece server side <50 ms page load time <2.4 s 8 Million requests 200.000 unique visitors -­‐  daily  -­‐  
4. Responsive responsive   RESPONSIVE   Responsive   responsive responsive   responsive   Responsive   modern web design|
5. “Rather  than  tailoring  disconnected  designs  to  each   of  an  ever-­‐increasing  number  of  web  devices,  we  can   treat  them  as  facets  of  the  same  experience.”     Ethan  Marco@e   h+p://alistapart.com/ar9cle/responsive-­‐web-­‐design  
6. DESIGN   JS   APPLICATION   DATA   DEVOPS   Responsive   mindset  
7. Design! Responsive   Client Side Logic! Application Logic! Network Logic!
8. Responding  to  the  viewport   RESPONSIVE  DESIGN  
9. How  to  choose  your  breakpoints?   @media  only  screen  and  (max-­‐width:???)  {      @import  "parWals/products_index_mobile";   }  
10. Jonathan  Snook     //smacss.com/   When  it  comes  to  web  development,     the  answer  to  most  ques9ons  is  “it  depends”.   RESPONSIVE  DESIGN  
11. 1)  Based  on  your  domain  knowledge     2)  Based  on  your  visitors  profile   RESPONSIVE  DESIGN  
12. 20  different  browser  versions       22  different  resoluWons     Skroutz.gr  support  threshold  0.5%   RESPONSIVE  DESIGN  
13. RESPONSIVE  DESIGN  
14. Dear  Skroutz.gr   The  new  design  sucks!!!   Revert  to  the  old  design!!     You  Suck!!     Everything  sucks!!     The  world  sucks!!!     Sincerely,   Anonymous   RESPONSIVE  DESIGN  
15. RESPONSIVE  DESIGN  
16. Actual  viewable  area   RESPONSIVE  DESIGN   @media  only  screen  and  (max-­‐device-­‐height:600px)  {          …    
17. Assets  and  Media  Queries   h@p://Wmkadlec.com/2012/04/media-­‐query-­‐asset-­‐downloading-­‐results/   RESPONSIVE  DESIGN  
18. RESPONSIVE  DESIGN  
19. •  Async  CSS  Loading  –  eCSSenWal   (h@p://www.igvita.com/2012/06/14/debunking-­‐responsive-­‐css-­‐performance-­‐myths/)   •  Selector  performance     Advanced  performance  techniques   Approach   Original   Gzip   Reach   Monolithic   534kb   87.6kb   100%   Base   80kb   14kb   Main   151kb   25kb   Account   133kb   20kb   Shops   61kb   9.1kb   Books   74kb   13kb   Blog   35kb   6.5kb   100%   100%   0.12%   0.35%   0.22%   0.03%   165.000  requests  per  day  means  7GB  daily  savings   RESPONSIVE  DESIGN  
20. Design! Responsive  Client Side Logic! Application Logic! Network Logic!
21. JS  –  Responsive  Client  Side  Logic   4G,  3G,  2G,  Wifi  network   (navigator.connecWon)   …in  an  ideal  world…   RESPONSIVE  JS  
22. Responding  to  the  network   RESPONSIVE  JS   skr_load.js.coffee  
23. JS  –  Responsive  Client  Side  Logic   4G,  3G,  2G,  Wifi  network   (navigator.connecWon)   Device     CapabiliWes   RESPONSIVE  JS  
24. Responsive  device  capabiliWes   •  navigator.geolocaWon   •  window.DeviceOrientaWon  and  window.DeviceMoWon  events  
25. JS  –  Responsive  Client  Side  Logic   4G,  3G,  2G,  Wifi  network   (navigator.connecWon)   Device  CPU   Device     CapabiliWes   RESPONSIVE  JS  
26. Performance  wise  the  tacWc  is     •  Load  as  li@le  as  needed  over  a  costly  connecWon  (2G,3G)   •  Load  asynchronously,  on  demand  javascript  only  upon  user  request     The  hidden  cost  of  Javascript   RESPONSIVE  JS  
27. iPhone 3 iPhone 4 iPhone 4S Nexus S iPad iPad2 Mac Book Pro Parsing  and  evaluaWng  Jquery   RESPONSIVE  JS  
28. Design! Responsive   Client Side Logic! Application Logic! Network Logic!
29. Responsive  ApplicaWon  Logic   •  Does  he  use  a  mobile  applicaWon   •  Device  LocaWon   •  Birthyear   •  Gender   •  Twi@er/Facebook  user   •  Payment  Preferences   •  Stored  addresses   •  How  ouen  and  what  does  he  search   •  Favorite  items   RESPONSIVE  APPLICATION  
30. Big  Data  for  small  companies             “…in  recent  years  we  have  developed  the  tools  and  the   knowledge  in  order  to  efficiently  capture,  curate,  store,   analyze  and  visualize/use  an  excessive  amount  of   data…”   RESPONSIVE  APPLICATION  
31. Over  1.000.000  entries   (UserAcFviFes)  per  day!!   RESPONSIVE  APPLICATION   Project  Adam  
32. Adjust  the  user  interface   RESPONSIVE  APPLICATION  
33. Adjust  the  actual  data   RESPONSIVE  APPLICATION  
34. Design! Responsive   Client Side Logic! Application Logic! Network Logic!
35. Responsiveness  in  OperaFons   RESPONSIVE  OPERATIONS  
36. ObjecWves   •  One  Datacenter   •  User  should  perceive  the  page  as  loading  immediately     RESPONSIVE  OPERATIONS  
37. SoluWon   1.  Move  datacenter  to  a  provider  with  direct  peerings  to  the  target  countries   2.  HTML  should  be  cacheable  and  JS  will  enhance  with  non  cacheable  info  e.g.   User  Data     RESPONSIVE  OPERATIONS  
38. SoluWon   1.  Move  datacenter  to  a  provider  with  direct  peerings  to  the  target  countries   2.  HTML  should  be  cacheable  and  JS  will  enhance  with  non  cacheable  info  e.g.   User  Data   3.  Enforce  clear  separaWon  of  HTML  and  JS   4.  Deploy  cheap  Varnish  caching  servers  to  the  target  markets   5.  Celebrate  DevOps  style   RESPONSIVE  OPERATIONS  
39. The  responsive   mindset  
40. THANK YOU!! ! Questions?! @nemlah   //www.skroutz.gr   //www.alved.com