Adaptive Web Design vs.
Responsive Web Design
Designing for the Mobile Consumer
Jam Hashmi
CEO & President
ClickTecs
@jams...
Agenda
 Understanding the Nomenclature
 Adaptive Website Design (AWD)
 Responsive Website Design (RWD)
 Advantages and...
Nomenclature
Nomenclature
©2013 WSI. All rights reserved.
Simplify
The two main categories:
–Adaptive Web Design (AWD)
–Responsive Web Design (RWD)
Similarities AWD & RWD
Both allow websites to be viewed in mobile
devices and various screen sizes, ultimately
providing v...
Adaptive Web Design (AWD)
• Uses the server to detect the device the website is
being viewed on (desktop, tablet, smartpho...
Responsive Web Design (RWD)
• Uses specific CSS code to modify the presentation of
a website based on the size of the devi...
Examples of Adaptive 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 Analytics Access
Find Lost Opportunities
• Mobile Traffic Bounce Rate
Deciding b/w AWD & RWD
• Adaptive requires you to develop and maintain
separate websites either by URL or by separate
HTML...
Deciding b/w AWD & RWD
• Responsive web design relies on HTML5, CSS3
and Javascript, and therefore works best in
relativel...
About ClickTecs
• Founded in 2001
• Head Office in Mississauga, Canada
• Our Services:
– Website Design & Development (e-c...
©2013 WSI. All rights
Contact Us
Email : info@clicktecs.com
Website : www.clicktecs.com
Upcoming SlideShare
Loading in...5
×

Adaptive Web Design vs. Responsive Web Design | Designing for the Mobile Consumer

2,051

Published on

Understand the different between Adaptive Web Design and Responsive Web Design. Both allow websites to be viewed in mobile devices and various screen sizes, ultimately providing visitors with a better mobile user experience. For more details on mobile website design visit - http://clicktecs.com/our-services/website-design-web-development/mobile-website-design/

Published in: Design, Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,051
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Adaptive Web Design vs. Responsive Web Design | Designing for the Mobile Consumer"

  1. 1. Adaptive Web Design vs. Responsive Web Design Designing for the Mobile Consumer Jam Hashmi CEO & President ClickTecs @jamshaidhashmi jam@clicktecs.com
  2. 2. Agenda  Understanding the Nomenclature  Adaptive Website Design (AWD)  Responsive Website Design (RWD)  Advantages and Disadvantages of AWD and RWD  Deciding between Responsive and Adaptive  Examples from Search Results Portfolio  How to uncover lost Opportunities in Analytics  Q/A
  3. 3. Nomenclature
  4. 4. Nomenclature ©2013 WSI. All rights reserved.
  5. 5. Simplify The two main categories: –Adaptive Web Design (AWD) –Responsive Web Design (RWD)
  6. 6. Similarities AWD & RWD Both allow websites to be viewed in mobile devices and various screen sizes, ultimately providing visitors with a better mobile user experience
  7. 7. Adaptive 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 • Distinct templates for each device • Pages load faster – usually housed on its own domain m.domain.com or domain.com/m The condensed definition of an adaptive 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 presentation of a website based on the size of the device it is being displayed on • Information for every device is downloaded regardless of whether it is used • Pages load slower – Same Domain name The condensed definition 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 Adaptive 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 Analytics Access
  18. 18. Find Lost Opportunities • Mobile Traffic Bounce Rate
  19. 19. Deciding b/w AWD & RWD • Adaptive 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 optimize how your site displays on a particular device • With adaptive web design you can optimize image sizes i.e. low resolution 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 relatively 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 Marketing – PPC and Landing Page A/B Split Testing – Custom Application Development
  22. 22. ©2013 WSI. All rights Contact Us Email : info@clicktecs.com Website : www.clicktecs.com

×