Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Web Design (RWD) vs Adaptive Web Design (AWD)


Published on

30% to 50% of your website’s traffic now comes from mobile devices. Taking a One Web approach ensures that not only does your site work on the smartphones and tablets of today, but it can be future-proofed for the unimagined screens of tomorrow. Three popular approaches to developing a One Web site: using a responsive design; client-side adaptive designs; and server-side adaptive designs. One is not better or worse than the other; each has its own strengths and weaknesses and the wise web developer will consider the benefits and drawbacks of each before picking the one that works for their next project.

Published in: Education, Technology, Business

Responsive Web Design (RWD) vs Adaptive Web Design (AWD)

  1. 1. Adap%ve  Web  Design  vs.   Responsive  Web  Design   Designing  for  the  Mobile  Consumer   Jam  Hashmi   CEO  &  President   ClickTecs   @jamshaidhashmi    
  2. 2. 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  
  3. 3. Nomenclature   Responsive  Web  Design   Adap5ve  Web  Design  
  4. 4. Nomenclature   ©2013    WSI.    All  rights  reserved.   Responsive  Web  Design   Adap5ve  Web  Design  
  5. 5. Simplify     The  two  main  categories:       – Adap%ve  Web  Design  (AWD)   – Responsive  Web  Design  (RWD)  
  6. 6. 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    
  7. 7. 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  or   The  condensed  defini5on  of  an  adap5ve  design   is  that  it  will  change  to  fit  a  predetermined  set   of  screen  and  device  sizes.    
  8. 8. 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.    
  9. 9.       Examples  of  Adap5ve  Website  Design  
  10. 10. Different  URL  -­‐  AWD  
  11. 11. Different  URL  -­‐  AWD   IPhone  Portrait  
  12. 12.       Examples  of  Responsive  Website   Design  
  13. 13. Same  URL  -­‐  RWD   IPad  Portrait        IPad  Landscape    
  14. 14. Same  URL-­‐  RWD   ©2013    WSI.    All  rights  reserved.   Iphone  Portrait   IPad  Portrait  
  15. 15. The  Power  of  RWD  
  16. 16. Average  39%  decrease  in   Bounce  Rate  
  17. 17. Finding  Opportunity   •  Get  the  Analy%cs  Access  
  18. 18. Find  Lost  Opportuni%es   •  Mobile  Traffic  Bounce  Rate    
  19. 19. 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  
  20. 20. 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  
  21. 21. 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  
  22. 22. ©2013    WSI.    All  rights   Contact  Us         Email  :     Website  :