• Save
Adaptive Web Design vs. Responsive Web Design | Designing for the Mobile Consumer
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,731 views

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

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/

Statistics

Views

Total Views
1,731
Views on SlideShare
1,725
Embed Views
6

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 6

http://clicktecs.com 6

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • Adaptive Web Design vs. Responsive Web Design Designing for the Mobile Consumer Jam Hashmi CEO & President ClickTecs @jamshaidhashmi jam@clicktecs.com
  • 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
  • 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 visitors with a better mobile user experience
  • 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.
  • 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.
  • 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/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
  • 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
  • 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
  • ©2013 WSI. All rights Contact Us Email : info@clicktecs.com Website : www.clicktecs.com