Fixed to Fluid Layout

for Ultrabook App Designing

February 26, 2015

Introduction

Ultrabooks have a range of resolutions from 1366 x 768 to 1920 x 1080. (1366×768, 1600×900, 1792×768 and 1920×1080 – Source : Wikipedia) There are new models which are made available with other resolutions and hence the app design has to shape it self to the resolution of the device and yet appear cool.

Approaches

Fixed Layout Design

The fixed layout design does not expand to the height and width of the screen. A user using Asus Zenbook with 1920 x 1080 resolution will see half of the screen empty if he sees an app designed in a fixed layout of 1024 x 600. All images and components in a fixed layout are all based on absolute x and y parameters and would not change.

Zooming Layout Design

Another solution is a to zoom the UI to the ratio of the screen size to the app size. But that scales the app incorrectly so that the images and assets will appear blurred. If we need to maintain the aspect ratio the screen will have black borders on the sides. Also the images might not zoom correctly which might cause the app to become blurred.

Fluid Layout Design

The fluid layout design ensures that the app scales to the size of the device screen in all devices. This approach creates a parent container to the size of the screen and then presents all other components relatively to that. This is the correct approach to ensure that the app works in all screen layouts.

There are five basic parts to creating a fluid GUI which are given below:

We faced a similiar challenge when we optimized MoneyBag for 2 in 1 devices with both Mouse / Keyboard and Touch Inputs. This was hugely a design challenge as the design should respond to both modes and also not feel out of place.

1. Set the width and height of application window to 100%.

2. Set the minimum width and minimum height of the app so that it cannot be resized below that. Every app has a minimum size that it requires to fit all content elegantly.

3. Identify the components of your UI that will resize and their behaviour.

4. Constraint all the components in the UI based on parent components. Donot give x and y positions rather provide the positions as relative to the previous component and provide sizes in percentages rather than a number.

5. Some components can auto-resize but we need to code the resize logic of some components. Handle the resize application event and provide the logic for resize of the components.

There you go. You have your fluid app ready. It is not as easy as it looks and it is learned only with a lot of trial and error. But you will be able to master it very quickly if you understand the basics.

Also note that it takes a lot more time to design and implement a fluid layout when compared to a fixed layout. But it is worth the effort.

Users want fluid apps which can use the full screen space and fluid layouts is the only choice. No one buys a Ultrabook with 1920×1080 resolution to see an app which has a fixed layout of 1024 x 600.

Summary:

1. Ultrabooks have a range of screen resolutions (1366 x 768 to 1920 x 1080) and hence we should make the app fluid to scale the full resolution.

2. The user can manually resize the app to specific size and hence the app should be responsive enough to handle the resize.

3. Fluid apps take a lot more time than fixed layout apps. But it is worth at the end of the day.

4. Taking design considerations as listed above will help you make the app be fluid and responsive to resizes. But it always involved a bit of trial and error since each app is unique from a design perspective.