Your SlideShare is downloading. ×
SES Chicago 2013 - Responsive, Dynamic, Serving Mobile: Which Path is Right for Me?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SES Chicago 2013 - Responsive, Dynamic, Serving Mobile: Which Path is Right for Me?

177
views

Published on

Published in: Marketing

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
177
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
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. Chicago  •  November    4–7,  2013  •  #SESCHI  @SESConf   Responsive,  Dynamic,  Serving  Mobile   Which  Path  is  Right  for  Me?   Benu  Aggarwal   Milestone  Internet  MarkeBng  Inc.   President  and  Founder  
  • 2. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Agenda   •  Mobile  Trends     •  Types  of  mobile  sites   •  Dynamic  Server  Side  verses  Client  Side   Responsive   •  QA  tools   •  Closing  Notes    
  • 3. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Milestone  at  a  glance   Drive online revenue and profitability for our clients Silicon Valley ~ Chicago ~ India 150 employees ~1500 hotels Digital marketing software and services for hospitality
  • 4. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Mobile  Internet  is  growing  fast!  
  • 5. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Device  behavior  at  different  parts  of   the  day  
  • 6. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Understand  the  user  intent…   § Desktop  User   §  Office  hours   §  Research  about   property,  specials,   events,  reviews  and   detailed  informaUon     § Mobile  User   §  Lunch  breaks/Starbucks   §  Looking  for  property   locaUon,  maps  and   direcUons,  click  to  call   reservaUons,  local  area   guide   § Tablet  User   §  Evening  hours   §  Looking  for  visual   content  about   property  and   desUnaUon  
  • 7. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Mobile conversions can be big! Multi screen search behavior
  • 8. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Mobile  visitor  behavior   Use  Google  AnalyUcs        1.  Go  into  Traffic  >  Search  Queries   2.  Select  Mobile  Filter      
  • 9. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal 3  opUons  for  your  mobile  sites   RESPONSIVE CLIENT SIDE   1.  Same  website  &  URL   2.  Different  layout  but  same  elements   resized   3.  Same  content  for  desktop,  mobile   &  iPad   4.  Sites  are  download  heavy   RESPONSIVE  SERVER  SIDE/   DYNAMIC  SERVING           1.  Same  URL  and  website   2.  Different  layout,  different  elements   3.  Different  content  /same  content   served  according  to  device  for   desktop,  mobile  and  I-­‐pad.   4.  Site  speed  is  good  and  server  side   caching  is  effecUve     SEPARATE  MOBILE  SITE             1.  Different  URL   2.  Different  layout   3.  Different  content  for  desktop  and   different  for  mobile.     4.  Sites  are  download  heavy   5.  Need  canonical  and  rel=alternate   tags  to  be  implemented     1   2   3  
  • 10. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Breakpoints: Responsive vs. Dynamic serving Client  side  Responsive/RWD/   AdapBve  /Dynamic  Server  side/RESS   Responsive  design  is  client-­‐side,  meaning  the  whole  page  is  delivered  to   the  device  browser  (the  client),  and  the  browser  then  changes  how  the   page  appears  in  relaUon  to  the  dimensions  of  the  browser  window.   AdapUve  design  is  server-­‐side,  meaning  before  the  page  is  even  delivered,   the  server  (where  the  site  is  hosted)  detects  the  aeributes  of  the  device,   and  loads  a  version  of  the  site  that  is  opUmized  for  its  dimensions  and   naUve  features.   Same  web  URL  consistent  across  all  devices   Same  web  URL  consistent  across  all  devices.       Content  stays  the  same  across  all  devices   Same  content  can  be  shown  across  all  devices  or  ability  to  customize   meta  and  content  shown  per  device   Both  desktop  and    mobile  devices  download  the  enUre  web  page   Most  OpUmized  page  size,  Render  only  those  components  which  are   viewable  on  requested  device   With  responsive,  the  device  itself  does  the  work  with  media  queries  to   display  the  re-­‐sized  images  and  opUmized  layout,     With  adapUve,  the  server  does  the  work  and  delivers  the  page  already   opUmized.   For  images,    small/mobile  images  are  loaded  first  and  then  replace  with   larger  images  designed  for  broadband/desktop  experience.   Images  can  be  further  opUmized  for  mobile  and  tablet  experience  by   taking  advantage  of  the  extra  features.     Page  load  Ume  is  high   Page  Loading  Ume  can  be  controlled,  further  improving  their  experience.     CSS/JS  changes  require  to  make  site  compactable  for  new  devices   RESS  leaves  the  heavy  liling  to  the  server  rather  than  requiring  the   relaUvely  low  powered  device  to  do  all  the  work   Require  25-­‐30%  more  development  (compare  to  RESS)    to  build  and   maintain   The  server  side  approach  saves  on  development  Ume  and  also  saves  on   code  management  and  extension  once  the  iniUal  site  has  been  created,   with  less  risk  of  introducing  bugs  and  the  ability  to  target  devices  based   on  fine  grained  device  detecUon.  
  • 11. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Comprehensive  Responsive   •  Same  URL  with  two  opUons   –  Same  Content     –  Different  Content     •  Different  elements  based   on  device  type   •  Server-­‐side  content   opUmizaUon  to  reduce   download  Ume   •  Integrated  with  CMS  and   analyUcs               Separate  Mobile   •  Different  URL   •  Different  layout   •  Different  content  for   desktop  and  different  for   mobile   •  Integrated  with  CMS  
  • 12. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Search  engines  are  focusing  on     mobile  experience   http://googlewebmastercentral.blogspot.in/2013/06/changes-in-rankings-of-smartphone_11.html
  • 13. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Separate  mobile  site     •  Desktop  Pages  –  Rel  Alternate  (assuming   every  desktop  page  has  mobile    equivalent)     •  Mobile  Page  –  Rel  Canonical  tag  on  the   mobile  site  poinUng  back  to  desktop  site     •  SelecUvely  do  301  redirect  for  pages  which  do   not  exist  on  the  mobile  site    
  • 14. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Mobile   Tablet   Desktop  
  • 15. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Client  side  responsive  design   Requires  mulUple  CSS   stylesheets  so  that  site   displays  correctly  on   the  following   viewports:   –  320  ×  480  Phone   (portrait)   –  480  ×  320  Phone   (landscape)   –  480  ×  800  Small   Tablet  (portrait)   –  800  ×  480  Small   Tablet  (landscape)   –  768  ×  1024  Large   Tablet  (portrait)   –  1024  ×  768  Large   Tablet  (landscape)   –  1280  ×  800   Desktop  
  • 16. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Dynamic  serving  for  different  devices   Mobile   Tablet   Desktop   www.interconUnentalboston.com  
  • 17. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Wire Frames for different Devices
  • 18. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal  How  does  Responsive  Design     Server  Side  work?   User  goes  to  website   Server-­‐side  script  renders  HTML  referencing  the   JavaScript  and  CSS  files  for  device   Server-­‐side  script  detects   user’s  device  type   Tablet.css   Tablet.js   Phone.css   Phone.js   Desktop.css   Desktop.js   We  serve   appropriate  JS  and   CSS  based  on  users   browsing  device    
  • 19. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal RWD Step-by-step Process 1 2 3 Research •  Keywords (same as desktop) •  Content writing (same as desktop) 5 4 Design •  Follow w3 guidelines Programming Testing/QA •  Validate site in simulators and emulators 7 Site live on same URL Promotion •  PPC, Mobile Directories
  • 20. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Responsive  dynamic  serving  is  preferred   Impact  of  download  Ume  on  conversion     Just  One  Second  Delay  In  Page-­‐Load  Can  Cause  7%   Loss  In  Customer  Conversions   1sec   =   7%  Load  Delay   Conversion  Drop  
  • 21. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Page  speed  insights  for  mobile   •  PAGE  ABOVE  THE  FOLD  MUST  RENDER  UNDER  A  SECOND  on  a   mobile  network.   •  Majority  of  users  access  the  page  from  a  3G  network.  Typical   breakdown  of  a  second  while  accessing  a  page   •  Research  shows  any  delay  longer  than  a  second  will  not  keep  user   engaged  
  • 22. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal To  meet  the  1  sec  criteria   1.  Reliable  hosBng  provider     Server  must  render  the  response  (<  200  ms)  –  This  is  the  server   response  Ume  that  it  takes  the  server  to  return  the  HTML.  This   factors  in  the  network  transport  Ume   2.  Minimize  redirects     Number  of  redirects  should  be  minimized  –  One  addiUonal  HTTP   request  can  add  one  or  two  extra  network  round  trips  (A  good   Ume  to  look  into  all  the  redirects  we  are  doing)   3.  Use  inline  CSS  above  the  fold     Avoid  external  blocking  JavaScript  and  CSS  above-­‐the-­‐fold  content     4.  Browser  layout  and  rendering  (200  ms)                    This  is  the  Ume  required  to  parsing  the  HTML,  CSS  &  JS.     5.          OpUmize  JavaScript  execuUon  and  rendering  Ume      
  • 23. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal
  • 24. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Java  Script  and  CSS  comparison  
  • 25. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Using  Page  speed  Insights  to  test   hep://developers.google.com/speed/pagespeed/insights/        
  • 26. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Mobile Integration •  Manage  desktop,  mobile,  tablet  from  one  interface   •  Device-­‐specific  preview  opUon   •  OpUon  to  manage  meta  tags  based  on  device  type   Mobile integration
  • 27. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Mobile  website  QA  tools   •  Other  tools  are  used  for  tesUng   – User  agent  switcher  for  Firefox  &  Chrome   – hep://quirktools.com/screenfly/     – hep://responsivetools.com/site-­‐url/   – Mobilizer   – Physical  devices  Ipad  &  Iphone  
  • 28. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal hep://quirktools.com/screenfly/  
  • 29. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Closing  Notes     •  Know  your  audience  search  behavior   •  Decide  best  mobile  soluUon  for  your  business     •  Do  not  301  redirect  all  pages  to  mobile  home       •  If  you  decide  to  do  separate  mobile  site,  do  rel   alternate  and  rel  cononical     •  Do  performance  tesUng   •  Server  Side  Responsive  can  be  good  if  done   carefully      
  • 30. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Know  Great  People   •  Director  of  Strategies  Client  Facing       •  Sr.  Web  Analyst     •  hep://jobs.milestoneinternet.com    
  • 31. Chicago  |  November  4–7,  2013  |  #SESCHI  |  @SESConf       @milestonemktg @benuaggarwal Thank  You   QuesBons?     Benu  Aggarwal   benu@milestoneinternet.com     www.milestoneinternet.com   blog.milestoneinternet.com   twieer.com/milestonemktg   facebook.com/MilestoneInc   google.com/+MilestoneInternet