Responsive or Adaptive Web Design?

Responsive or Adaptive Web Design?
  • 17 September 2013
  • Web Design
  • This post was written exclusively for PV.M Garage by admin
  • Comment (1)»

The age of mobile marketing is upon us. With mobile users accounting for 30 to 50 percent of online traffic, commercial websites cannot afford to ignore the small screen market. The shift to mobile access led the World Wide Web Consortium (W3C) to recommend that website designers strive to make the same information and services available to users across multiple devices and screen sizes.

Trouble is, your carefully designed website, which looks so beautiful and accessible on a PC monitor, may look like a crowded mess on a mobile device. To meet what W3C calls a One Web Approach you need to make significant changes to your site design. You have the choice of two related strategies: adaptive or responsive web design.

Responsive Web Design (RWD)

Responsive web design, or RWD, works by responding to the viewing device, altering the size and appearance of the website to fit any screen on any device. A website designed using RWD is a little like a jigsaw problem, where flexible grid pieces resize and fit together as needed.

RWD uses CSS media queries to determine the viewer’s screen size and choose how to render content. So if your website includes a list of private rehab centers, the list resizes itself for optimum reading.

RWD enables your webmaster to use HTML and CSS, tools with which most designers are quite familiar. On the downside, RWD sites can look fragmented on some screens, and incorporating responsive web design usually requires a complete site redesign.

Adaptive Web Design (AWD)

Adaptive web design (AWD) takes a slightly different approach to multiple screen sizes. Instead of trying to adapt to every potential screen size, AWD adapts to fit a predetermined set of screen sizes.

This means AWD won’t display well on all devices, but it allows the web designer to program for very specific screens. For instance, if most of your viewers use Apple products to view your webpage, AWD allows you to customize for iPad and iPhone screens.

While RWD can look jagged and forced on some screens, AWD opts for quality over quantity. The choice has its own drawbacks however. AWD requires heavy use of JavaScript, meaning some devices will have issues, and it might not be the easiest page for a search engine to crawl.

On the other hand, AWD allows you to alter image quality to match a given screen’s limitations, and can use your existing site’s template as a base for mobile screen optimization, so you don’t have to rebuild your website from scratch.

Two Design Options… for Now

At present, AWD and RWD are the two most popular and accessible design solutions for businesses wanting to maximize the experience of mobile users. Whichever you choose depends heavily on your own needs, and it’s likely more options will develop as users, already obsessed with mobile use, increasingly switch to on-the-go devices to access online information.

Aaron Walker works in the design and development fields as well as blogging in his spare time.

Author: admin

website design and development

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.