When a web site is first designed, it is important to decide all the different features that will be present on all pages of the site. We call the graphical look of the site the wrapper. While the wrapper remains the same from page to page the content of each page changes. It is important to keep a uniform look and feel throughout the entire web site. When visitors to your web site move from page to page they should always feel that they are still on your web site.
Many web sites have different sections and often each section has a different look and feel. Even though this may be the case, the actual layout and arrangement of different elements on each page remains or should remain the same. Considering all this, a decision has to be made where to place important components such as site navigation, common links, search boxes, the date and other elements common to all pages on a site. In general, there are two most popular places where to position site navigation. You could either place it on the left side in a vertical column or on top in a horizontal row. The reason these two places are so common is because they work. Some web sites also place the navigation on the right side or on the bottom of the page. Placing it on the bottom is not a good idea because users will most likely have to scroll down in order to find the buttons. However, you may place it on the bottom of your pages in addition to having it on top. That's what we recommend and you can see that on our site as well. Placing it on the right is safer, but again, many users with lower resolutions on their computers will need to scroll to the right to see the navigation section. This leaves the top and left for setting up the navigation. Below you see a preliminary diagram of a web site we designed for a coaching company. You can visit it at www.coach3.com
On this web site we decided to place navigation buttons on the left side. The reason for this is that users can easily find all parts of the web site without scrolling their browser window regardless of their resolution settings. Our web site uses left navigation as well. But, we also use top navigation for secondary elements such as special functionality available on all pages of our site. Our web site demonstrates a combination between usage of top and left navigation together. There is also what's called secondary or section navigation. If your web site has sections or sub sections with a lot of content it may require internal secondary navigation for a specific section. A good place to position such navigation is either on the right side of the page or on top somewhere under main navigation of the site.
Once the preliminary design is accepted, graphics are designed and programming is completed to make the final product fit the original layout. You can see the final product of www.coach3.com below.
There are other things to consider when doing the layout of the page. There are three ways a web page may be rendered. They are:
Click on any of the three items above to see a demo of each design style. These three terms describe how a web page behaves in a browser. For example, our web site is considered "Jello" because it stretches to fill the entire browser window. If you restore your browser window and start stretching the window left and right you will notice that our web site also stretches to fill the entire window and the content on our pages shifts up. On the other hand, www.coach3.com has a "Liquid" design. This means that no matter what the size of a browser window the web site always moves to the center of the window. If you try to resize the window you will notice how www.coach3.com web site always centers itself. These two techniques are the best choices for utilizing the screen real estate and making the site look more professional. The last and the most traditional technique is "Ice." We do not recommend using it anymore, especially because screen resolutions are getting bigger with new LCD monitors. "Ice" means that the web page is fixed in relation to a browser window. No matter what the size of the window, the web page usually remains aligned to the left and with larger resolutions this leaves a huge chunk of empty white space on the right side. This does not look professional at all. The beauty of a liquid design is that it can accommodate a wide range of screen sizes and resolutions and look good on all of them. Our web site renders well on resolutions as low as 640X480 all the way up to 1280X1024 and beyond.
