Adaptive layout is a combination of various layout methods that have existed for years.
One of these is Fluid layout where content areas scale in size when the window screen changes size.
The benefits of fluid layout is it does not matter what screen the end user has as the layout will still work.

However there are limitations to fluid layout in that on a very small window size the areas become so small that
they can no longer function correctly and very large viewing areas, without care the areas can become so large
that the content becomes fractured.  In terms of desktop environments this has been fine as a desktop user in not
likely to size their window to 480px or less although the issue of larger sizes has become common with modern
desktop resolutions.

With the advent of modern mobile browsers it is now quite common for websites to be browsed at 480px or less not
to mention various tablet devices that generally have screen sizes 1024px or less.
The majority or these devices manage to scale website extremely well but for a richer user experience its best to design
the layout for the smaller viewport. This can be done by having a completely new set of assets targeted at mobile devices
but a stronger approach is to create assets (css, js, images) that can be shared amongst all devices which have slight
modifications depending on available space.

Adaptive layout is not new, it has been possible to use css media queries to serve css files or tweaks depending on
available screen size for some years in webkit and most gecko based browsers but not in old non standards based
trident  browsers  (IE and related IE browsers). This made adaptive layout less attractive given that it would require
JavaScript poly fills  not to mention that adaptive layout doesn't add that much benefit to desktop environments.

Today modern versions of trident from IE9 and above support media queries in the same way more importantly
media queries are supported in mobile and tablet devices.

This makes Adaptive layout attractive because:

  • You can share the majority of assets amongst all devices (less code, better maintainability)
  • You can give the site a better look and feel for tablets and mobile devices
  • The risks to older browsers are very minimal, the layout should still perform as fluid and you can serve JavaScript poly fills for older browsers to enhance the same behaviour.

Criticism of Adaptive layout

The main criticism of adaptive layout has been some people think changing the layout of a website depending on size
make the site look different and may confuse users. As far as I'm concerned these are the same type of people
who expect the web to be the same as print - exactly the same on all devices. That is and always has been completely
unrealistic and the dynamic nature of the web should be embraced rather than fought against.

The way I like to think of web design is you create a "flavour" which when applied and various sizes and configurations
and designer that cant achieve continuity in their design should simply not be designing for dynamic content.

However there is some validity to the criticism that boils down to preference, that is should the layout adapt when
viewed on a desktop. Personally I see a benefit; you can have your browser small and other applications
in larger windows without the pain of horizontal scrolling in the browser.
I suspect sites that do have adaptive layout on desktop are partly doing it to demonstrate the capability and also
it doesn't make sense to go out of your way to not serve adaptive to desktop when you could simply serve it to all
devices at once.


  • a user can size their window any way, if they are using screen real estate for another program being able to size the browser smaller and read the content without scrolling horizontally it beneficial.
  • on a mobile device the site isn't scaled, the user doesn't need to zoom and the site has a native look and feel
  • on midway devices like tablets and small laptops the layout is also appropriate and enjoyable.


  • - on desktop when resized the layout changes and the user thinks they are no longer on the site.
    I think this is very unlikely given the fact that the user has knowledge that they have just resized so even if its a surprise they will generally get what just happened especially if  the core "flavour" of the site is maintained.
  • old browser don't have media queries
    Not much of an issue; at the very least the layout will be fluid, and for these devices JavaScript poly fills can be added which essentially augments the media query behaviour.