Everyone these days is talking about responsive web design, but then there’s adaptive web design…aren’t they the same thing?  Not really.  This article should clear up any confusion about the difference between the two different types of device specific website design.

With mobile devices and tablet sales (not to mention portable gaming devices) eating up a large portion of the market share, it is important to build a design that will display optimally across all platforms.  Although there are a number of different types of end users out there, it is clear that they all want one thing…accessibility.  For all of you aspiring web designers out there it would be beneficial for you to learn the two design methods below sooner than later as they are now industry standard.

Responsive Web Design

The term Responsive Web Design was developed years ago by a designer by the name of  Ethan Marcotte.  Marcotte noted that “a responsive website design starts with the primary task of incorporating CSS3, media queries, the @media rule, and fluid grids that use percentages to create a flexible foundation. These key points, as well as the use of EMs, flexible images, flexible videos, and fluid type, allow the responsive website to adapt its layout to the viewing device, user agent, and environment.”

So essentially a responsive web design will change in a fluid manner and respond to the screen size at any given point in time…think portrait versus landscape.  For a first hand view of this in action, grab the side of your current web browser window and resize this site to see it change at each breakpoint defined for each of the different devices.

Adaptive Web Design

Adaptive Web Design was first discussed by Aaron Gustafson.  Essentially, using a finite amount of preset layout sizes and some CSS and JavaScript, the adaptive design adapts to the detected size of the screen.

So to define Adaptive Web Design…it is a design that will change to fit a finite amount of predetermined screen sizes and devices.  The key here is that there is a chance a design can get caught in between these finite preset screen sizes which would essentially break the site’s structure and deliver an undesirable experience.

So which one is the safest design method?

Both design methods are device agnostic and allow for websites to be viewed on a mobile device of various screen sizes with a tailored design for that device.  Both of these styles also require extra coding beyond the initial design.  The main difference between the two styles is how the design is created when accessed.

Responsive websites are flexible grids while adaptive sites use predefined pixel measurements which may not include all of the devices that are on the market (especially those that haven’t been developed yet!).  Also, responsive sites utilize more coding as adaptive designs can rely on scripts to adapt the site’s content.

Designs 4 The Web uses responsive design for site building based on a grid system that allows for up to 12 horizontal responsive columns on a page!  Pretty cool, huh?  For more information or get some help with a project contact us today at 203.516.0359.