• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Web Design (RWD) vs Adaptive Web Design (AWD)
 

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

on

  • 9,461 views

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

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.

Statistics

Views

Total Views
9,461
Views on SlideShare
8,049
Embed Views
1,412

Actions

Likes
5
Downloads
108
Comments
2

11 Embeds 1,412

http://thachpham.com 1178
http://clicktecs.com 124
http://www.linkedin.com 54
https://www.linkedin.com 33
http://clicktecs.ctdev.org 12
http://plus.url.google.com 4
http://feedly.com 3
http://webcache.googleusercontent.com 1
http://news.google.com 1
http://keywordwinner.net 1
http://www.forums.dietmoi.tk 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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  Design   Adap5ve  Web  Design  
    • Nomenclature   ©2013    WSI.    All  rights  reserved.   Responsive  Web  Design   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   Contact  Us         Email  :  info@clicktecs.com     Website  :  www.clicktecs.com