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/

1. Adaptive Web Design vs.
Responsive Web Design
Designing for the Mobile Consumer
Jam Hashmi
CEO & President
ClickTecs
@jamshaidhashmi
jam@clicktecs.com

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

4. Nomenclature
©2013 WSI. All rights reserved.

5. Simplify
The two main categories:
–Adaptive Web Design (AWD)
–Responsive Web Design (RWD)

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. 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. 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. Examples of Adaptive Website Design

10. Different URL - AWD

11. Different URL - AWD
IPhone Portrait

12. Examples of Responsive Website
Design

13. Same URL - RWD
IPad Portrait IPad Landscape

14. Same URL- RWD
©2013 WSI. All rights reserved.
Iphone Portrait
IPad Portrait

15. The Power of RWD

16. Average 39% decrease in
Bounce Rate

17. Finding Opportunity
• Get the Analytics Access

18. Find Lost Opportunities
• Mobile Traffic Bounce Rate

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. 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. 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. ©2013 WSI. All rights
Contact Us
Email : info@clicktecs.com
Website : www.clicktecs.com