Aro - Home
Aro, eBusiness Beyond the Boundaries
13/12/2011

Fluid versus Fixed design formats

 When preparing to have a new website developed, there is a fundamental decision to be made during the design phase of your website project. Do you want a fluid or fixed width format for your website?  There are many arguments for and against both options. Below is an explanation of both types so you can make your mind up for yourself.

Fluid Width
A fluid width site is designed to allow the background image to scale up or down to fit within the dimensions of the browser window.

Fixed Width
The fixed width structure presents all content such as images, panels and text in a strictly defined space which is normally around 1000px in width.

Which option is best for you?
Before you can determine the best option for your site, you will need to think about how the content will be presented and who your audience will be.

Image led design
If you intend to have a highly visual design with large imagery and limited text content you may decide that a fluid format would be more suitable for the website. The fluid format will showcase your imagery well in larger resolution monitors as it will expand to fill the screen.

However you must consider who the visitors to the website will be. If your visitors mainly represent an older demographic there is the possibility that the majority of visitors to your site will be using smaller screen resolutions (1024px width or less).  Often fluid width sites can look poor in monitors with smaller resolution settings. The website scales down to fit within the smaller resolution screen and as a result the content of the site can become bunched together.

Below is an example of 2 Aró websites site presented in larger resolution and a smaller screen resolutions to illustrate the point.

Larger Monitor (1440 x 900px)  
 
 
 Smaller Monitor (1024 x 768px)
 
In the smaller monitor example above, a little less of the background image is visible and the text area dominates the page but covering more of the image. The primary navigation appears larger and fills the width of the screen, whereas on the larger monitor version the navigation appears smaller and has space to the left and right. You can also see that the wave effect covers more of the image in the small monitor version.
 
 Larger Monitor (1440 x 900px)
 
 
 Smaller Monitor (1024 x 768px)
 

In the smaller monitor example above, less of the background image can be seen. The navigation fills the full horizontal space and as a result of the header and footer sections being closer together, the text area fills half of the monitor space.

The combination of many objects being presented within the image (such as tables, chairs and other room features) along with website content overlaid on the image (such as navigation, text area and promotions) means that the benefit of using large imagery to showcase the business becomes significantly reduced.

Text heavy websites
One of the common arguments against fluid layouts for text heavy sites is that lines can become so long that readability is reduced for viewers with wide monitors. Therefore if your site will have long sections of text with limited use of large imagery, a fixed width design may be more suitable. This style of design ensures that the content will be presented in a similar way across multiple resolution monitors. In higher resolution monitors more of the background of the website will be visible. In smaller resolution version (1024px or less) the background may not be visible at all and left to right scroll may become present.

Elastic design
There are techniques available to limit scroll for fixed width sites presented on smaller monitors such as using the elastic or fluid grid design. This function can mitigate against some of the problems which can be encountered with fluid width designs as shown above. Using an elastic style enables everything on the site to resize with the same proportions. See the following link for a good example of an elastic design style (Adobe Photoshop Family). This ensures that few of the design components will look too big or too small regardless of the viewer screen resolution settings. Also see how the panels on the right drop down below the image when the resolution size is reduced.

As trends continue towards larger screen resolutions for desktop or laptop screens and towards smaller screens on mobile devices, the elastic option seems to be the best method of future proofing your website. 

In summary
In general deciding the most suitable layout for your website should be confirmed once you have carefully considered the various factors relating to the site with your website designer. Will it be heavy with text content? Do you have high quality imagery to showcase your business? Who are your online customers? What functionality do you need for the site and how will the functionality be presented in any of the formats mentioned above? If you have clear answers to these questions, then deciding the format most suitable for your site should become much easier.


Source Statistics
The screen resolultion statistics have sourced from both w3schools.com and NetMarketShare. The statistics from both sites show a consistent trend moving towards larger screen resolutions.
return to main page
Add Here:  
  0 Comments on 'Fluid versus Fixed design formats'
Post a Comment:
Name  
  
Comment  
Email