Fluid layout versus fixed layout – which one is better? The question has plagued publishers for years and there is still no clear answer. Both layouts have their pros and cons but the final decision should depend on the eBook usability. Ideally, before designing an eBook, the publishers must consider the following:

  • Browser choice
  • Screen resolution
  • Whether or not to maximize the browser
  • Extra toolbars open in the browser, for instance, bookmarks, history etc.
  • The operating system and hardware

With these factors in mind, the article discusses the pros and cons of both the fluid layout and the fixed layout. Before delving into the difference between the two, it is first important to understand both types of layouts.

Related Read: Reflowable or Fixed Layout – Which is the Best Layout for your eBook

Table of Contents:

What is a Fixed Layout?

Fixed layout, also known as static layout, is an outline with fixed width, measured in pixels. As the name suggests, the layout is programmed to be fixed. So no matter what the screen size or resolution, the width of the elements will remain the same. In other words, the viewing experience of the users will remain the same across all device types be it computer, laptop, smartphone, or tablet.  Most fixed layout eBooks use a width of 960 px based on the assumption that readers browse in 1024×768 resolution or higher.

Most publishers prefer fixed layout primarily because it is easier to make from print files. And then there is this sense of assurance that the users see the design the same way as the publisher does. Here are some of the advantages and disadvantages of the fixed layout.

Also Read: How ePUB Solutions Streamline Large Scale Digital Publishing Projects

a) Pros – Fixed Layout

The width of a fixed layout is measured in pixels, which makes the layouts easier to use and customize in terms of design.

Width remains the same on all browser types and so the layout provides a uniform viewing experience of all elements in the layout – images, video, forms or any other type of content. There is no concept of minimum or maximum width.

Normally, the standard width is 960 px; however, even if the layout is made for the smallest screen resolution, that is, 800×600 px, the content will be easily readable even at a larger resolution.

b) Cons – Fixed Layout

Since the layout is fixed, readers on small screens will have to use the horizontal scroll bar, which breaks the reading experience. The layout may result in excessive white spaces in case of large screen resolution, upsetting the balance and other design principles.

There has to be a seamless continuation of patterns, textures, and images to ensure a smooth viewing experience on screens with larger resolutions.

Fixed layouts score low on usability especially when the content is viewed on different screen sizes.

Also Read: Best Practices in Professional Copy Editing

What is Fluid Layout?

Fluid layout, also known as the liquid or reflowable layout, is more flexible as components within the layout ‘flow’ to adjust with the screen size of the viewing device. In a fluid layout, the width is measured in percentages instead of pixels. The benefit is that when screen size changes, for instance from the laptop to the smartphone, the proportion of elements remains unchanged. Unlike a fixed layout, the view is adjusted for each reader. However, like the fixed layout, the fluid layout too has its pros and cons.

a) Pros – Fluid Layout

A fluid layout is more user-friendly in that it adjusts itself to the viewer’s screen size. So if you are viewing the content on a small screen, for example, a mobile phone, then you don’t have to scroll horizontally to read the content.

The white space remains the same no matter what the screen size or the browser. As a result, the visual experience is more appealing.

A fluid layout provides an optimal viewing experience. An added bonus is that this layout also loads pretty fast because there is not much adjustment that has to be made in the size and position of the elements when they are loaded.

b) Cons – Fluid Layout

A fluid layout requires more effort than a fixed layout and this is one reason why publishers prefer a fixed layout.

In a fixed layout what the  Publisher sees is what the readers get. However, in the case of the fluid layout, the publisher has less control over what the user sees and so they may overlook certain aspects simply because the page looks fine on their specific screen resolutions. All content types such as images and videos have to be set at multiple widths to accommodate different types of screen resolutions.

Given the very large screen resolution, a lack of content could end up creating excessive white space which would ruin the viewing experience.

While the layout flows to fit the user’s screen size, it is very difficult to design a perfectly fluid layout. The problem becomes all the more compounded when you have images or videos that should remain fixed in size on all browser types and screen sizes.

Also Read: Best Practices in Editorial Project Management for Publishers

In Conclusion – Is Fluid Layout Better than Fixed Layout?

To answer this question, we are back to where we began. Ultimately, the layout you choose should be the one that provides the greatest usability. At a time when viewers are consuming their content on multiple device types, fluid layout seems to be a better option. This is precisely because the liquid nature of the layout allows it to flow and fit with the screen size of the viewer so whether they are viewing the content on their desktop, e-reader or smartphone their experience remains the same. Readers don’t have to scroll horizontally to read the end of the sentence. This being said, fluid layout requires more effort to design, and publishers have less control over how the user will view the content. This is because what works on their screen resolution may not do equally well on some other device.

As discussed above, both the layouts have their pros and cons. You might want fluid content, but at the same time have videos and images that should remain the same on all browsers and device types. In such cases, a hybrid solution consisting of both the fixed layout and the fluid layout will be the ideal solution.