November 23, 2013

What Exactly You Need to Know About Adaptive Web Design

Adaptive web design (AWD), from a layman's point of view, is like a cheaper (and not as good) version of responsive website design (RWD). It's also about making your website accessible across a number of different devices but AWD is not resolution agnostic like RWD is.

Where AWD differs from RWD is in the technical execution.

RWD web design is pulled-off by essentially making your website fluid. Content on the site is sized using percentages and reflows as the browser size changes. What is known as media queries is used to set breakpoints where the layout will re-arrange itself to fit in a new window size when it starts to break down at various window sizes (widths).

With AWD the two main differences are that:

It is not fluid like RWD
Breakpoints are set at widths that represent know screen resolutions and not where the layout starts to break down as with RWD

So whereas with RWD it's the content that will determine where the breakpoints are, with AWD it's known device widths that define where the breakpoints are. The problem is that in this fast changing landscape who knows what new devices will be coming on the market in the not so distant future and what their screen resolutions will be.

With the adaptive approach, you are creating a number of different layouts for different screen resolutions and aspect ratios and then loading the relevant layout when a particular browser width is detected while with the responsive approach the layout responds to the width no matter what it is.

The condensed definition of an adaptive design is that it will change to fit a predetermined set of screen and device sizes.

To help you visualise it, when you resize the browser of a responsive website, the content appears fluid and changes as you resize it. However on an adaptive website the content will stay put (static) until you get to a specific breakpoint and then the layout will change and stay put until it gets to the next break point.

So in short, where the two methods differ is in their delivery of the responsive/adaptive structures: RWD relying on flexible and fluid grids, and AWD relying on predefined screen sizes.

Yes it is a bit confusing but you don't need to worry about these technicalities to be honest. Your main decision lies in whether you should have