Web page resizing: Fixed Width vs. Liquid Width |
The first page element of a website design that we have to think about is the containing block, and whether or not it should expand to fill the page known as a fluid design or a fixed width design.
Computer users around the world use a variety of different sized monitors and each with a variety of different screen resolution settings, depending upon their technology. Websites display differently for the different sized monitors and the different resolutions depending on how they are designed.
The following graph illustrates the various screen resolutions and their changing popularity over time. This graph also provides us with some insight as to the future trends.
Although the graph shows a decline in the smaller 800 x 600 sized browsers, it also shows that there are still a significant amount of users who still use the 800 x 600 screen resolution.
Also note that this survey was performed with a more 'technically minded 'user' than may be the case with many New Zealand website users.
These results do not show the number of users with a larger screen size that navigate the internet using smaller browser dimensions, IE not having the browser open full screen. Some users prefer to navigate the internet with their browser windows reduced so that they can view more than one window at a time, this allows them to compare and layer their windows.
These results also do not account for the users who navigate websites with a navigation bar present down the lefthand side of their browser window. This navigation bar often contains shortcuts to browser history or list of favourites. This navigation bar eats into a significant amount of the screen realestate, reducing the amount of space for the website to display.
Even though it may only be 17% of users using 800 pixel wide monitors You do not want to alienate the few 800×600 users you have by forcing them to constantly scroll from left to right and back again to read and navigate your site’s content.
Think about it this way. If you owned a retail store, would you want to make it difficult for 17% of your customers to enter and find their way around your store?
The goal for our website design is to prevent users needing to scroll from left to right or "horizontally" in order to read content.
There are 2 primary options available to us each with their own pros and cons.
Fixed width design is the most common method and means the website is designed to fit within a set width, most commonly within 800 pixels to display on an 800x600 resolution monitor without requiring horizontal scrolling. When the design is displayed on a monitor with a resolution higher that 800 pixels, the website design remains at the set dimensions and a space appears between the design and the browser window, this space is often filled with a colour or in some cases a repeating background image.
The advantages
The Disadvantages:
The fluid design expands to fit the entire width of the browser, the design adjusts itself to fill the window depending on the browser width or screen resolution. The design is fluid and the contents of the page, the text and images, flow within the design to fill the browser width ways.
The advantages
The Disadvantages:
Computer users around the world use a variety of different sized monitors and each with a variety of different screen resolution settings, depending upon their technology. Websites display differently for the different sized monitors and the different resolutions depending on how they are designed.
The following graph illustrates the various screen resolutions and their changing popularity over time. This graph also provides us with some insight as to the future trends.
Although the graph shows a decline in the smaller 800 x 600 sized browsers, it also shows that there are still a significant amount of users who still use the 800 x 600 screen resolution.
Also note that this survey was performed with a more 'technically minded 'user' than may be the case with many New Zealand website users.
These results do not show the number of users with a larger screen size that navigate the internet using smaller browser dimensions, IE not having the browser open full screen. Some users prefer to navigate the internet with their browser windows reduced so that they can view more than one window at a time, this allows them to compare and layer their windows.
These results also do not account for the users who navigate websites with a navigation bar present down the lefthand side of their browser window. This navigation bar often contains shortcuts to browser history or list of favourites. This navigation bar eats into a significant amount of the screen realestate, reducing the amount of space for the website to display.
Even though it may only be 17% of users using 800 pixel wide monitors You do not want to alienate the few 800×600 users you have by forcing them to constantly scroll from left to right and back again to read and navigate your site’s content.
Think about it this way. If you owned a retail store, would you want to make it difficult for 17% of your customers to enter and find their way around your store?
The goal for our website design is to prevent users needing to scroll from left to right or "horizontally" in order to read content.
There are 2 primary options available to us each with their own pros and cons.
Fixed Width
Fixed width design is the most common method and means the website is designed to fit within a set width, most commonly within 800 pixels to display on an 800x600 resolution monitor without requiring horizontal scrolling. When the design is displayed on a monitor with a resolution higher that 800 pixels, the website design remains at the set dimensions and a space appears between the design and the browser window, this space is often filled with a colour or in some cases a repeating background image.
The advantages
- Is more common, the majority of websites are designed with a fixed width, so users are most familiar with it.
- Allows greater flexibility for the design, a rigid set dimension means images and text can be positioned to form a design without the moving or changing when the browser is resized.
- Text can be controlled to ensure that optimum readability is maintained so that no more than 12 words display across the page.
The Disadvantages:
- Can appear dwarfed in large browser windows
- Takes control away from the user
- Requires more scrolling
Fluid Width
The fluid design expands to fit the entire width of the browser, the design adjusts itself to fill the window depending on the browser width or screen resolution. The design is fluid and the contents of the page, the text and images, flow within the design to fill the browser width ways.
The advantages
- adapts to most screen resolutions and devices reduces user scrolling
- This is good because it provides the user with the choice to have the website at what ever width they choose by resizing the browser window.
The Disadvantages:
- Less control with the design elements, for example we are unable to design a banner to fit the width of a column because the column widths change.
- Text spanning a wide distance is more difficult to read. researchers recommend, line lengths of 7 - 12 average words to be optimum.
- Can cause a lack of, or awkward, whitespace
Elevate Your Online Presence with Zeald, Your Premier Google Partner
Discover the power of partnership! This esteemed status places us in the top 3% of Google’s trusted collaborators globally, a testament to our expertise in digital marketing. ensuring your campaigns are not just managed, but optimised for exceptional performance.