Web Design Layouts – Fixed vs. Fluid

          So you want to build a website? Which layout would best suit your needs? Fixed or fluid? Both layouts have their own advantages as well as their own disadvantages. This topic is one that is sure to bring up a debate as it has been for years. Why would one be better than the other? I’ll discuss each one and talk a little bit about the pros and cons to possibly help you decide which one may be the best for your next project.

Depending upon your approach to designing you or your clients’ website and what you are wanting to achieve, will depend on which of these layouts you should choose. At the end of the day, the biggest and most important aspect of designing websites comes down to usability. What good is a great idea if you can never use it?

What all needs to be considered to design an effective website? Screen resolution, the differences in browsers, toolbars, minimized/maximized windows, mobile devices, operating systems and hardware, as well as many other factors.

FIXED VS. FLUID.  “WHAT’S THE DIFFERENCE?”

Although most designers and developers would consider defining fixed and fluid website layouts to be elementary, we’ll go over it just to be clear.

FIXED DESIGN LAYOUT

Fixed layouts, I do have to say, are the easiest to design. Most designers stick to a 960 grid layout, meaning that the page has a fixed width of 960 pixels. That is, all of the content on the page is put into a container, or wrapper, that is 960 pixels wide. The wrapper is then normally, or at least should be, centered on the page. The great thing about fixed layouts is that no matter what device you are using, the browser will render the page the same way (for the most part). The bad part of a fixed layout is the fact that if viewed on a very large or small resolution, you either have a lot of white space, or have to do a lot of scrolling side to side.

FLUID DESIGN LAYOUT

In a fluid website layout, also referred to as a liquid layout, the majority of the components inside have percentage widths, and thus adjust to the user’s screen resolution. The really cool thing about this is that you can fill the users’ screen up, no matter how big or small.

While some designers may give set widths to certain elements in fluid layouts, such as margins, the layout in general uses percentage widths so that the view is adjusted for each user.

FIXED DESIGN LAYOUT

Many designers prefer fixed layouts to fluid ones because they’re easier to make and provide more assurance that what the designer sees, the user sees. However, the pros and cons come out even with fluid-layout design.

PROS

Fixed-width layouts are much easier to use and easier to customize in terms of design. Widths are the same for every browser, so there is less hassle with images, forms, video and other content that are fixed-width. There is no need for min-width or max-width, which isn’t supported by every browser anyway. Even if a website is designed to be compatible with the smallest screen resolution, 800×600, the content will still be wide enough at a larger resolution to be easily legible.

CONS

A fixed-width layout may create excessive white space for users with larger screen resolutions, thus upsetting “divine proportion,” the “Rule of Thirds,” overall balance and other design principles. Smaller screen resolutions may require a horizontal scroll bar, depending on the fixed layout’s width. Seamless textures, patterns and image continuation are needed to accommodate those with larger resolutions. Fixed-width layouts generally have a lower overall score when it comes to usability.

FLUID DESIGN LAYOUT

Designers may not use fluid page designs for various reasons, but the layout’s benefits are often overlooked. Below are pros and cons to think about when considering fluid web page design.

PROS

Fluid web page design can be more user-friendly, because it adjusts to the user’s set up. The amount of extra white space is similar between all browsers and screen resolutions, which can be more visually appealing. If designed well, a fluid layout can eliminate horizontal scroll bars in smaller screen resolutions.

CONS

The designer has less control over what the user sees and may overlook problems because the layout looks fine on their specific screen resolution. Images, video and other types of content with set widths may need to be set at multiple widths to accommodate different screen resolutions. With incredibly large screen resolutions, a lack of content may create excess white space that can diminish aesthetic appeal.

MY THOUGHTS

In a perfect world, one layout would be a great fit for all devices, both past and present. This is not so in the real world. Liquid layouts, while more of a hassle to code, seem to fit the bill with our ever-changing technological era. You can decide for yourself, but always remember this one tip… The number one most important aspect of a successful website will always be usability.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s