Responsive vs Adaptive Web Design

1
Adaptive v/s Responsive v/s dont shoot me Know
about the pros and cons of Responsive websites
over Adaptive websites
2
Introduction Calling all you digipeople from
Account Management. If you think you need to
steer clear off the adaptive v/s responsive
conversation currently trending on major design
and tech sites, youve got the wrong think
baby! Heres a snapshot of your future, should
you continue ignoring the preceding para. Its a
verse from a Simon Garfunkel song called Old
Friends, off the Bookends album. Time it was and
what a time it was, it was a time of innocence, a
time of confidences.Long ago, it must be, I have
a photograph.Preserve your memories, theyre all
thats left of you. Lets cut to the chase and
move beyond clichés like were living in a
post-pc world, 30-50 of website traffic
emanates from mobi devices, m-dot or tdot
hacks and dive into the what w3c calls the one
web approach. This means the same content is
available to me, irrespective of my access
device. The 3-column website version, gives way
to the 2-column tab version, to the 1-column mobi
version. Developers are now getting weird-ed out
by the ever changing device specifications of
today and the unimagined interfaces of the
future. Two popular approaches to addressing the
one web paradigm include responsive and
client/server-side adaptive design. Debatable is
the one better than the other approach. Having
said that let us now put pen to where mouth
earlier was.
3

• Responsive
• Responsive web design is the most common One Web
  approach. The approach uses CSS media queries to
  modify the presentation of a website based on the
  size of the device display. Responsive designs
  are created using the CSS3 _at_media rule. Allowing
  for the creation of device-specific rules. Using
  fluid grids and percentages for widths, designers
  can create interfaces that auto-respond to device
  sizes.
• Advantage Responsive
• Use of a single template for all devices and CSS
  to determine how content is rendered for varying
  screen sizes. Designers can still work in
  familiar HTML and CSS, technologies.
• Same Experience for Everyone  Mobile users see a
  slightly different layout than desktop users by
  and large everyone viewing the site enjoys the
  same experience.
• Less Maintenance  Multiple designs take longer
  to update. Using a single responsive design,
  reduces time spent updating designs.
• Everything on one URL  Desktop, tablet and
  smartphone users all view a page off the same
  url, which makes this better for social media
  sharing and search engine ranking optimizing.
  Also, stats will not be split for different
  website versions.
• Google Friendly  Google went on record stating
  that they prefer website owners to use responsive
  designs. Google can discover your content more
  efficiently as we wouldnt need to crawl a page
  with the different Googlebot user agents to
  retrieve and index all the content.
• Responsive web design works best in combination
  with a mobile first approach, where the mobile
  use case is prioritized during development.
  Progressive enhancement is then used to address
  tablet and desktop use cases.

4

• Disadvantage Responsive
• Performance When someone loads a web page with
  a responsive design, they load the information
  for all devices, not just the one they are
  viewing your website on. Images are a concern
  too. Most designs simply scale down the size of
  an image. Therefore, smartphone users may
  download an image of 1000 by 1000 pixels in
  width, despite it being scaled down to 250 by 250
  pixels on their device.
• Integrating Ads Its more difficult to
  integrate advertising effectively into a
  responsive design as ads have to fit nicely into
  all resolutions.
• Sacrificing Functionality A lot of sacrifices
  are made when using one single design for all
  devices. For e.g., one will have to compromise a
  users desktop experience to ensure that the
  experience for mobile users is not hindered (and
  vice-versa). From a SEO and consistency
  perspective, responsive designs seem like the
  best option.

5
Responsive Website over various devices
6

• Client-Side Adaptive
• Adaptive builds on the principles of responsive,
  to deliver user experiences targeted at specific
  devices and contexts using JavaScript to enrich
  websites with advanced functionality and
  customization.
• Two approaches to adaptive design are
• one where the adaptations occur on the client
  side, in the users browser, and the other,
• b) where the web server detects and loads the
  device-specific template. Client-side adaptive
  entails not rebuilding the site ground up, but
  building on existing content while still
  delivering a mobile-responsive layout. Expert
  developers can now specifically target particular
  device or screen resolutions. Adaptive designs
  generally require more work, however they ensure
  each visitor gets the best experience possible.
• Advantage Client-side Adaptive
• Best Experience for all When optimizing the
  experience for desktop and mobile users
  individually, you can ensure each gets the best
  experience.
• Fast Loading Users will only load the version
  of the website that they are viewing. Smartphone
  users will really notice the difference in speed
  as mobile designs tend to be simplified versions
  of their desktop equivalents with few images and
  basic navigation.
• Advertising Monetization More designers are
  working towards optimizing advertising options in
  responsive designs, such as replacing 72890
  banners with 46890 banners in smaller
  resolutions. While this is still very limiting,
  monetizing a website in the most profitable way
  requires using adaptive design customized to
  device it is being viewed on.

7

• Disadvantage Client-side Adaptive
• Bad for Search Engines Two different designs
  mean that each article/section has two separate
  URLs. Search engines are allergic to identical
  articles hosted on different URLs, therefore
  traffic may be reduced.
• Cross-Linking Linking internally becomes
  difficult when you have more than one version of
  your website. Do you link to the full version or
  the mobile version of your article? You may have
  to set up redirects so that someone who clicks on
  the full article from the mobile design is
  redirected to the mobile version of the article.
• Stuck in the Middle Mobile users usually find
  the mobile optimised version of a design easier
  to navigate however tablet users may not. Those
  with smaller screens may prefer the mobile
  version of your website whilst others will prefer
  viewing the full version of the design. This does
  not stop a user from landing on the wrong version
  in the first instance.
• Server-Side Adaptive The server-side adaptive
  approach achieves the advantages of the
  client-side approach, through server-side plugins
  and custom user agent detection. What calls for
  choosing server-side adaptive? Typically this
  approach offers distinct templates for each
  device, enabling more customisation. This keeps
  device-detection logic on the server, enabling
  smaller mobile pages that load faster.
• Numerous server-side plugins are now available
  for common CMS and eCom systems like Magneto.
  This approach however requires significant
  changes to back-end systems, which may result in
  a lengthy (and often times costly)
  implementation.
• Managing multiple templates increases maintenance
  costs. It can also encounter performance issues
  when servers are under heavy load. When a mobile
  user agent detection is performed on the server,
  common caching mechanisms deployed by CDNs like
  Akamai, etc. need to be turned off.

8

• Disadvantage Client-side Adaptive
• Often times resulting in slower UX for mobile and
  desktop visitors. Reality byte the majority of
  website owners continue to grapple with the
  basics of responsive hence confronting the
  sophistication of adaptive is way down the road.
• As competition and mobile traffic increases
  globally, however, survival will push site owners
  to pick an approach that works best.
• The next time youre thrown into the responsive
  v/s adaptive debate, playing the ignorant Account
  Management dude wont cut it, cause well youve
  gotten the point. Or rather, many, many points,
  to make your point.