Adaptive layout, responsive layout, fixed layout, fluid layout – you’ve probably heard these phrases used by web designers or developers. But what does these mean in a non-technical level? What’s your benefits from using each of these? Does a fluid layout really work well on mobile devices? Does a responsive design solve all your problems and does it really cost twice as much to develop? Read on and you’ll be able to make the correct decision for yourself.

In the last couple of years there’s been a lot of talk about responsive web design as well as a tendency of going away from the good old fixed layouts. Here we’ll try to give you a sober overview of the most common options with their advantages and caveats.

Fixed Layout

Still the most popular type of web site layout. The site’s whole width is fixed to something close to 960px or as of recently 1200px. It’s basically the web equivalent of printed pages. Everything is placed where it was meant to be and the user as little to no control over how it looks and works. Fixed layouts are a nice way to present blogs and sites where the user is supposed to spend a good amount of time reading text content. It’s also possibly the best solution for graphics heavy web sites where impressing the visitor is among the top priorities. A fixed layout is also the most cost effective solution as it takes the least time to design and develop. Where this approach lacks is in it’s inability to scale to a specific device’s width, making such sites hard to use on mobile devices and on anything with a smaller screen. It’s also by far not the best solution for sites that show grid content – think galleries, product catalogs in online stores and multi column news sites. All of these would work better if they were able to use as much horizontal space as possible. There’s more to be said about fixed layouts but let’s not get too deep into it and just break down the pros and cons of this approach:

Pros

  • Easy and fast to design and develop
  • Solid and generally independent of rendering quirks
  • Predictable in terms of content layout
  • Doesn’t require any additional assets

Cons

  • It’s often hard to use on small screens. The user has to zoom in on elements to make them readable and to pan the screen around to see everything
  • Doesn’t use large screens efficiently leaving a lot of horizontal space unused
  • A separate mobile only version of the site may be required

Fluid layout

This is the precursors of modern responsive layouts. A fluid layout means the site is as wide as the browser window and all content automatically flows to fill that width. Some times a minimum and maximum width values are used to restrain it from being too wide or too narrow. While this was a popular approach for many years it is now rare to see a web site with a fluid layout that doesn’t adopt any of the principles of the responsive or adaptive layouts. Let’s not get in too much details here. It suffice to say that a fluid layout makes the content presentation extremely unpredictable and is practically impossible to implement for graphically heavy designs or for sites with long blocks of text content. So let’s get straight to the summary here:

Pros

  • Uses all the available horizontal space efficiently or as much of it as allowed by the maximum width value
  • Reduces the need of vertical scrolling on larger displays
  • In most cases works ok on small screens

Cons

  • Doesn’t work for graphics heavy designs
  • Doesn’t work for complex layouts
  • Long lines of text become hard to read and look unappealing
  • Graphical assets often look out of place and lose their aesthetic appeal
  • A mobile version of the site may still be required in order to provide a good experience to the user

Adaptive layout

Now we’re getting to the good stuff. This type of layout ‘adapts’ to the window or device width by switching between several pre made layouts. Each of these layouts is made to fit a selection of devices and screen resolutions. Basically it works as a set of predefined fixed layouts each targeting a specific range of screen or window sizes. A few of these may be set for different desktop and laptop display sizes, while others may be suited for the more popular tablet screens and for typical smart phone resolutions and display sizes. Depending on the project’s budget and requirements an adaptive layout could be designed to switch to as many or as few sizes as needed. Of course each additional step takes more time to develop and that pushes the total development costs up. A well designed adaptive layout could essentially eliminate the need for a mobile-only version of the site. The same web site works in mobile devices just as good as it does in laptops, tablets and desktop computers. It also allows you to omit certain features from the mobile versions of the layout if needed. So to sum it up:

Pros

  • The design works well on most devices and on most display sizes
  • Layout is predictable and solid like any fixed layout
  • Uses available space with relative efficiency without losing control over the fine details of the layout and positioning
  • Works great for both simple and complex designs and layouts
  • Completely negates the need of a separate mobile version of the site
  • Allows for any features to be hidden on certain devices or sizes, making the experience more friendly and streamlined

Cons

  • Requires additional design and development time, leading to higher costs
  • May require a couple of sets of graphical assets that would suit different devices or screen sizes
  • Doesn’t use exactly the whole horizontal space available as the predefined layouts still have fixed widths
  • Adopting additional screen sizes for more complex layouts requires additional time to design and develop

Responsive layout

A responsive web site combines fluid and adaptive layout in one. The site switches between several predefined layouts, but each of those is a fluid layout which still fills the full width of the window or device. This in theory sounds great but it comes with more than a few flaws. The good part is that in theory a responsive layout makes your site look like it was designed for the exact screen size the visitor uses to view it. The reality however is that this comes at the cost of some design limitations and the need to use additional scripting in order to make all elements of the page float nicely at any screen size. This approach is not a good choice for every web site. Graphics heavy sites would find it very difficult to work with responsive layouts. Same goes with sites that rely on strictly planned aesthetics or use complex data presentation layouts. Although it is possible to do it right even in these cases, that really increases development time. With that said this is still the best approach to mobile web sites, where the available horizontal space varies between different devices and yet every pixel counts.

Pros

  • The design works well on most devices and on most display sizes
  • Uses available space with maximum efficiency filling the whole width of smaller screens
  • Works great for simple layouts and ok with relatively complex ones
  • Completely negates the need of a separate mobile version of the site
  • Allows for any features to be hidden on certain devices or sizes, making the experience more friendly and streamlined

Cons

  • Requires additional design and development time, leading to higher costs
  • Requires javascript solutions in order to work efficiently, leading to larger bandwidth and processing power requirements
  • May require a couple of sets of graphical assets that would suit different devices or screen sizes
  • Doesn’t provide as much control over the layout compared to adaptive layouts
  • Doesn’t work well for graphics heavy designs

The Optimal Solution

With all of this in mind we can safely say that the optimal solution for most modern web sites is a combination of adaptive and responsive layouts. For larger window or screen sizes we benefit from a set of solid and predictable fixed layouts, combined into an adaptive layout. And for smaller screens it’s best to use a responsive layout which uses every pixel effectively and makes the site look like it was developed specifically for the device you’re holding. This hybrid approach extends the time for designing the web site but makes up for it by slightly reducing the development time. Of course it is still more time consuming compared to a fixed or fluid layout but this way you eliminate the need of a mobile-only version of your web site.


Share your thoughts