Fluid vs. Adaptive vs. Fixed layout

A practical guide on how to choose the right strategy with multiple platforms in mind. — Part 2: The responsive layout

In Part 1. I’ve summarized the technical and business aspects of the responsive design strategies to consider before deciding whether a Native mobile app vs. Dedicated mobile site vs. Responsive design is the most appropriate for a particular project. Here below I quickly go through the main aspects of choosing a responsive layout.

Responsive layouts

Fluid vs. Adaptive vs. Fixed responsive layout

Fluid layout

Due to the relative widths this layout shows the content based on the available browser space by dynamically resizing the elements, regardless of the device or browser type. A good choice if:

  • There isn’t one or one group of specific device type targeted and 100% device compatibility is required
  • The site needs to support a large audience
  • For proper conceptualization both the user behaviour statistics and the developer expertise are available

Adaptive layout

This layout changes the content arrangement viewport width by viewport width, ensuring a more relevant display based on device type. A good choice if:

  • A tailored solution is needed to be offered for the user’s situational capabilities
  • The existing website needs to be updated, but a complete rewrite is beyond the budget
  • Greater control is required over how the site would look on different devices

Fixed layout

This approach uses one preset page size for all displays, which will be cut on smaller screens and scaled down on mobile devices by default, allowing the user to zoom in. A good choice if:

  • The business has minimal online sales, and a brochure-type web presence is enough
  • The site or interface is supposed to be used on a specific desktop screen
  • Full control over the design and pixel perfect implementation are required for proper functionality

Although, there can be numerous technical elements to consider before picking the most appropriate layout for a specific project, I hope I could enlighten some of the most important ones from the business side.

Original summary: Native mobile app vs. Dedicated mobile site vs. Responsive design — Fluid vs. Adaptive vs. Fixed — Mobile first vs. Desktop first vs. Element first