D-Zine - Fixed Design - 800x600 :
MENUS









TOP MENU/BANNER

Now let's proceed to look at further divisions of the page.

It is obvious, that since the visual height of the page is so limited, one should be very careful when using it.

If you want to add a top menu or banner it should be as limited in height as possible.

However, this should not lead to the conclusion that a top menu is a bad idea.

Since the top of the page is very easy to jump to, it is an obvious place for a menu. Just keep in mind, that it reduces the space you have for the rest of the visual page.

In general a top menu should be kept at 60 pixels height or less.
(Because 60 pixels allows graphic objects of the same size as full and half banners as well as button 2's. See the Graphics Standards article for more)




SIDE MENU

The other obvious place for a navigation menu is at the upper sides of the page.

You might consider adding either a single menu or two menus (one per side) at the sides of the top of the page.

If you choose to have only one menu, the content of the page will require horizontal scrolling if it's read on a 640x480 screen.

This is almost impossible to do - and certainly difficult enough, to force these visitors to go to other sites.

You might argue here, that you really don't care if this minority of your visitors can't read the content without scrolling. Fair enough. But there is another side effect you should consider:

Readability.

It is hard to read text that spans over an entire page. When moving the eyes from the end of one line to the beginning of the next line, the reader easily looses track of the line.

Usually this problem is solved by writing text in columns.

A good point here is: if you're going to write the text in columns anyway, why not keep it in a single column that can span all the way down the page?

As we shall see now, reserving the center 470 pixels for the main content, allows us to create a very sophisticated design with a primary menu to the left and a secondary menu to the right.

Unlike the case with fixed design for 640x480 screens, when designing for 800x600 one specific horizontal division is way more obvious than any other.

Consider this example showing a layout with two 150 pixel menus and a 470 pixel main content column:


800x600 Screen

Hey Joe!
  1024x768 Screen

Hey Joe!


The layout works fine on both resolutions. The amount of unused space when viewed on a 1024x768 screen is not as dramatic as in the case with a fixed 640x480 design.

However, the most interesting aspect of this design is how it appears when it's viewed at the low 640x480 resolution.

First, no matter where the horizontal scrollbar is placed, the entire main content column is visible.

640x480 Left Side

Hey Joe!
  640x480 Right Side

Hey Joe!


The reason can easily be calculated.

Let's say the scrollbar is dragged all the way to the left.
In this case you will see the left 620 pixels of our page.
The summarized width of our menu (150 pixels) and the main content column (470 pixels) is exactly 620!
This means that when you move the scrollbar either all the way to the left or all the way to the right, the screen cuts the page exactly where the main content column starts/ends.

The important aspect of this is that the design actually maintains complete readability even on 640x480 screens while at the same time, allows you to have a secondary menu at the right side of your page.

Furthermore, the main content column is wide enough to allow even full banners.

Finally the menus are big enough to allow all other standard graphics except the full (468x60) and half-size (234x60) banner standards.

If you place all primary navigation links in the left menu and use the right menu for secondary links and graphics, the design will work perfect on all screens.

 << PREVIOUS
READ MORE >>  
















DEVELOPER TIP!





     "Better Than Books - As Easy As It Gets!"