When using CSS to style a website there are three primary layout types available to web designers. This tutorial aims to arm you with the information you need to know to help make a more informed decision when choosing how to design your website projects.
The Options
The three primary layout styles for determining the width of websites — Fluid, Fixed and Elastic. All have their own merits. There are also drawbacks to these design patterns, so it’s important to know the best situation in which to use each type of layout.
Fluid Layout
Also referred to as a liquid layout, the popular attraction to this style of layout is the full use of screen real estate so you can get a lot of content on your web page. The liquid layout enables designers to not specify a wrapper width. Instead the content of your website is determined by the viewing width of the user’s browser, meaning that you do not have to worry about minimum and maximum sizing of information. Websites which use a fluid layout design include Amazon and Play.
The liquid layout can cause problems for browsers such as IE which does not support properties you may wish to use to set maximum widths of content. This coupled with the fact that filling web pages with content can be bad from a usability perspective often puts people off adopting the layout format.
Fixed Layout
As the name suggests fixed layouts stop the web browser from having the freedom to format text as it sees fit, This is one of the most popular techniques on the web, with websites such as facebook and the BBC applying the design. This basically means that the width your content is contained and stays fixed no matter what, this is typically achieved using something called a wrapper, or container, which holds all the content within it. The fixed width design can be set to the left, center or right of the a page, very easily.
The real bonus of working with a fixed width design is that you can set imagery and design around the consideration that your width will always be the same. This is a real positive if you want a banner image, for example, which needs to be 900px, you will not have to problems when resizing, issues which you would encounter with a fluid design.
The downside of a fixed design however is the dead space that you are left with where your design does not fill the page. A fixed-width design can also force designers to prioritize. As a site grows and content competes for top placement, it must still fit within a specific width.
Elastic Layout
The final design style is known as elastic. Often confused with fluid layouts, elastic layouts enable a web site to proportionately fit the screen it is viewed on. This can be achieved using either ems or %. When a user expands the text size of their web browser the rest of the web page will expand as well because the measurements are based on variables as opposed to set sizes. Hotmail has recently developed their site to use an elastic design. If you look at the font sizes, you will notice they are set in percentages to make the most of the users setup.
Of the three design styles this is the least popular because it is the least beneficial to the users experience. Its variable nature can make it problematic for a user experience. Combined with a lack of browser support on platforms such as IE6, this makes the design unpopular with designers who want to steer clear of the browser incompatibility issues.
Roundup
There are strengths and weaknesses to all the design patterns I have mentioned. By weighing up the pros and cons you can make an educated decision before embarking on your next web project. You’ll know the problems and solutions to problems before you encounter them.
It is very nice to have a tremendous space available for the website on fluid layout.Thanks for the information.