Fixed width or Liquid Layout- which is right for your site

How to Decide Which Design Style is Right for Your Site
Web page layout can be done in two different ways:
• Fixed Width Layouts
These are layouts where the width of the entire page is set with a specific numerical value.
• Liquid Layouts
These are layouts where the width of the entire page is flexible depending upon how wide the viewer's browser is.
There are good reasons for using both layout methods, but without understanding both the relative benefits and deficiencies of each method, you can't make a good decision about which to use for your Web page.

Current Status
Fixed Width Layouts
Fixed layouts are layouts that start with a specific size, determined by the Web designer. They remain that width, regardless of the size of the browser window viewing the page. Fixed width layouts allow a designer more direct control over how the page will look in most situations. They are often preferred by designers with a print background, as they allow the designer to make minute adjustments to the layout and have them remain consistent across browsers and computers.

Liquid Layouts
Liquid layout are layouts that are based on percentages of the current browser window's size. They flex with the size of the window, even if the current viewer changes their browser size as they're viewing the site. Liquid width layouts allow a very efficient use of the space provided by any given Web browser window or screen resolution. They are often preferred by designers who have a lot of information to get across in as little space as possible, as they remain consistent in size and relative page weights regardless of who is viewing the page.

What's at Stake?
The method chosen for your Web site design will have an impact on more than just your design. Depending upon which you choose, you will affect your readers' ability to scan your text, find what they are looking for or sometimes even use your site. As well, the layout style will affect your efforts at marketing your Web site through branding, real estate availability, and the aesthetics of your site.
Benefits of Layout Methods
Benefits of Fixed Width Layouts
• A fixed width layout allows the designer to build pages that will look identical no matter who is looking at them.
• Fixed width elements such as images will not overpower text on smaller monitors, because the width of the entire page will include those elements.
• Scan length will not be impacted on large segments of text, no matter how wide the Web browser is.
Benefits of Liquid Layouts
• A liquid width layout expands and contracts to fill the available space.
• All available real estate is used, allowing the designer to display more content on larger monitors, but still remain viable on smaller displays.
• Liquid layouts provide consistency in relative widths, allowing a page to respond more dynamically to customer-imposed restrictions like larger font sizes.
Drawbacks to Layout Methods
Drawbacks to Fixed Width Layouts
• Fixed width layouts can cause horizontal scrolling in smaller browser windows. And most people don't like to scroll horizontally.
• They can also result in large expanses of whitespace in larger monitors, resulting in a lot of unused space and more scrolling vertically than might otherwise be necessary.
• Fixed width layouts don't handle customer changes to font sizes very well. For small increases in the font size, they can be okay, but for larger increases, the layout can become compromised.

Drawbacks to Liquid Layouts
• Liquid layouts allow for very little precise control over the width of the various elements of the page.
• They can result in columns of text that are either too wide to comfortably scan, or on smaller browsers too small for the words to show up clearly.
• Liquid layouts can have problems when a fixed width element, such as an image, is placed inside a liquid column. If the column is rendered without enough space for the image, some browsers will increase the column width, disregarding the designer's instructions, while other browsers will cause overlaps in text and images to achieve the correct percentages.

Resolution
Many sites that have a lot of information they need to convey in as little space as possible would work well with a liquid layout. This allows them to take advantage of all the real estate that larger monitors provide while not shorting smaller displays.

Sites that require precise control over how the pages look in every situation would do well to use a fixed width layout. This provides more assurance that the branding of your Web site is consistent and clear no matter what size monitor it's viewed on.
My Layout Preference
Actually, I prefer a mixed approach. I don't like using liquid layouts for large blocks of text, as that can render the text either unreadable on a small monitor or unscanable on a large one. So I tend to make the main columns of my pages a fixed width, but make headers, footers, and side columns more flexible to take up the remaining real estate and not lose the capacity of larger browsers.

The About site (which I didn't design) uses scripts to determine your browser window size and then changes the display elements accordingly. For example, if you open an About site in a very wide window, you may get an additional column of links on the left side, that customers with smaller monitors might not see. Also, text wrapping around the advertising is dependent upon how wide your browser window is. If it's wide enough, the site will wrap text around it, otherwise, it will display the article text below the ad. While most sites don't need this level of complexity, it demonstrates a way to take advantage of larger screens without impacting the display on smaller screens.

Importance of Struggle

A man found a cocoon of a butterfly. One day a small opening appeared. He sat and watched the butterfly for several hours as it struggled to force its body through that little hole. Then it seemed to stop making any progress. It appeared as if it had gotten as far as it could, and it could go no further.

So the man decided to help the butterfly. He took a pair of scissors and snipped off the remaining bit of the cocoon. The butterfly then emerged easily. But it had a swollen body and small, shriveled wings.

The man continued to watch the butterfly because he expected that, at any moment, the wings would enlarge and expand to be able to support the body, which would contract in time. Neither happened! In fact, the butterfly spent the rest of its life crawling around with a swollen body and shriveled wings. It never was able to fly.

What the man, in his kindness and haste, did not understand was that the restricting cocoon and the struggle required for the butterfly to get through the tiny opening were God's way of forcing fluid from the body of the butterfly into its wings so that it would be ready for flight once it achieved its freedom from the cocoon.
Sometimes struggles are exactly what we need in our lives. If God allowed us to go through our lives without any obstacles, it would cripple us. We would not be as strong as what we could have been. We could never fly!

On-page SEO factor

When I put up my first web site, I believed that Google would naturally bump me up into its rankings as long as I used certain phrases on my site and optimized the on-page factors. I started off by bolding terms like “work from home” and “make money online,” thinking that Google would think I was cool and rank me really high.

Of course, we all (hopefully) know that that isn’t the case. However, there has been discussion in this forum concerning meta tags; let me set the record straight… THEY DON’T MATTER. Heck, I rarely use meta tags in my sites unless I want the description to be something very specific. The keywords meta tag means absolutely nothing nowadays, while the description meta tag serves only to choose what displays as an excerpt when your site is ranked.

On page factors ARE important however. Here’s a break down of what a well optimized site would have:

- < h1 > tag - This is your header. Only use this once or twice on the page.

- < title > tag – I recommend using your keyword twice in your title. Use something like this format: “(Keyword) – How I (Keyword) Quickly” So if your keyword is “How to Jump Higher,” you could use: “How to Jump Higher – The Quickest Way to Learn How to Jump Higher”

- < alt > - You use the ‘alt’ tag when describing a picture. Having your images optimized for the search engines helps your overall on-page optimization.

- Keyword density of 2%. This means that you use your keyword (or a variation of it) twice for every hundred words that you have on your page. If you’ve got 1000 words, you should have your keyword on the page about twenty times.

- Bold the keyword at the beginning and at the end of your page. What I usually do is bold it the first time that it’s used (preferably in the first sentence) and in the footer. In the footer, I’ll have the copyright symbol followed by my keyword, and I bold it there.


While all of this is well and good, it only makes up about 20% of the SEO process. The other 80% is made up of your sites’ structure and the links that you get to them.

A bit about site structure: Google likes to see that your site is well organized. You don’t need to freak out about this, but you should have relevant pages linking to one another, and they should “silo” out. In other words, you should have a sub-page that links to other relevant pages, and irrelevant pages should not link to one another.

With that in mind, Google sees no difference between an internal link and an external link, which means that your most relevant pages can be good sources of link-love to one another. However, links from irrelevant pages do little to help your ranking.

Of course, the most important part of dominating in the search engines is by getting links to your site, and it is very important to focus on getting one-way links to your site. Google can easily see reciprocal and three-way linking structures, so it is best to focus only on one-way links. Remember that Google sees one-way links as a “vote,” and getting links from high PR sites is a more emphatic “vote.”

Instead of doing link exchanges, here are a few places to get quality one-way links to your site:

Directory Submissions: Classic and outdated, but they still work. However, you can usually only submit your index page and have one link to the site. Still, it helps with your main keyword.

Articles: My favorite and most used form of getting one-way links is from articles. The more you write, the more link love you get. I usually write and rewrite my articles to get unique content without having to be overly creative. Then I submit unique versions of my articles to different directories.

Social Bookmarks: I bookmark just about everything, but having links from Propeller, BuddyMarks, and StumbleUpon are all very high quality links that will get attention to your sites.

An even better strategy is to write good articles, submit them article directories, and then bookmark your articles. That way, the PR of your articles is elevated, which passes more link juice back to your money site.


It’s important to remember that SEO is a long process; you’re not going to rank overnight. But the payoff is far worth the effort. Once you’re ranked for your key terms, you have an endless source of free traffic coming to your sites.

Questions are welcomed, and I’ll do my best to get to them. If the desire is there, we can address more advanced SEO tactics as well.

Thanks in advance for the warm welcome to Sitepoint Forums.