Adap%ve  Web  Design  vs.  Responsive  Web  Design  

Designing  for  the  Mobile  Consumer  

Jam  Hashmi  CEO  &  President  

ClickTecs  @jamshaidhashmi  jam@clicktecs.com    

Agenda  

§  Understanding  the  Nomenclature  §  Adap%ve  Website  Design  (AWD)  §  Responsive  Website  Design  (RWD)  §  Advantages  and  Disadvantages  of  AWD  and  RWD  

§  Deciding  between  Responsive  and  Adap%ve  §  Examples  from  Search  Results  PorLolio  §  How  to  uncover  lost  Opportuni%es  in  Analy%cs  §  Q/A  

Nomenclature  

Responsive  Web  Desig

n  Adap5ve  Web  Design  

Nomenclature  

©2013    WSI.    All  rights  reserved.  

Responsive  Web  Desig

n  Adap5ve  Web  Design  

Simplify    

The  two  main  categories:      – Adap%ve  Web  Design  (AWD)  – Responsive  Web  Design  (RWD)  

Similari%es  AWD  &  RWD  

   

Both  allow  websites  to  be  viewed  in  mobile  devices  and  various  screen  sizes,  ul%mately  providing  visitors  with  a  be[er  mobile  user  

experience    

Adap%ve  Web  Design  (AWD)  

•  Uses  the  server  to  detect  the  device  the  website  is  being  viewed  on  (desktop,  tablet,  smartphone)  

•  Sends  specific  files  for  that  device    •  Dis%nct  templates  for  each  device  •  Pages  load  faster  –  usually  housed  on  its  own  domain  m.domain.com  or  domain.com/m  

The  condensed  defini5on  of  an  adap5ve  design  is  that  it  will  change  to  fit  a  predetermined  set  of  screen  and  device  sizes.    

Responsive  Web  Design  (RWD)  

•  Uses  specific  CSS  code  to  modify  the  presenta%on  of  a  website  based  on  the  size  of  the  device  it  is  being  displayed  on    

•  Informa%on  for  every  device  is  downloaded  regardless  of  whether  it  is  used    

•  Pages  load  slower  –  Same  Domain  name  

The  condensed  defini5on  of  a  responsive  web  design  therefore  is  that  it  will  fluidly  change  and  respond  to  fit  any  screen  or  device  size.    

     

Examples  of  Adap5ve  Website  Design  

Different  URL  -­‐  AWD  

Different  URL  -­‐  AWD  

IPhone  Portrait  

     

Examples  of  Responsive  Website  Design  

Same  URL  -­‐  RWD  

IPad  Portrait        IPad  Landscape    

Same  URL-­‐  RWD  

©2013    WSI.    All  rights  reserved.  

Iphone  Portrait  

IPad  Portrait  

The  Power  of  RWD  

Average  39%  decrease  in  Bounce  Rate  

Finding  Opportunity  

•  Get  the  Analy%cs  Access  

Find  Lost  Opportuni%es  

•  Mobile  Traffic  Bounce  Rate    

Deciding  b/w  AWD  &  RWD  

•  Adap%ve  requires  you  to  develop  and  maintain  separate  websites  either  by  URL  or  by  separate  HTML/CSS  code  

•  With  a  separate  website/HTML,  you  can  fine  tune  and  op%mize  how  your  site  displays  on  a  par%cular  device  

•  With  adap%ve  web  design  you  can  op%mize  image  sizes  i.e.  low  resolu%on  for  low-­‐bandwidths  

•  SEO,  Links,  Content  all  need  to  be  redone  

Deciding  b/w  AWD  &  RWD  

•  Responsive  web  design  relies  on  HTML5,  CSS3  and  Javascript,  and  therefore  works  best  in  rela%vely  modern  web  browsers  

•  Responsive  web  design  is  suitable  for  delivery  across  an  increasingly  fragmented  mobile  device  market  (we  noted  over  500  devices  used  in  the  last  client  example  shared)  

•  SEO,  Links,  Content  all  get  carried  over    …  Google  Loves  Responsive  

About  ClickTecs  

•  Founded  in  2001  •  Head  Office  in  Mississauga,  Canada  •  Our  Services:    – Website  Design  &  Development  (e-­‐commerce)  – SEO  &  Social  Media  Marke%ng  – PPC  and  Landing  Page  A/B  Split  Tes%ng  – Custom  Applica%on  Development  

©2013    WSI.    All  rights  reserved.  

Contact  Us        

Email  :  info@clicktecs.com    Website  :  www.clicktecs.com