Fluid Page Demonstration


Page appearance

Header

Your header will include your own logo and/or organization name. Background colors and images can sometimes be used, in addition, to enhance the overall effect.

Navigation

This page has left side only navigation, as you can see. Navigation can also be at the top, typically just below the header graphic. Others prefer navigation on the right because they feel it is in closer proximity to browser functions, such as the scroll bar. Frankly, many of the newer browsers mix things up a bit by putting different functions all across the browser bar at the top and including frequently used browser functions in a right-click context menu that is available nearly anywhere the mouse cursor is. For that reason, we tend to believe your site's navigation should be set up to simply best reflect your needs and overall aesthetics over proximity to browser functions.

Paragraph and font

Here is some page content to demonstrate what your paragraph text will look like. In addition, you'll notice that there are three different header fonts--bolder text used to title pages or paragraph sections. There are numerous options for font style, color, or sizes that can be used.

We tend to use the Arial, Helvetica, Sans-serif font family more than most because of its readability across many browser types and screen sizes. Certainly, other font styles are available, and some of those could be appropriate for the type of product or service a Website is promoting. Most important is that your visitors can read your content and that a font style contributes to the overall aesthetics of the page.

Fluid page structure

This particular page structure is known as a fluid structure. The page will expand and contract, width-wise, to accommodate various viewing screen sizes. There are both benefits and drawbacks to this type of design. Of course, the benefit is that it fits on just about any type of screen, regardless of device type (desktop computer to cell phone). If your page content requires items to be fixed in some given location to maintain appearance, we need to address that. It might make the page less flexible but it gives you more control over the display. Generally, we recommend a fluid design for text-heavy sites. For graphics and image intensive sites, a more defined layout can be more appropriate.

Banners and Ads

You can also use the left navigation panel area for additional information or run your own ad campaign. Whether you have your own promotional info to place here or want to place external banners, like Amazon or Google Adsense, it works well without becoming overly distracting to your page content.