Choosing The Right Website Layout

This article talks about fixed and liquid web layouts. What kind of layout the web designer chooses depends on the site needs and his preferences.

The sole purpose of creating a website is to attract and keep visitors. If visitors find your site unattractive, confusing, cluttered, or unprofessional in looks, they will rapidly move on to the next offering. That is why website layout can be every bit as important as the content of the site. The biggest question for most designers is whether to use a fixed or fluid layout. The topic is often hotly debated as both styles have their own set of pros and cons for use. Which layout is right for your website? In order for you to answer that question, you must first understand the difference between the three types then compare the pros and cons of each. Finally, you must consider the audience you hope to attract to your site. Very large audiences may mean large variances in screen resolution, browser used, extra toolbars taking up space, and even differences in operating systems and hardware. In the end, your needs as well as those of your intended audience will determine your choice.

If you like this article, you might be interested in some of our older articles on The Anatomy Of A Landing Page, Animation And Web Design, QR Codes, Professional Website Planning, Website Design Trends Of 2011.

It is important to understand what each type of layout involves and how it varies from the others. A fixed layout consists of a fixed width wrapper with components that have either a percentage or fixed width. Regardless of the screen width a visitor uses, he or she will see the site at the same width as other visitors. A fluid, or liquid, layout contains elements of percentage widths that adjust depending on the viewer’s screen resolution.

Many web designers prefer a fixed layout because it is easy to make and customize and guarantees that viewers will see what the designer sees. The widths remain the same for every browser so there are less problems with video, forms, images, or other content that are fixed width. In addition, regardless of what screen resolution is required by a browser, the content will still be readable at a larger resolution. Although the benefits of using this type of layout are great, the downsides to using fixed width layouts need to be considered as well. This type of layout can create excessive white space for viewers with higher resolutions, destroying the “rule of thirds”, “divine proportion”, and many other important design principles. This type of layout often provides a lower level of usability and may require a scroll bar for users with small screen resolutions.

Many designers refuse to use a fluid layout for a wide variety of reasons but it has many great benefits that should not be overlooked. A fluid layout adjusts to fit the screen at any resolution, eliminating the need for a scroll bar at low resolutions. The amount of white space is similar for all viewers, improving the visual appeal of the site. Some problems that designers have with this type of layout include less control over what viewers see at different resolutions and the need for applying various widths to fixed-width elements.

Both types of layout provide their own advantages and drawbacks and, in the end, the right choice depends on what you hope to achieve as a designer and the needs of your intended viewers. The best advice is to experiment with both layout styles and see which one you are most comfortable with and which one most closely presents your content the way you want it.

Sharing is Caring
Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment Rules

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i><q cite=""> <strike> <strong>

Kindly use a valid Name and Email address. Spam or unrelated comments will be deleted

If you are a regular commenter, be sure to check our Comment Contest.