Website Design Solutions

“Website Layouts”

Things to Think About

The Layout of your website is extremely important. The two most important deciding factors on choosing an appropriate layout would be the content that it will hold and the navigation system, or how visitors will maneuver around the website.

So, what exactly is a layout? A layout is a plan or an arrangement of information on a webpage. For this discussion, I will talk about the layout in general, and why I use a Liquid Layout in my designs as opposed to a Table Layout.

"LIQUID" Layouts vs. "TABLE" Layouts

A "Liquid" website design is one that is designed without the use of tables, and is very flexible within the space available when stretched to the user's browser size. Monitor resolution shouldn't matter since the webpages should resize to fit within the available space in the browser.

It should also be noted that within the CSS (Cascading Style Sheet), which is a separate file where all the formatting information is contained, most of the sizing is done with percentages, and the fonts are generally done with em's and not pixels (px), unless absolute size is important.

If you prefer a centered website design whereby all the content is located in the center of the page, that can be accomplished using CSS also. A background with an unobtrusive design can be used to enhance and bring out the center content.

Other benefits of a Liquid Layout:

Eliminates extra coding making the file sizes smaller.
Savings in bandwidth.
Allows your webpages to load quicker due to smaller file sizes.
Allows the search engines to crawl your content quicker.
Provides more accessibility and usability.

Of course it may become necessary to use a small table within your design if the data that you need to display must be in a tabular format. So I will never say "never ever use tables". And sometimes, I admit, it is just quicker and easier to use a small table as you'll see below.

“Distinct Website Designs” Uses Liquid Layouts

I code all my designs using a Liquid Layout. It's very rare that a table is used unless there is a multitude of tabular data involved. However, with the utilization of CSS, even tabular data can be accomplished without the use of a table.

I'm not explaining the semantics of the actual (X)HTML and CSS, however, if you'd like to view the actual sample webpages, links will be provided so that you can view the source.

Example of a Simple Liquid 2–Column Layout

Sample of a 2-column liquid layout.

I also design 3–column liquid layouts, but my intent is to show you how a simple Liquid Layout can be accomplished.

Also note that the Navigation System are simple links within the right column. A more complicated Navigation System, with the utilization of CSS, can be designed such as the system I used on this site. Navigation Systems can also be placed at the top horizontally under a header or on the right side.

To view the actual webpage, click >>Here.

Example of a Table

Here's an example of a simple table.

My Favorites
Favorite Book	Favorite Color	Favorite Activity	Favorite TV Show
The CSS Anthology	Blue	Designing Websites	American Idol

Here's the HTML code for the table shown above. Note that no CSS has been applied.:

<table align="center" border="1" cellpadding="6">
    <th colspan="4">My Favorites</th>
        <tr align="center">
            <td>Favorite Book</td>
            <td>Favorite Color</td>
            <td>Favorite Activity</td>
            <td>Favorite TV Show</td>
        </tr>
        <tr align="center">
            <td>The CSS Anthology</td>
            <td>Blue</td>
            <td>Designing Websites</td>
            <td>American Idol</td>
        </tr>
    </table>

Example of a Simple Liquid Layout With the Table Above

Sample of a 2-column liquid layout including the above table.

To view the actual webpage including the table, click >>Here.

Using Sizer, a Free Download

Sizer is a freeware utility that allows you to resize any window to an exact, predefined size. This is extremely useful when designing web pages, as it allows you to see how the page will look when viewed on a smaller viewport such as 800 x 600 since the normal size is now considered 1024 x 768.

You can download it here >> Get Sizer. It's only 17kb in a zipped file.

Designing A Website For You

If you feel you are proficient with (X)HTML and CSS, please feel free to use the source code in my examples to create your own website. If not, you can inquire about my services and how I can help you.

Fill out the Website Design Inquiry Form with as much detail as possible, and I'll get back to you within 24–48 hours with a free estimate. There is no obligation on your part.

To The Top

Home Page

Design Solutions

Design Your Own

General

Website Design Solutions

“Website Layouts”

Things to Think About